/* Easy Nailz: editorial motion. This file intentionally follows responsive.css. */
:root { --ease-premium:cubic-bezier(.22,1,.36,1); --motion-reveal:700ms; --motion-photo:750ms; }
body img, body picture, body figure, body section, body article,
body .product-card, body .collection-card, body .product-controls > div,
body .site-nav, body .cart-panel, body .mobile-menu, body .button,
body .product-info > button, body input, body select { border-radius:0 !important; }
body .site-nav { width:100% !important; height:auto !important; min-height:64px; max-height:none !important; margin:0 !important; background:var(--paper) !important; box-shadow:none; backdrop-filter:none; }
/* Crop only transparent canvas margins through the layout; original logos untouched. */
body .nav-brand { width:174px !important; height:auto !important; aspect-ratio:1566/211; margin:0 !important; flex:0 0 174px; position:relative; overflow:hidden; }
body .nav-brand img { position:absolute; width:127.7139% !important; max-width:none !important; height:auto !important; max-height:none !important; left:-14.2401%; top:-381.5166%; object-fit:contain !important; margin:0 !important; }
body .nav-links { width:auto !important; height:auto !important; flex:1; justify-content:flex-end; }
body .nav-links button { min-height:44px; }
body .hero-image { width:100% !important; height:auto !important; max-height:none !important; margin:0 !important; object-fit:contain !important; transform:none !important; animation:heroFadeIn 700ms ease both !important; }
/* The hero includes typesetting: never zoom or crop its baked-in message. */
body .hero-media { height:auto !important; overflow:hidden; }
body .hero-overlay-actions { gap:12px !important; }
body .photo-heading em { display:block; font-size:clamp(19px,2.8vw,30px) !important; line-height:1.3; }
body .benefit-strip { width:100%; padding:24px clamp(18px,4vw,56px); }
body .benefit-strip-track { width:100% !important; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; animation:none !important; transform:none !important; white-space:normal !important; }
body .benefit-strip-track > span[aria-hidden] { display:none; }
body .benefit-strip-track > span { font-size:clamp(13px,1.3vw,17px); text-align:center; line-height:1.5; }
body .tagline-strip { flex-wrap:wrap; }
body .product-media, body .collection-media { aspect-ratio:4/5 !important; height:auto !important; }
body .product-media img, body .collection-media img { width:100% !important; height:100% !important; object-fit:contain !important; padding:12px; transition:transform var(--motion-photo) var(--ease-premium) !important; }
body .product-card, body .collection-card { box-shadow:none !important; min-width:0; }
body .product-controls button { min-width:44px !important; min-height:44px !important; }
body .product-info > button:last-child { min-height:44px !important; background:var(--ink) !important; color:var(--paper) !important; font-size:12px !important; }
body .detail-page > section, body .detail-page section { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body .detail-image { aspect-ratio:4/5; object-fit:contain; box-shadow:none !important; background:var(--paper); }
body .button, body .carousel-arrow { transition:transform 125ms ease,background-color 240ms ease,color 240ms ease !important; }
body .button:hover, body .carousel-arrow:hover, body .footer-brand:hover, body .footer-column a:hover, body .footer-column button:hover { transform:none; }
body button:active:not(.product-media):not(.collection-card):not(.footer-brand), body a.button:active { transform:scale(.98) !important; }
body .button-primary { background:var(--ink) !important; color:var(--paper) !important; border:1px solid var(--ink) !important; }
body .button-secondary { background:transparent !important; color:var(--ink) !important; border:1px solid var(--ink) !important; }
body .detail-tutorial-link { display:block; margin-top:24px; padding:12px 0; border:0; background:none; color:var(--ink); text-decoration:underline; text-underline-offset:5px; cursor:pointer; }
body .carousel-nav { position:static; min-height:44px; margin-top:24px; padding-bottom:4px; }
body .carousel-arrow { flex:0 0 44px; }
body .story-grid { overscroll-behavior-x:contain; }
body .story-card { height:auto !important; min-height:0 !important; flex-shrink:0; }
body .story-card p { line-height:1.65; }
body .footer-inner { width:min(100%,var(--content-max)) !important; height:auto !important; min-height:0; }
body .footer-brand { width:min(100%,520px); aspect-ratio:630/176; position:relative; overflow:hidden; }
body .footer-logo { position:absolute; width:216.8254% !important; max-width:none !important; height:auto !important; max-height:none; left:-58.254%; top:-164.7727%; object-fit:contain !important; }
body .detail-reference-nav { display:flex; justify-content:space-between; gap:16px; margin:24px 0; }
body .detail-reference-nav button { min-height:44px; padding:8px 0; border:0; border-bottom:1px solid var(--ink); background:none; color:var(--ink); cursor:pointer; font-size:13px; }
body .footer-column a { overflow-wrap:anywhere; }
body .footer-bottom { margin-top:32px; }
body .site-footer { padding-bottom:max(28px,env(safe-area-inset-bottom)) !important; }
body .mobile-menu { top:64px !important; background:var(--paper); backdrop-filter:none; -webkit-backdrop-filter:none; max-height:calc(100dvh - 80px); overflow-y:auto; }
body .mobile-menu, body .cart-panel { animation:en-menu 350ms var(--ease-premium) both; }
@keyframes en-menu { from { opacity:0; translate:0 -12px; } to { opacity:1; translate:0 0; } }
@keyframes en-page { from { opacity:0; translate:0 8px; } to { opacity:1; translate:0 0; } }
body .page-view:not(.home-page) { animation:en-page 400ms var(--ease-premium) both; }
/* Progressive enhancement: content is visible when JS or observers are unavailable. */
body .reveal-target { transition:opacity var(--motion-reveal) ease,transform var(--motion-reveal) var(--ease-premium) !important; transition-delay:var(--reveal-delay,0ms) !important; }
body .reveal-target.pre-reveal, body .story-card.reveal-target.pre-reveal { opacity:0; transform:translateY(22px); }
body .reveal-target.is-visible { opacity:1; transform:none; }
body .reveal-target:focus-within { opacity:1 !important; transform:none !important; }
body .faq-section { width:min(100%,1120px); padding:64px 24px; margin-inline:auto; }
body .faq-section h2 { font:500 clamp(28px,4vw,42px)/1.2 'Satoshi',sans-serif; margin:0 0 28px; }
body .faq-section details { border-top:1px solid var(--ink); padding:20px 0; }
body .faq-section details:last-of-type { border-bottom:1px solid var(--ink); }
body .faq-section summary { cursor:pointer; min-height:44px; font-weight:500; line-height:1.5; }
body .faq-section p { max-width:65ch; font-size:15px; line-height:1.7; }
body .checkout-status { padding:16px; border:1px solid var(--olive); font-size:14px; line-height:1.6; }
body button:disabled { opacity:.55; cursor:not-allowed; }
body :is(a,button,input,select,summary):focus-visible { outline:2px solid var(--ink) !important; outline-offset:4px; }

/* Final interaction pass: clean, linear surfaces with only the purchase action rounded. */
#dc-root > div { overflow-x:clip !important; overflow-y:visible !important; }
body .nav-brand { overflow:visible; }
body .nav-brand img { position:static; width:100% !important; height:auto !important; max-width:174px !important; max-height:none !important; margin:0 !important; object-fit:contain !important; }
body .cart-panel { padding:20px !important; border:0 !important; box-shadow:0 18px 42px rgba(35,31,32,.18) !important; }
body .cart-shipping-field { display:grid; gap:7px; margin-top:16px; font:500 12px/1.4 'Satoshi',sans-serif; }
body .cart-shipping-field select { width:100%; min-height:44px; padding:9px 10px; border:1px solid rgba(35,31,32,.34); background:var(--paper); color:var(--ink); }
body .cart-totals { display:flex; justify-content:space-between; gap:16px; margin-top:10px; font-size:13px; }
body .cart-totals:first-of-type { border-top:1px solid rgba(35,31,32,.24); margin-top:16px; padding-top:13px; }
body .cart-total { padding-top:11px; border-top:1px solid var(--ink); font-size:15px; font-weight:700; }
body .product-card, body .collection-card { border:0 !important; background:transparent !important; }
body .product-info, body .collection-card > div:last-child { background:transparent !important; }
body .product-info > button:last-child { border-radius:999px !important; padding:11px 16px !important; min-height:42px !important; letter-spacing:.08em !important; }
body .product-controls > div { border-color:rgba(35,31,32,.38) !important; }
body .section-heading-with-action { width:min(100%,1200px); display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 auto 40px; }
body .section-heading-with-action h2 { margin:8px 0 0; color:var(--olive); font:500 clamp(28px,4vw,44px)/1.12 'Satoshi',sans-serif; }
body .section-heading-with-action p { max-width:47ch; margin:10px 0 0; color:#5f6368; font-size:15px; line-height:1.6; }
body .collection-section .section-heading-with-action h2 { color:var(--paper); }
body .section-kicker { color:var(--olive); font:500 14px/1.2 'Satoshi',sans-serif; letter-spacing:.06em; text-transform:uppercase; }
body .section-text-link { flex:0 0 auto; min-height:44px; padding:10px 0; border:0; border-bottom:1px solid currentColor; background:transparent; color:var(--ink); font:500 12px/1.2 'Satoshi',sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
body .collection-section .section-text-link { color:var(--paper); }
body .complements-home-section { border-top:1px solid rgba(35,31,32,.18); background:var(--cream); }
body .complements-home-grid { width:min(100%,1200px); margin:0 auto; }
body .steps-heading { align-items:flex-start; }
body .story-grid { overflow-y:hidden !important; overscroll-behavior-x:contain; overscroll-behavior-y:auto; scrollbar-width:none; }
body .story-grid::-webkit-scrollbar { display:none; }
body .story-card { overflow:hidden; border:0 !important; background:#e9e2d7; }
body .carousel-nav { gap:10px; }
body .carousel-arrow { border:0 !important; background:var(--olive) !important; color:var(--paper) !important; }
body .footer-columns { padding-top:20px; gap:clamp(28px,7vw,76px); }
body .footer-column { gap:4px; }
body .footer-heading { margin-bottom:1px; }
body .footer-bottom { margin-top:24px; }
@media (hover:hover) and (pointer:fine) {
  body .product-card:hover .product-media img, body .collection-card:hover .collection-media img { transform:scale(1.035); }
}
@media (hover:none) {
  body .product-card:hover img, body .collection-card:hover img { transform:none !important; }
}
@media (max-width:860px) {
  body .nav-links { display:none; }
  body .nav-burger { display:grid; flex:0 0 44px; }
  body .nav-brand { flex:0 0 150px; width:150px !important; margin-right:auto !important; }
  body .site-nav { gap:12px; }
}
@media (max-width:700px) {
  body .site-nav { padding:8px 16px; }
  body .hero-overlay-actions { position:static !important; padding:16px; margin:0 !important; display:grid !important; grid-template-columns:1fr 1fr; }
  body .benefit-strip-track { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; }
  body .photo-section, body .content-section { padding:44px 16px !important; }
  body .detail-page section { grid-template-columns:minmax(0,1fr) !important; gap:28px !important; }
  body .footer-columns { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  body .footer-column a, body .footer-column button { font-size:13px; min-height:32px; }
  body .product-media img, body .collection-media img { padding:7px; }
  body .section-heading-with-action { align-items:flex-start; gap:16px; margin-bottom:28px; }
  body .section-text-link { max-width:124px; text-align:right; font-size:10px; line-height:1.4; }
  body .story-grid { margin-inline:-2px !important; padding:0 2px 0 0 !important; }
  body .story-card { width:min(80vw,306px); }
  body .cart-panel { top:64px !important; right:0 !important; width:100% !important; max-width:none; max-height:calc(100dvh - 64px); }
}
@media (max-width:360px) {
  body .hero-overlay-actions, body .detail-actions { grid-template-columns:1fr; }
  body .footer-columns { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto !important; }
  body *, body *::before, body *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  body .reveal-target { opacity:1 !important; transform:none !important; }
  body button:active, body a.button:active, body .product-card:hover img, body .collection-card:hover img { transform:none !important; }
}

/* ===== Ajustes 26-sep (scroll en celular, fotos, complementos) ===== */

/* Scroll: un solo contenedor de scroll (la ventana). `clip` corta lo que sobresale
   sin convertir html/body/contenedor en cajas de scroll internas, que en iPhone y en
   los navegadores de Instagram/WhatsApp atrapan el dedo. */
html, body { height:auto !important; min-height:100%; }
#dc-root, #dc-root > .sc-host { height:auto !important; }
html { overflow-x:clip !important; overflow-y:visible !important; }
body { overflow-x:clip !important; overflow-y:visible !important; }
#dc-root > .sc-host > div, #dc-root > div { overflow-x:clip !important; overflow-y:visible !important; }

/* Sin efectos en fotos ni apariciones al hacer scroll: el contenido siempre visible. */
body .reveal-target, body .reveal-target.pre-reveal, body .story-card.reveal-target.pre-reveal {
  opacity:1 !important; transform:none !important; transition:none !important;
}
body .hero-image { animation:none !important; opacity:1 !important; }
body .product-media img, body .collection-media img, body .detail-image {
  transition:none !important; transform:none !important;
}
body .product-card:hover img, body .collection-card:hover img { transform:none !important; }

/* Fotos: las de producto son cuadradas y las de colección 4:5. El marco usa la misma
   proporción y la foto lo llena, sin franjas de otro color alrededor. */
body .product-media { aspect-ratio:1/1 !important; background:transparent !important; }
body .product-media img { object-fit:cover !important; padding:0 !important; }
body .collection-media { aspect-ratio:4/5 !important; background:transparent !important; }
body .collection-media img { object-fit:cover !important; padding:0 !important; }
body .detail-image { aspect-ratio:1/1 !important; object-fit:cover !important; background:transparent !important; }

/* Tarjetas: el botón "Agregar" siempre a la misma altura aunque el texto varíe. */
body .product-card { height:100%; }
body .product-info { flex:1 1 auto !important; }
body .product-info > button:last-child { margin-top:auto !important; }

/* Complementos: 3 productos en 3 columnas que ocupan el mismo ancho que su título
   (antes 4 columnas con un hueco a la derecha). */
body .complements-home-grid, body .catalog-complements-grid, body .complements-page .product-grid {
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  width:min(100%, var(--content-max)) !important; max-width:var(--content-max) !important; margin-inline:auto !important;
}
@media (max-width: 640px) {
  /* En celular: 2 columnas y el tercero centrado, no suelto a la izquierda. */
  body .complements-home-grid, body .catalog-complements-grid, body .complements-page .product-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  body .complements-home-grid > :last-child:nth-child(odd),
  body .catalog-complements-grid > :last-child:nth-child(odd),
  body .complements-page .product-grid > :last-child:nth-child(odd) {
    grid-column:1 / -1; justify-self:center; width:calc(50% - 8px);
  }
}

/* Títulos de sección con el mismo ancho que su contenido (antes 1200px vs 1120px). */
body .section-heading-with-action { width:min(100%, var(--content-max)) !important; }

/* Colecciones: la descripción y "Ver colección" eran casi invisibles sobre el verde.
   El texto va sobre una franja clara, igual que en las tarjetas de producto. */
body .collection-card > div:last-child { background:var(--paper) !important; padding:14px 14px 16px !important; }
body .collection-card > div:last-child > div:nth-child(1) { color:#231f20 !important; }
body .collection-card > div:last-child > div:nth-child(2) { color:#4a4d52 !important; font-size:13px !important; line-height:1.45; }
body .collection-card > div:last-child > div:nth-child(3) { color:var(--olive) !important; font-weight:500 !important; }
body .collection-section .section-heading-with-action span,
body #que-es .section-heading-light > span { color:var(--paper) !important; }

/* Flechas del carrusel "Qué es": eran verdes sobre fondo verde. */
body #que-es .carousel-arrow { background:var(--paper) !important; color:var(--olive) !important; }

@media (max-width: 640px) {
  /* Encabezados: el enlace ("Ver complementos →") va debajo del título, sin partirse. */
  body .section-heading-with-action { flex-direction:column; align-items:flex-start !important; }
  body .section-text-link { white-space:nowrap; }
  /* Footer: columnas una debajo de otra; el correo y el WhatsApp no se parten. */
  body .footer-columns { grid-template-columns:1fr !important; display:grid !important; gap:28px !important; }
  body .footer-column a { overflow-wrap:normal !important; word-break:normal !important; }
}

/* Cada tarjeta viene dentro de un contenedor del runtime (.sc-host); se estira a la
   altura de la fila para que "Agregar" quede alineado en todas. */
body .product-grid > .sc-host { display:flex !important; }
body .product-grid > .sc-host > .product-card { flex:1 1 auto; height:auto !important; }

/* ===== Ajustes 27-sep ===== */
/* Sin scroll suave global: al cambiar de vista (p. ej. abrir una colección) la página
   salta arriba al instante; en iPhone el scroll suave terminaba en el footer. */
html { scroll-behavior:auto !important; }

/* Tarjetas con marco y fondo fijos (antes solo aparecían al pasar el mouse, y en el
   celular no hay "pasar el mouse"). Sin cambio al hover. */
body .product-card, body .product-card:hover,
body .collection-card, body .collection-card:hover {
  background:#F7F4ED !important; border:1px solid #D9CFBF !important; box-shadow:none !important;
}
body .product-info, body .collection-card > div:last-child { background:transparent !important; }

/* Colecciones: todas las tarjetas de una fila con la misma altura. */
body .collection-grid { align-items:stretch !important; }
body .collection-grid > * { display:flex !important; }
body .collection-grid .collection-card { flex:1 1 auto; height:auto !important; }
body .collection-card > div:last-child { flex:1 1 auto; }

/* Referencias y complementos: descripción con alto fijo para que precio, cantidad y
   botón queden en la misma línea en todas las tarjetas. */
body .product-info p { min-height:calc(1.4em * 2); }
body .product-controls { justify-content:center !important; }
@media (max-width: 640px) { body .product-info p { min-height:calc(1.4em * 3); } }

/* Las fotos de complementos traen una línea blanca en el borde derecho; se recorta. */
body .complements-home-grid .product-media img,
body .catalog-complements-grid .product-media img,
body .complements-page .product-grid .product-media img { transform:scale(1.03) !important; }

/* Foto de cierre de la primera pantalla: solo en celular. El alto lo fija
   premium-motion.js para que termine justo en el borde inferior de la pantalla.
   El fondo es el mismo beige de la foto, así el espacio sobrante no se nota. */
body .mobile-banner { display:none; }
@media (max-width: 767px) {
  body .mobile-banner { display:flex; align-items:flex-end; justify-content:center; background:#DFD7CA; overflow:hidden; min-height:110px; height:var(--mobile-banner-h, auto); }
  body .mobile-banner img { display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
}

/* WhatsApp escondido en la primera pantalla del celular (ver premium-motion.js). */
body .wa-float { transition:opacity 200ms cubic-bezier(0.23,1,0.32,1), transform 200ms cubic-bezier(0.23,1,0.32,1) !important; }
html.wa-hidden body .wa-float { opacity:0 !important; transform:scale(0.95) !important; pointer-events:none !important; }
@media (prefers-reduced-motion: reduce) { body .wa-float { transition:opacity 150ms ease !important; } html.wa-hidden body .wa-float { transform:none !important; } }

/* Video "Cómo ponerlas" (vertical 9:16). */
body .tutorial-video { display:block; width:100%; max-width:420px; aspect-ratio:9/16; height:auto; max-height:80vh; margin:0 auto; background:#231f20; object-fit:contain; }

/* Aviso de cookies (analytics.js) */
#cookie-bar { position:fixed; left:16px; right:16px; bottom:16px; z-index:2000; max-width:560px; margin:0 auto; padding:16px 18px; background:#F7F4ED; color:#231f20; border:1px solid #D9CFBF; box-shadow:0 12px 32px rgba(35,31,32,.18); font:400 14px/1.5 'Montserrat',sans-serif; }
#cookie-bar p { margin:0 0 12px; }
#cookie-bar div { display:flex; gap:10px; justify-content:flex-end; }
#cookie-bar button { min-height:44px; padding:10px 18px; border-radius:999px; border:1px solid #231f20; background:transparent; color:#231f20; font:500 13px 'Satoshi',sans-serif; cursor:pointer; transition:transform 125ms ease; }
#cookie-bar button[data-v="granted"] { background:#231f20; color:#F7F4ED; }
#cookie-bar button:active { transform:scale(0.97); }

/* Solo para lectores de pantalla y buscadores (p. ej. el H1 del inicio, que en pantalla va dentro de la foto). */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Botón Compartir del detalle de producto */
body .detail-share-button { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:8px; padding:10px 18px; border:1px solid #231f20; border-radius:999px; background:transparent; color:#231f20; font:500 13px 'Satoshi',sans-serif; cursor:pointer; transition:transform 125ms ease; }
body .detail-share-button:active { transform:scale(0.97); }

/* Contenido estático para buscadores e IAs; se oculta en cuanto carga la tienda. */
#seo-static { max-width:880px; margin:0 auto; padding:96px 20px 40px; font:400 16px/1.6 'Montserrat',sans-serif; color:#231f20; }
#seo-static img { max-width:100%; height:auto; }

/* Kit de Bienvenida: sección en el inicio y selector de color (tarjeta y detalle). */
body .kits-section { background:var(--cream, #DFD7C9); }
body .pcarousel.product-grid.kits-grid, body .pcarousel.product-grid.catalog-kits-grid { display:grid !important; grid-template-columns:minmax(0, 340px) !important; justify-content:center !important; width:100% !important; margin-inline:auto !important; }
body .pcarousel.product-grid.catalog-kits-grid { justify-content:start !important; }
body .product-option, body .kit-color-field { display:grid; gap:6px; margin:8px 0 4px; font:500 12px/1.3 'Satoshi',sans-serif; color:#231f20; text-align:left; }
body .product-option select, body .kit-color-field select { width:100%; min-height:44px; padding:9px 10px; border:1px solid rgba(35,31,32,.34); background:#F7F4ED; color:#231f20; font:400 14px 'Montserrat',sans-serif; }
body .kit-color-field { max-width:320px; margin:0 0 20px; font-size:13px; }
@media (max-width: 640px) { body .pcarousel.product-grid.kits-grid, body .pcarousel.product-grid.catalog-kits-grid { display:grid !important; grid-template-columns:minmax(0, 300px) !important; justify-content:center !important; } }

/* Detalle de sticker: "Qué incluye cada set" */
body .set-includes { margin:36px 0 8px; padding-top:28px; border-top:1px solid rgba(35,31,32,.18); }
body .set-includes h2 { margin:0 0 16px; font:500 clamp(20px,2.4vw,24px)/1.25 'Satoshi',sans-serif; color:#231f20; }
body .set-includes img { display:block; width:100%; max-width:360px; height:auto; aspect-ratio:1/1; object-fit:cover; margin:0 0 16px; border:1px solid #D9CFBF; }
body .set-includes ul { margin:0; padding-left:20px; font-size:14px; line-height:1.7; color:#4a4d52; }
body .set-includes li { margin:0 0 6px; }

/* Distintivo "KIT DE BIENVENIDA · 15%" (tarjeta y detalle del kit). */
body .kit-badge { position:absolute; top:12px; left:12px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 14px 11px; background:#231f20; color:#F7F4ED; box-shadow:0 6px 18px rgba(35,31,32,.25); text-align:left; pointer-events:none; }
body .kit-badge-title { font:500 11px/1.2 'Satoshi',sans-serif; letter-spacing:.14em; text-transform:uppercase; }
body .kit-badge-pct { font:700 34px/1 'Satoshi',sans-serif; color:#F6B394; }
body .kit-badge-pct small { font:500 12px/1 'Satoshi',sans-serif; color:#F7F4ED; letter-spacing:.02em; }
body .kit-badge-detail { position:static; display:inline-flex; margin:0 0 16px; box-shadow:none; }
body .kit-badge-detail .kit-badge-title { font-size:13px; }
body .kit-badge-detail .kit-badge-pct { font-size:44px; }
body .kit-compare { margin:-12px 0 20px; font-size:14px; color:#4a4d52; }
@media (max-width: 640px) { body .kit-badge-pct { font-size:28px; } body .kit-badge-detail .kit-badge-pct { font-size:38px; } }

/* El distintivo de la tarjeta va como franja arriba de la foto (no la tapa). */
body .kit-badge-strip { position:static; flex-direction:row; align-items:baseline; justify-content:space-between; gap:10px; width:100%; padding:12px 16px; box-shadow:none; }
body .kit-badge-strip .kit-badge-pct { font-size:30px; }
body .kit-badge-strip { flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; }
body .kit-badge-strip .kit-badge-title { font-size:12px; white-space:nowrap; }
body .kit-badge-strip .kit-badge-pct { white-space:nowrap; }

/* Sugerencias antes del pago: "Completa tu kit con los infaltables" */
body .upsell { margin:16px 0 4px; padding:14px 0 4px; border-top:1px solid rgba(35,31,32,.15); }
body .upsell-title { margin:0 0 10px; font:500 14px/1.35 'Satoshi',sans-serif; color:#231f20; }
body .upsell-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
body .upsell-card { display:flex; flex-direction:column; gap:4px; padding:6px; background:#F7F4ED; border:1px solid #D9CFBF; text-align:center; min-width:0; }
body .upsell-media { display:block; padding:0; border:0; background:transparent; cursor:pointer; }
body .upsell-media img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; }
body .upsell-name { font:500 11.5px/1.25 'Satoshi',sans-serif; color:#231f20; min-height:2.5em; display:flex; align-items:center; justify-content:center; }
body .upsell-price { font:400 12px/1.2 'Montserrat',sans-serif; color:#4a4d52; }
body .upsell-add { margin-top:auto; min-height:36px; padding:6px 4px; border:0; border-radius:999px; background:#231f20; color:#F7F4ED; font:500 11px 'Satoshi',sans-serif; letter-spacing:.04em; cursor:pointer; transition:transform 125ms ease; }
body .upsell-add:active { transform:scale(0.97); }
body .upsell-checkout { margin:0 0 18px; padding-top:0; border-top:0; }

/* Botón flotante "Catálogo" en el inicio (abajo a la izquierda; WhatsApp va a la derecha). */
body .catalog-float { position:fixed; left:max(18px, env(safe-area-inset-left)); bottom:max(18px, env(safe-area-inset-bottom)); z-index:900; display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:0 20px 0 16px; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:#231f20; color:#F7F4ED; font:500 14px Satoshi,sans-serif; letter-spacing:.02em; box-shadow:0 10px 24px rgba(35,31,32,.24); cursor:pointer; transition:transform 125ms cubic-bezier(0.23,1,0.32,1); }
body .catalog-float:active { transform:scale(0.97); }
@media (hover:hover) and (pointer:fine) { body .catalog-float:hover { background:#3a3436; } }