/* ════════════════════════════════════════════════════════════════
   CLOSET ON POINT — CSS común para subpáginas
   Mismos tokens y tipografías que el index.html v2
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
    --mg:#C41885;
    --mg-dark:#9d126a;
    --mg-light:#FCEAF3;
    --ink:#1A1416;
    --black:#1A1416;
    --off:#FDF9FB;
    --white:#FFFFFF;
    --gray-50:#FAFAFA;
    --gray-100:#F5F4F4;
    --gray-200:#E7E5E5;
    --gray-300:#D4D2D2;
    --gray-500:#8B8688;
    --gray-700:#4C4548;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Poppins',sans-serif;background:var(--off);color:var(--ink);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased;}
a{color:inherit;}

/* ══════════ NAV MINI (compartido en subpáginas) ══════════ */
.site-nav{background:var(--off);border-bottom:1px solid var(--gray-200);position:sticky;top:0;z-index:50;}
.site-nav-row{max-width:1480px;margin:0 auto;padding:0 36px;height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;}
.site-nav-back{font-size:.74rem;letter-spacing:2px;text-transform:uppercase;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-weight:500;}
.site-nav-back svg{width:20px;height:20px;flex-shrink:0;display:block;}
.site-nav-back:hover{color:var(--mg);}
.site-nav-logo{font-family:'Bebas Neue',sans-serif;font-size:1.7rem;letter-spacing:4px;color:var(--ink);text-decoration:none;justify-self:center;}
.site-nav-logo .d{color:var(--mg);margin:0 2px;}
.site-nav-icons{display:flex;gap:10px;justify-content:flex-end;align-items:center;}
.site-nav-icons a{background:rgba(196,24,133,.08);border:0;color:var(--ink);position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;transition:all .2s;text-decoration:none;}
.site-nav-icons a svg{width:20px;height:20px;display:block;}
.site-nav-icons a:hover{color:var(--mg);background:rgba(196,24,133,.16);transform:scale(1.05);}

/* ══════════ HERO de cabecera ══════════ */
.page-hero{max-width:1480px;margin:0 auto;padding:64px 36px 36px;text-align:center;}
.page-hero .ey{font-size:.7rem;letter-spacing:3.5px;text-transform:uppercase;color:var(--mg);font-weight:600;margin-bottom:14px;display:inline-flex;align-items:center;gap:10px;}
.page-hero .ey::before,.page-hero .ey::after{content:'';width:30px;height:1px;background:var(--mg);}
.page-hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(40px,5vw,72px);letter-spacing:2px;line-height:1;margin-bottom:14px;}
.page-hero h1 em{font-family:'DM Serif Display',serif;font-style:italic;color:var(--mg);font-weight:400;letter-spacing:-1px;}
.page-hero .sub{font-size:.95rem;color:var(--gray-700);max-width:640px;margin:0 auto;line-height:1.65;}
.page-hero .updated{font-size:.72rem;color:var(--gray-500);margin-top:18px;letter-spacing:.5px;}

/* ══════════ CONTENIDO ══════════ */
.page-content{max-width:880px;margin:0 auto;padding:40px 36px 80px;}
.page-content h2{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:2px;margin:38px 0 14px;color:var(--ink);border-bottom:1px solid var(--gray-200);padding-bottom:10px;}
.page-content h2:first-child{margin-top:0;}
.page-content h3{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.05rem;margin:26px 0 10px;color:var(--ink);}
.page-content p{margin-bottom:14px;color:var(--gray-700);font-size:.92rem;line-height:1.75;}
.page-content ul, .page-content ol{padding-left:22px;margin-bottom:14px;color:var(--gray-700);font-size:.92rem;line-height:1.75;}
.page-content li{margin-bottom:6px;}
.page-content a:not(.btn-pri):not(.btn-wa):not(.cta-link):not(.blog-capture__cta){color:var(--mg);text-decoration:underline;text-underline-offset:3px;}
.page-content a:not(.btn-pri):not(.btn-wa):not(.cta-link):not(.blog-capture__cta):hover{color:var(--mg-dark);}
.page-content strong{color:var(--ink);font-weight:600;}
.page-content .callout{background:var(--mg-light);border-left:3px solid var(--mg);padding:14px 18px;border-radius:4px;margin:18px 0;font-size:.9rem;color:var(--ink);}
.page-content .callout strong{color:var(--mg-dark);}
.page-content .toc{background:var(--white);border:1px solid var(--gray-200);border-radius:8px;padding:20px 26px;margin-bottom:30px;}
.page-content .toc h4{font-family:'Bebas Neue',sans-serif;letter-spacing:2px;font-size:.85rem;margin-bottom:10px;color:var(--gray-500);font-weight:500;}
.page-content .toc ol{padding-left:18px;font-size:.85rem;line-height:1.9;margin:0;}
.page-content .toc a{text-decoration:none;color:var(--ink);}
.page-content .toc a:hover{color:var(--mg);}

/* ══════════ FOOTER compartido ══════════ */
.site-foot{background:var(--ink);color:rgba(255,255,255,.7);padding:64px 36px 28px;margin-top:60px;}
.site-foot-grid{max-width:1480px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:50px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.08);}
.site-foot-brand .lg{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:4px;color:#fff;margin-bottom:14px;width:max-content;}
.site-foot-brand .lg span{color:var(--mg);}
/* Sello delineado (mismo diseño que en la principal): contorno blanco que
   se rellena de tinta al pasar el cursor. Sin soporte de text-stroke
   queda el blanco sólido. */
@supports (-webkit-text-stroke: 1px #fff){
  .site-foot-brand .lg{color:rgba(255,255,255,.05);-webkit-text-stroke:1.1px rgba(255,255,255,.6);transition:color .5s ease;}
  .site-foot-brand .lg span{-webkit-text-stroke:0;}
  .site-foot-brand .lg:hover{color:rgba(255,255,255,.95);}
}
.site-foot-brand p{font-size:.82rem;line-height:1.7;color:rgba(255,255,255,.55);margin-bottom:18px;max-width:300px;}
.site-foot-brand .social{display:flex;gap:10px;}
.site-foot-brand .social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:rgba(255,255,255,.7);transition:all .2s;}
.site-foot-brand .social a svg{width:16px;height:16px;fill:currentColor;}
.site-foot-brand .social a:hover{background:var(--mg);border-color:var(--mg);color:#fff;}
.site-foot-col h4{font-family:'Bebas Neue',sans-serif;font-size:.9rem;letter-spacing:2.5px;margin-bottom:16px;color:#fff;font-weight:400;}
.site-foot-col a{display:block;font-size:.84rem;color:rgba(255,255,255,.55);text-decoration:none;margin-bottom:10px;transition:color .15s;}
.site-foot-col a:hover{color:var(--mg);}
.site-foot-bot{max-width:1480px;margin:0 auto;padding-top:22px;display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:rgba(255,255,255,.4);flex-wrap:wrap;gap:14px;}
.site-foot-bot .pays{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
/* Píldoras compactas: border ligero (no box-shadow oscuro). Altura 36px
   con background-size alto (~60-90%) — el logo casi llena el card, el
   marco blanco queda delgado y los logos se ven bien grandes. */
.site-foot-bot .pays .pl{height:36px;background-color:#fff;background-repeat:no-repeat;background-position:center;border-radius:5px;border:1px solid rgba(0,0,0,.10);box-shadow:none;}
/* ── Logos de métodos de pago ── */
.pl-visa{width:58px;background-size:auto 60%;background-image:url("logo-visa.svg");}
.pl-apple{width:58px;background-size:auto 56%;background-image:url("logo-applepay.svg");}
.pl-google{width:58px;background-size:auto 62%;background-image:url("logo-googlepay.svg");}
.pl-mc{width:52px;background-size:auto 88%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 30'%3E%3Ccircle cx='19' cy='15' r='11' fill='%23EB001B'/%3E%3Ccircle cx='29' cy='15' r='11' fill='%23F79E1B'/%3E%3Cpath d='M24 6.4a11 11 0 0 0 0 17.2 11 11 0 0 0 0-17.2z' fill='%23FF5F00'/%3E%3C/svg%3E");}
.pl-amex{width:44px;background-size:auto 90%;background-image:url("logo-amex.svg");}
.pl-mp{width:80px;background-size:auto 70%;background-image:url("logo-mercadopago.svg");}
.pl-transfer{width:80px;background-image:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
.pl-transfer::before{content:'';display:block;width:20px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34'%3E%3Cpath d='M22 2 L41 12 L3 12 Z' fill='%231A1F71'/%3E%3Crect x='7' y='14' width='4' height='13' fill='%231A1F71'/%3E%3Crect x='15' y='14' width='4' height='13' fill='%231A1F71'/%3E%3Crect x='25' y='14' width='4' height='13' fill='%231A1F71'/%3E%3Crect x='33' y='14' width='4' height='13' fill='%231A1F71'/%3E%3Crect x='3' y='29' width='38' height='4' fill='%231A1F71'/%3E%3C/svg%3E") no-repeat center;background-size:contain;}
.pl-transfer::after{content:'Transferencia';font-family:'Poppins',sans-serif;font-size:.52rem;font-weight:700;line-height:1;letter-spacing:.1px;color:#1A1F71;}

/* ══════════ Botones ══════════ */
.btn-pri{background:var(--mg);color:#fff;border:0;padding:15px 30px;border-radius:30px;font-size:.78rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;transition:all .25s;cursor:pointer;font-family:inherit;text-decoration:none;}
.btn-pri:hover{background:var(--mg-dark);transform:translateY(-1px);box-shadow:0 12px 30px rgba(196,24,133,.35);}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--ink);padding:14px 28px;border-radius:30px;font-size:.78rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;transition:all .25s;cursor:pointer;font-family:inherit;text-decoration:none;}
.btn-line:hover{background:var(--ink);color:#fff;}
.btn-wa{background:#25D366;color:#fff;border:0;padding:15px 28px;border-radius:30px;font-size:.78rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;transition:all .25s;cursor:pointer;font-family:inherit;text-decoration:none;}
.btn-wa:hover{background:#1ebe5b;transform:translateY(-1px);box-shadow:0 12px 30px rgba(37,211,102,.35);}
.btn-wa svg{width:18px;height:18px;fill:currentColor;}

/* ══════════ Responsive ══════════ */
/* Tablet / iPad: el footer de 4 columnas se aprieta — pásalo a 2 */
@media(max-width:1024px){
    .site-foot-grid{grid-template-columns:1fr 1fr;gap:34px 40px;}
    .site-nav-row{padding:0 24px;}
    .page-hero{padding:56px 24px 32px;}
    .page-content{padding:36px 24px 70px;}
}
@media(max-width:760px){
    .site-nav-row{padding:0 16px;height:64px;gap:10px;}
    .site-nav-logo{font-size:1.4rem;letter-spacing:3px;}
    .site-nav-back span.txt{display:none;}
    .site-nav-icons a{width:38px;height:38px;}
    .site-nav-icons a svg{width:18px;height:18px;}
    .page-hero{padding:40px 18px 24px;}
    .page-content{padding:24px 18px 60px;}
    .site-foot{padding:48px 22px 22px;}
    .site-foot-grid{grid-template-columns:1fr;gap:30px;}
    .site-foot-bot{flex-direction:column;align-items:flex-start;}
}

/* ════════════════════════════════════════════════════════════════
   BLOG — Componentes reutilizables
   Imágenes, CTA inline (email/WhatsApp capture), closing callout,
   micro-bio y shop-the-look. Cada artículo los consume con las mismas
   clases — modificar aquí afecta a todos los blogs.
   ════════════════════════════════════════════════════════════════ */

/* — Imágenes del cuerpo del artículo — */
.blog-img{display:block;margin:clamp(36px,4vw,56px) auto;border-radius:14px;width:100%;height:auto;}
.blog-img--cover    {max-width:680px;aspect-ratio:3/4;object-fit:cover;}
.blog-img--inline-h {max-width:100%; aspect-ratio:3/2;object-fit:cover;}
.blog-img--inline-v {max-width:540px;aspect-ratio:4/5;object-fit:cover;}

/* — Captura inline (WhatsApp opt-in en medio del artículo) — */
.blog-capture{margin:clamp(48px,5vw,72px) auto;max-width:640px;padding:32px clamp(24px,3vw,40px);background:var(--mg-light);border:1.5px solid var(--mg);border-radius:18px;text-align:center;}
.blog-capture__hook{font-size:1rem;line-height:1.5;color:var(--black);margin:0 0 20px;}
.blog-capture__hook strong{color:var(--mg-dark);font-weight:700;}
.blog-capture__cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--mg);color:var(--white);padding:14px 28px;border-radius:26px;font-weight:600;text-decoration:none;font-size:.92rem;transition:all .2s;line-height:1;}
.blog-capture__cta:hover{background:var(--mg-dark);transform:translateY(-1px);box-shadow:0 8px 24px rgba(196,24,133,.30);}
/* Variante WhatsApp: matchea exactamente al botón "ÚNETE POR WHATSAPP" del
   newsletter del home (.news-wa) — verde oficial #25D366, uppercase,
   tracking 1.5px, padding generoso e ícono grande. Es el botón estándar
   de "unirse al grupo" en todo el sitio. */
.blog-capture__cta--wa{background:#25D366;color:#fff;padding:18px 38px;border-radius:36px;font-size:.84rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;gap:12px;font-family:inherit;}
.blog-capture__cta--wa:hover{background:#1DA851;transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,211,102,.35);}
.blog-capture__cta--wa svg{width:22px;height:22px;fill:#fff;flex-shrink:0;}
.blog-capture__cta svg{flex-shrink:0;}

/* — Closing callout (reemplaza el párrafo de resumen final) — */
/* Top reducido + bottom 0: el siguiente bloque (blog-bio) ya aporta margin. */
.blog-closing{margin:clamp(24px,3vw,40px) auto 0;max-width:720px;text-align:center;padding:0 20px;}
.blog-closing__line{font-family:'DM Serif Display','Times New Roman',Georgia,serif;font-style:italic;font-size:clamp(22px,2.6vw,32px);line-height:1.3;color:var(--black);margin:0 0 24px;letter-spacing:-.5px;}
/* Los botones "Ver catálogo" del cierre usan la clase .btn-pri del hero
   ("VER CATÁLOGO →") directamente — mismo color, tipografía y tamaño. */

/* Anula el padding-bottom de 80px del .page-content en los artículos del blog.
   Sin esto se acumula: closing(0) + padding-bottom(80px) + bio margin(44px)
   + related padding-top(32px) = ~156px de aire muerto bajo el "Ver catálogo".
   Se usa una clase (no :has()) para que funcione en todos los navegadores. */
.page-content--article{padding-bottom:0;}

/* — Micro-bio antes de "Sigue leyendo" — */
.blog-bio{margin:clamp(20px,2.5vw,32px) auto;max-width:600px;padding:18px clamp(20px,2.5vw,32px);border-top:1.5px solid var(--gray-200);border-bottom:1.5px solid var(--gray-200);text-align:center;}
.blog-bio p{font-size:.86rem;line-height:1.6;color:var(--gray-700);margin:0;font-style:italic;}

/* — Shop-the-look grid (solo Capsule Wardrobe). Diseño editorial sin emojis:
   numeración 01-12 que espejea la lista de "Las 12 piezas" + flecha en la
   esquina opuesta. La card es alta (~130px) para dar espacio al número y
   al label sin sentirse apretado. En mobile colapsa a 2 columnas. */
.blog-shop{margin:clamp(48px,5vw,72px) auto;max-width:920px;padding:0 clamp(16px,2vw,24px);}
.blog-shop__title{font-family:'Bebas Neue',sans-serif;font-size:clamp(24px,2.6vw,32px);letter-spacing:2.5px;text-align:center;margin:0 0 8px;color:var(--black);font-weight:400;}
.blog-shop__intro{font-family:'Poppins',system-ui,sans-serif;font-size:.86rem;color:var(--gray-700);text-align:center;max-width:480px;margin:0 auto clamp(28px,3vw,40px);line-height:1.55;}
.blog-shop__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.blog-shop__card{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:130px;padding:20px 22px;background:var(--white);border:1.5px solid var(--gray-200);border-radius:14px;text-decoration:none;color:var(--black);transition:all .2s cubic-bezier(.4,0,.2,1);overflow:hidden;}
.blog-shop__card::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,rgba(196,24,133,0.04) 100%);pointer-events:none;opacity:0;transition:opacity .25s;}
.blog-shop__card:hover{border-color:var(--mg);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.08);}
.blog-shop__card:hover::after{opacity:1;}
.blog-shop__num{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:2px;color:var(--mg);line-height:1;margin-bottom:10px;font-weight:400;}
.blog-shop__label{font-family:'Poppins',system-ui,sans-serif;font-size:.94rem;font-weight:500;line-height:1.3;color:var(--black);flex:1;display:flex;align-items:flex-start;}
.blog-shop__arrow{font-family:'Poppins',system-ui,sans-serif;align-self:flex-end;font-size:1rem;color:var(--gray-500);margin-top:6px;transition:all .25s;}
.blog-shop__card:hover .blog-shop__arrow{color:var(--mg);transform:translateX(3px);}
@media (max-width:640px){
    .blog-shop__grid{grid-template-columns:1fr 1fr;gap:10px;}
    .blog-shop__card{min-height:110px;padding:16px 18px;}
    .blog-shop__num{font-size:1.2rem;}
    .blog-shop__label{font-size:.86rem;}
}

/* — Sub-headers para dividir listas largas (usado en Capsule) — */
.capsule-subhead{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:2.5px;color:var(--mg-dark);margin:clamp(36px,4vw,56px) 0 16px;padding-bottom:8px;border-bottom:1.5px solid var(--gray-200);font-weight:400;text-transform:uppercase;}

/* El CTA contextual inline también usa la clase .btn-pri del hero. */
.cta-wrap{text-align:center;margin:clamp(28px,3vw,40px) 0;}

/* ════════════════════════════════════════════════════════════════
   PREMIUM — CAPA BOUTIQUE COMPARTIDA
   Eleva todas las subpáginas (blog, legales, nosotros, contacto…) y
   el checkout al mismo lenguaje de la página principal. Solo CSS:
   estas páginas no dependen de ningún JS para verse perfectas, y
   todo movimiento respeta prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════ */
:root{--ease-luxe:cubic-bezier(.22,.61,.36,1);}

/* Selección de texto y scrollbar de marca */
::selection{background:var(--mg);color:#fff;}
html{scrollbar-width:thin;scrollbar-color:var(--gray-300) transparent;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:var(--mg);}
::-webkit-scrollbar-track{background:transparent;}

/* Foco visible elegante para navegación con teclado */
:focus-visible{outline:2px solid var(--mg);outline-offset:3px;border-radius:3px;}

/* Los saltos de ancla (índices de los legales) no quedan bajo la nav */
.page-content h2,.page-content h3{scroll-margin-top:90px;}

/* Grano de película (firma de la principal) — vía pseudo-elemento, sin
   JS. Capa fija con z-index y pointer-events explícitos: jamás tapa ni
   roba clicks. Oculto en móvil por rendimiento. */
@media (min-width:761px){
  body::after{content:'';position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:2000;opacity:.04;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");}
}
@media print{body::after{display:none !important;}}

/* Entrada editorial: la página funde y el hero sube en oleadas.
   fill backwards: al terminar, cada animación suelta sus valores y
   los :hover existentes vuelven a mandar. */
@media (prefers-reduced-motion: no-preference){
  body{animation:lxPageIn .5s ease backwards;}
  .page-hero .ey{animation:lxRise .7s var(--ease-luxe) .05s backwards;}
  .page-hero h1{animation:lxRise .8s var(--ease-luxe) .14s backwards;}
  .page-hero .sub,.page-hero .updated{animation:lxRise .8s var(--ease-luxe) .26s backwards;}
  .page-hero h1 em{position:relative;}
  .page-hero h1 em::after{content:'';position:absolute;left:1%;right:2%;bottom:.03em;height:.08em;background:var(--mg);opacity:.22;transform:scaleX(0);transform-origin:left center;animation:lxDraw .9s var(--ease-luxe) .6s forwards;}
}
@keyframes lxPageIn{from{opacity:0;}to{opacity:1;}}
@keyframes lxRise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes lxDraw{to{transform:scaleX(1);}}

/* Links del contenido: subrayado fino que respira */
.page-content a{text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s;}
.page-content a:hover{color:var(--mg);}

/* Callouts y portadas con presencia */
.page-content .callout{box-shadow:0 8px 28px rgba(26,20,22,.05);}
.blog-img{transition:transform .5s var(--ease-luxe),box-shadow .5s ease;}

/* Botones e interacciones — SOLO escritorio con mouse (en táctil un
   tap dejaría el estado pegado) */
.btn-pri,.btn-line,.btn-wa{transition:transform .3s var(--ease-luxe),background .25s,color .25s,border-color .25s,box-shadow .3s;}
@media (hover:hover) and (pointer:fine){
  .btn-pri:hover,.btn-wa:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(26,20,22,.16);}
  .btn-line:hover{transform:translateY(-2px);}
  .site-foot-col a{transition:color .2s,transform .25s var(--ease-luxe);}
  .site-foot-col a:hover{transform:translateX(3px);}
  .blog-img:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(26,20,22,.14);}
  .site-nav-back{transition:color .2s,transform .25s var(--ease-luxe);}
  .site-nav-back:hover{transform:translateX(-3px);}
}

@media (prefers-reduced-motion: reduce){
  body,.page-hero .ey,.page-hero h1,.page-hero .sub,.page-hero .updated{animation:none !important;}
  .page-hero h1 em::after{display:none;}
  body::after{display:none !important;}
}

/* ════════════════════════════════════════════════════════════════
   COMPONENTES PREMIUM COMPARTIDOS (los crea/activa assets/site.js)
   Mismo hilo que la principal: barra de progreso, volver-arriba con
   anillo, nav elevada, cascada de aparición, rollover, magnéticos,
   wordmark monumental y fundido entre páginas.
   ════════════════════════════════════════════════════════════════ */

/* Barra de progreso de lectura */
#scrollProgress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--mg),var(--mg-dark));z-index:1200;pointer-events:none;transition:width .08s linear;}

/* Volver arriba: glass + anillo de progreso (--p lo actualiza site.js) */
#backTop{position:fixed;left:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:rgba(253,251,252,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--gray-200);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:860;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .35s var(--ease-luxe),transform .35s var(--ease-luxe),border-color .2s,color .2s;box-shadow:0 10px 30px rgba(26,20,22,.12);}
#backTop.show{opacity:1;transform:none;pointer-events:auto;}
#backTop:hover{border-color:var(--mg);color:var(--mg);}
#backTop::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--mg) calc(var(--p,0)*1%),rgba(26,20,22,.1) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 2.5px));pointer-events:none;}
@media (max-width:560px){#backTop{left:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:42px;height:42px;}}

/* Nav que gana presencia al hacer scroll */
.site-nav{transition:box-shadow .35s ease;}
.site-nav.is-elevated{box-shadow:0 6px 24px rgba(26,20,22,.08);}

/* Cascada de aparición (la clase .reveal SOLO la añade site.js:
   sin JS o con "reducir movimiento" nada se oculta jamás) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-luxe),transform .7s var(--ease-luxe);}
.reveal.in{opacity:1;transform:none;}

/* Rollover tipográfico de los links del footer */
.lx-roll{display:inline-block;position:relative;overflow:hidden;vertical-align:top;}
.lx-roll > span{display:block;transition:transform .45s var(--ease-luxe);}
.lx-roll > span:last-child{position:absolute;left:0;top:100%;width:100%;color:var(--mg);}
@media (hover:hover) and (pointer:fine){
  .site-foot-col a:hover .lx-roll > span{transform:translateY(-100%);}
}

/* CTAs magnéticos (--mx/--my los pone site.js) */
@media (hover:hover) and (pointer:fine){
  .lx-mag,.lx-mag:hover{transform:translate(var(--mx,0px),var(--my,0px));transition:transform .35s var(--ease-luxe);}
  .lx-mag:active{transform:translate(var(--mx,0px),var(--my,0px)) scale(.96);}
}

/* Hora local de la boutique (sello de maison, como la principal) */
.sfoot-meta{text-align:center;font-size:.62rem;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.42);padding:8px 16px 20px;}
.sfoot-meta .dot{color:var(--mg);padding:0 6px;}
@media (max-width:560px){.sfoot-meta{letter-spacing:2px;font-size:.56rem;}}

/* Fundido al salir hacia otra página interna */
html.lx-leave body{opacity:0;pointer-events:none;transition:opacity .22s ease;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  .lx-roll > span{transition:none !important;}
  #backTop,#scrollProgress{transition:none !important;}
}