/* =====================================================
   PAPELERA SAN RAFAEL — Editorial + Liquid Glass
   ===================================================== */

:root {
  /* color */
  --navy-900: #2a0d3d;
  --navy-800: #602080;
  --navy-700: #7a2ea0;
  --navy-500: #9542bd;
  --red-600:  #d4c400;
  --red-500:  #e8d400;
  --red-400:  #fff020;
  --red-300:  #fff566;
  --red-tint: rgba(96,32,128,0.09);

  --cream:    #f7f4f9;
  --cream-2:  #ece5f2;
  --off:      #fafaf7;
  --ink:      #0b0b0c;
  --ink-2:    #1a1a1c;
  --muted:    #6b6a66;
  --line:     rgba(10,30,63,0.10);

  /* glass */
  --glass-bg:     rgba(255,255,255,0.55);
  --glass-bg-d:   rgba(10,20,40,0.38);
  --glass-brd:    rgba(255,255,255,0.65);
  --glass-brd-d:  rgba(255,255,255,0.18);
  --glass-shadow: 0 20px 60px -20px rgba(10,20,40,0.35), 0 8px 24px -12px rgba(10,20,40,0.25);
  --glass-inset:  inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(10,20,40,0.05);
  --glass-inset-d: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.2);

  /* type */
  --f-serif:  "Fraunces", "Times New Roman", serif;
  --f-sans:   "Inter Tight", system-ui, -apple-system, sans-serif;
  --f-mono:   "JetBrains Mono", ui-monospace, monospace;

  /* radius */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--cream);
  background-image:
    radial-gradient(ellipse 800px 600px at 15% 10%, rgba(96,32,128,0.06), transparent 60%),
    radial-gradient(ellipse 600px 400px at 90% 85%, rgba(96,32,128,0.05), transparent 60%);
  background-attachment: fixed;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.mono {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 400;
}

em { font-style: italic; color: var(--navy-800); font-family: var(--f-serif); font-weight: 400; }

/* selection */
::selection { background: var(--red-400); color: var(--navy-800); }

/* ---- ambient ---- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 2;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: multiply;
}

.cursor-glow {
  position: fixed;
  width: 620px; height: 620px;
  left: 50%; top: 50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(96,32,128,0.38), rgba(96,32,128,0) 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.4s;
  mix-blend-mode: normal;
  filter: blur(40px);
  will-change: transform;
}

/* ---- container ---- */
.container {
  width: min(1320px, 92vw);
  margin: 0 auto;
}

/* =====================================================
   NAV
   ===================================================== */
.nav {
  position: fixed; top: 38px; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: padding 0.4s ease, background 0.4s ease;
}
.nav.scrolled { padding: 10px 0; }
.nav-inner {
  width: min(1320px, 94vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 10px 14px 10px 18px;
  border-radius: 100px;
  background: rgba(245,241,234,0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--glass-inset), 0 8px 32px -12px rgba(10,20,40,0.15);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  width: 60px; height: 60px;
  flex: 0 0 60px;
  object-fit: contain;
  border-radius: 100px;
  filter: drop-shadow(0 2px 6px rgba(96,32,128,0.25));
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.brand:hover .brand-logo { transform: rotate(-12deg) scale(1.06); }
.brand-logo-footer {
  filter: drop-shadow(0 2px 10px rgba(96,32,128,0.5));
}
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--f-serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--navy-800);
  letter-spacing: -0.01em;
}
.brand-sub {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 13.5px;
  color: var(--navy-800);
  font-weight: 500;
  position: relative;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--navy-500); }
.nav-links a::before {
  content: "";
  position: absolute;
  left: 0; top: -4px;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--navy-500);
  opacity: 0;
  transition: opacity 0.2s;
}
.nav-links a:hover::before { opacity: 1; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -4px;
  height: 1px; background: var(--navy-500);
  transition: right 0.3s ease;
}
.nav-links a:hover::after { right: 0; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  background: var(--red-400);
  color: var(--navy-800);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 20px -6px rgba(96,32,128,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-ghost:hover { background: var(--red-500); transform: translateY(-1px); box-shadow: 0 10px 28px -6px rgba(96,32,128,0.7), inset 0 1px 0 rgba(255,255,255,0.2); }

@media (max-width: 800px) {
  .nav-links { display: none; }
}

/* =====================================================
   HERO
   ===================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 140px 0 80px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg-stripes {
  position: absolute; inset: -10%;
  background:
    repeating-linear-gradient(
      115deg,
      #e4dced 0px,
      #e4dced 2px,
      #efe9f5 2px,
      #efe9f5 7px,
      #f4f0f8 7px,
      #f4f0f8 14px
    );
  transform: scale(1.1);
  filter: contrast(0.95);
}
.hero-bg-gradient {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(10,30,63,0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(96,32,128,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(96,32,128,0.12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(247,244,249,0.15) 0%, rgba(247,244,249,0.82) 100%);
}
.hero-bg-label {
  position: absolute;
  right: 32px; bottom: 32px;
  color: var(--muted);
  opacity: 0.5;
}

/* floating sheets */
.sheet {
  position: absolute;
  background: linear-gradient(145deg, #fff 0%, #ece6f3 100%);
  box-shadow:
    0 30px 80px -20px rgba(10,20,40,0.35),
    0 8px 24px -10px rgba(10,20,40,0.2),
    inset 0 1px 0 rgba(255,255,255,0.9);
  border-radius: 2px;
  will-change: transform;
}
.sheet-1 {
  width: 280px; height: 380px;
  top: 15%; left: -60px;
  transform: rotate(-18deg);
}
.sheet-2 {
  width: 200px; height: 280px;
  top: 55%; right: 8%;
  transform: rotate(22deg);
  background: linear-gradient(145deg, #fffbe8 0%, #f5ecc0 100%);
}
.sheet-3 {
  width: 160px; height: 220px;
  bottom: 10%; left: 12%;
  transform: rotate(-8deg);
  background: linear-gradient(145deg, #fff 0%, #f2edf7 100%);
  opacity: 0.7;
}

.hero-content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 4vw;
}

.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: var(--glass-inset), 0 4px 20px -6px rgba(10,20,40,0.1);
  font-size: 12.5px;
  color: var(--navy-800);
  font-weight: 500;
  margin-bottom: 36px;
}
.glass-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(96,32,128,0.25), 0 0 12px rgba(96,32,128,0.5);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(96,32,128,0.25), 0 0 12px rgba(96,32,128,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(96,32,128,0.08), 0 0 16px rgba(96,32,128,0.7); }
}

.hero-title {
  font-family: var(--f-serif);
  font-size: clamp(56px, 11vw, 180px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--navy-800);
  margin: 0 0 32px;
  font-variation-settings: "opsz" 144;
}
.hero-title .line {
  display: block;
  overflow: hidden;
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--navy-700);
  position: relative;
  display: inline-block;
}
.hero-title em::after {
  content: "";
  position: absolute;
  left: -4%; right: -4%;
  bottom: 0.08em;
  height: 0.22em;
  background: var(--red-400);
  opacity: 0.85;
  border-radius: 4px;
}

.hero-lede {
  font-size: clamp(16px, 1.4vw, 19px);
  max-width: 560px;
  color: var(--ink-2);
  margin: 0 0 48px;
  line-height: 1.55;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px 16px 28px;
  background: var(--navy-800);
  color: var(--off);
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: var(--f-sans);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), background 0.3s, box-shadow 0.3s;
  box-shadow: 0 10px 30px -6px rgba(96,32,128,0.55), 0 2px 8px rgba(96,32,128,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.35), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -6px rgba(96,32,128,0.7), 0 4px 12px rgba(96,32,128,0.35), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-primary > * { position: relative; z-index: 1; }

.btn-primary-lg {
  padding: 20px 28px 20px 32px;
  font-size: 15px;
}
.btn-primary-light {
  background: var(--off);
  color: var(--navy-800);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.9);
}
.btn-primary-light::before {
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), var(--red-500), transparent 65%);
}
.btn-primary-light:hover { color: var(--off); box-shadow: 0 14px 36px -6px rgba(96,32,128,0.65), inset 0 1px 0 rgba(255,255,255,0.25); }

.btn-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.btn-primary:hover .btn-arrow { transform: translateX(4px); }

.btn-link {
  color: var(--navy-800);
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--navy-800);
  transition: color 0.2s, border-color 0.2s;
}
.btn-link { border-bottom-color: var(--navy-800); }
.btn-link:hover { color: var(--navy-500); border-color: var(--navy-500); }
.btn-link-light { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.4); }
.btn-link-light:hover { color: var(--red-300); border-color: var(--red-300); }

.corte-ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* glass stats */
.hero-stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  max-width: 900px;
  padding: 28px 40px;
  border-radius: var(--r-xl);
  gap: 0;
}
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  position: relative;
}
.glass-dark {
  background: var(--glass-bg-d);
  border: 1px solid var(--glass-brd-d);
  box-shadow: var(--glass-shadow), var(--glass-inset-d);
  color: var(--off);
}
.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.stat-num {
  font-family: var(--f-serif);
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 400;
  line-height: 1;
  color: var(--navy-800);
  letter-spacing: -0.02em;
}
.stat-num sup { font-size: 0.45em; color: var(--navy-700); top: -0.7em; font-weight: 500; }
.stat:nth-child(3) .stat-num,
.stat:nth-child(5) .stat-num { color: var(--navy-700); }
.stat-lbl {
  font-family: var(--f-mono);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.stat-sep {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(10,20,40,0.15), transparent);
  margin: 0 12px;
}

@media (max-width: 700px) {
  .hero-stats { grid-template-columns: 1fr 1fr; padding: 20px; gap: 20px; }
  .stat-sep { display: none; }
}

.scroll-ind {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--muted);
  z-index: 5;
}
.scroll-ind-line {
  width: 1px; height: 40px;
  background: rgba(10,20,40,0.2);
  position: relative;
  overflow: hidden;
}
.scroll-ind-dot {
  position: absolute;
  top: -10px; left: -1.5px;
  width: 4px; height: 10px; border-radius: 4px;
  background: var(--navy-800);
  animation: scroll-drop 2.5s infinite;
}
@keyframes scroll-drop {
  0% { top: -10px; opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { top: 40px; opacity: 0; }
}

/* =====================================================
   SECTION HEADERS
   ===================================================== */
.section-intro {
  padding: 180px 0 90px;
  position: relative;
}
.section-head {
  max-width: 900px;
}
.tag {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--navy-800);
  margin-bottom: 28px;
}
.tag-light {
  color: var(--off);
  border-color: rgba(255,255,255,0.25);
}
.section-title {
  font-family: var(--f-serif);
  font-size: clamp(40px, 6.5vw, 92px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--navy-800);
  margin: 0 0 32px;
}
.section-title-light { color: var(--off); }
.section-title em { color: var(--navy-700); }
.section-title-light em { color: var(--red-400); }
.section-lede {
  font-size: 18px;
  max-width: 620px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}
.section-lede-light { color: rgba(255,255,255,0.75); }

/* =====================================================
   PRODUCT GRID — glass cards
   ===================================================== */
.products { padding: 40px 0 140px; position: relative; }
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 1000px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .products-grid { grid-template-columns: 1fr; }
}

.product-card {
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform 0.5s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.5s,
    backdrop-filter 0.5s;
  will-change: transform;
  cursor: pointer;
}
.product-card.glass {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.7);
}
.product-card:hover {
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  box-shadow:
    0 40px 80px -20px rgba(10,20,40,0.35),
    0 16px 40px -10px rgba(10,20,40,0.25),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

.product-card-glow {
  position: absolute;
  inset: -1px;
  border-radius: var(--r-lg);
  background: radial-gradient(
    500px circle at var(--mx, 50%) var(--my, 50%),
    rgba(96,32,128,0.35),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
}
.product-card:hover .product-card-glow { opacity: 1; }
.product-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background: linear-gradient(135deg, rgba(96,32,128,0.5), transparent 30%, transparent 70%, rgba(96,32,128,0.3)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.product-card:hover::after { opacity: 1; }

.product-card-inner {
  padding: 16px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.product-img {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 16px;
}
.product-img-photo {
  background: linear-gradient(135deg, #efeaf4 0%, #ddd2e8 100%);
  padding: 0;
}
.product-img-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.product-card:hover .product-img-photo img {
  transform: scale(1.06);
}
.product-img-photo::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 100%, rgba(96,32,128,0.18), transparent 60%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.product-card:hover .product-img-photo::before { opacity: 1; }
.placeholder-stripes {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(10,20,40,0.08) 0px,
      rgba(10,20,40,0.08) 1px,
      transparent 1px,
      transparent 8px
    ),
    var(--cream-2);
}
.placeholder-stripes[data-color="cream"]  { background-color: #f3ecd8; }
.placeholder-stripes[data-color="gloss"]  { background-color: #eaeef3; }
.placeholder-stripes[data-color="white"]  { background-color: #f7f4ec; }
.placeholder-stripes[data-color="ivory"]  { background-color: #f5efdf; }
.placeholder-stripes[data-color="red"]    {
  background-color: #efd5d8;
  background-image: repeating-linear-gradient(135deg, rgba(96,32,128,0.18) 0px, rgba(96,32,128,0.18) 1px, transparent 1px, transparent 8px);
}
.placeholder-stripes[data-color="peach"]  { background-color: #f3e4d4; }

.placeholder-label {
  color: var(--muted);
  opacity: 0.7;
  position: relative; z-index: 2;
}
.product-img-shine {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255,255,255,0.5) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.product-card:hover .product-img-shine {
  transform: translateX(100%);
}

.product-meta { padding: 0 8px; display: flex; flex-direction: column; gap: 10px; }
.product-cat { color: var(--navy-700); font-weight: 500; }
.product-name {
  font-family: var(--f-serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy-800);
  margin: 0;
}
.product-desc {
  font-size: 14.5px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.5;
}
.product-specs {
  display: flex;
  gap: 8px;
  color: var(--muted);
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}

.product-card-cta {
  position: absolute;
  top: 28px; right: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--red-400);
  backdrop-filter: blur(10px);
  color: var(--navy-800);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  z-index: 3;
  box-shadow: 0 10px 30px -6px rgba(96,32,128,0.7);
  transform: translateY(-4px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.3s;
}
.product-card:hover .product-card-cta {
  transform: translateY(0);
  opacity: 1;
}
.product-card-cta .arrow {
  transition: transform 0.3s;
}
.product-card:hover .product-card-cta .arrow {
  transform: translateX(3px);
}

.products-foot {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.products-foot-note { color: var(--muted); }

/* =====================================================
   CORTE — dark section
   ===================================================== */
.corte {
  position: relative;
  padding: 140px 0;
  background: var(--navy-900);
  color: var(--off);
  overflow: hidden;
  border-radius: var(--r-xl);
  margin: 0 4vw;
}
.corte-bg {
  position: absolute; inset: 0;
  pointer-events: none;
}
.corte-bg-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 70%);
}
.corte-bg-glow {
  position: absolute;
  width: 900px; height: 900px;
  top: -20%; right: -10%;
  background: radial-gradient(circle, rgba(96,32,128,0.5), transparent 60%);
  filter: blur(70px);
}
.corte-bg-glow::after {
  content: "";
  position: absolute;
  width: 600px; height: 600px;
  bottom: -60%; left: -15%;
  background: radial-gradient(circle, rgba(96,32,128,0.35), transparent 60%);
  filter: blur(60px);
}
.corte-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (max-width: 900px) {
  .corte-inner { grid-template-columns: 1fr; gap: 48px; }
}

.corte-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.corte-list li {
  display: flex; align-items: baseline;
  gap: 16px;
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.corte-list li .mono {
  color: var(--red-400);
  font-size: 14px;
}

.corte-right { position: relative; }
.corte-visual {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  padding: 40px;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.corte-visual-grid {
  position: relative;
  width: 100%; height: 100%;
}
.corte-paper {
  position: absolute;
  background: linear-gradient(135deg, #fff 0%, #e9e1f2 100%);
  box-shadow:
    0 20px 50px -10px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.9);
  border-radius: 2px;
}
.corte-paper-1 {
  width: 70%; height: 80%;
  top: 10%; left: 15%;
  transform: rotate(-4deg);
  animation: floaty 6s ease-in-out infinite;
}
.corte-paper-2 {
  width: 55%; height: 65%;
  top: 20%; left: 22%;
  transform: rotate(3deg);
  animation: floaty 7s ease-in-out infinite reverse;
  background: linear-gradient(135deg, #fffbe8 0%, #efe4ae 100%);
}
.corte-paper-3 {
  width: 40%; height: 50%;
  top: 30%; left: 30%;
  transform: rotate(-2deg);
  animation: floaty 8s ease-in-out infinite;
  background: linear-gradient(135deg, #fff 0%, #f0e9f7 100%);
}
@keyframes floaty {
  0%, 100% { transform: rotate(var(--rot, -4deg)) translateY(0); }
  50% { transform: rotate(calc(var(--rot, -4deg) + 1deg)) translateY(-8px); }
}
.corte-paper-1 { --rot: -4deg; }
.corte-paper-2 { --rot: 3deg; }
.corte-paper-3 { --rot: -2deg; }

.corte-cut-line {
  position: absolute;
  top: 48%; left: 8%; right: 8%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--red-400) 15%, #fffbb0 50%, var(--red-400) 85%, transparent 100%);
  box-shadow: 0 0 30px rgba(96,32,128,0.9), 0 0 60px rgba(96,32,128,0.4);
  animation: cut-sweep 3s ease-in-out infinite;
}
@keyframes cut-sweep {
  0%, 100% { transform: translateY(0) scaleX(0.95); }
  50% { transform: translateY(20px) scaleX(1.02); }
}

.corte-visual-label {
  position: absolute;
  bottom: 24px; left: 24px; right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: rgba(255,255,255,0.8);
  z-index: 2;
}
.corte-visual-spec {
  font-family: var(--f-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--red-300);
  text-shadow: 0 0 20px rgba(96,32,128,0.5);
}

/* =====================================================
   MARCAS
   ===================================================== */
.marcas { padding: 160px 0 100px; }
.marcas-title {
  font-family: var(--f-serif);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--navy-800);
  max-width: 900px;
  margin: 28px 0 56px;
}
.marcas-title em {
  color: var(--navy-700);
  position: relative;
  display: inline-block;
}
.marcas-title em::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: 0.1em;
  height: 0.24em;
  background: var(--red-400);
  opacity: 0.85;
  border-radius: 4px;
}
.marcas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .marcas-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .marcas-grid { grid-template-columns: repeat(2, 1fr); } }
.marca {
  aspect-ratio: 1.6 / 1;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,0.5);
  transition: transform 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.7);
}
.marca:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.85);
  border-color: var(--navy-800);
  box-shadow: 0 16px 40px -12px rgba(96,32,128,0.35);
}
.marca:hover > span:first-child { color: var(--navy-800); }
.marca > span:first-child {
  font-family: var(--f-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--navy-800);
}
.marca .mono { color: var(--muted); }

/* =====================================================
   NOSOTROS
   ===================================================== */
.nosotros {
  padding: 140px 0;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  position: relative;
}
.nosotros-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) {
  .nosotros-inner { grid-template-columns: 1fr; gap: 48px; }
}
.nosotros-para {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 20px;
  max-width: 560px;
}
.nosotros-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
@media (max-width: 700px) { .nosotros-pillars { grid-template-columns: 1fr; } }
.pillar .pillar-num {
  color: var(--navy-800);
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  background: var(--red-tint);
  border-radius: 6px;
  font-weight: 500;
}
.pillar h4 {
  font-family: var(--f-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--navy-800);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.pillar p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* =====================================================
   CONTACTO
   ===================================================== */
.contacto {
  position: relative;
  padding: 140px 0;
  background: var(--navy-900);
  color: var(--off);
  overflow: hidden;
}
.contacto-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(96,32,128,0.55), transparent 50%),
    radial-gradient(ellipse at 85% 85%, rgba(96,32,128,0.38), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(30,64,128,0.35), transparent 60%);
  filter: blur(40px);
}
.contacto-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) { .contacto-inner { grid-template-columns: 1fr; gap: 48px; } }
.contacto-title { font-size: clamp(48px, 8vw, 110px); }

.contacto-form {
  padding: 40px;
  border-radius: var(--r-lg);
  display: grid;
  gap: 20px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.contacto-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contacto-form .mono {
  color: rgba(255,255,255,0.55);
}
.contacto-form input,
.contacto-form select,
.contacto-form textarea {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--off);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-family: var(--f-sans);
  font-size: 14.5px;
  transition: background 0.2s, border-color 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.contacto-form input:focus,
.contacto-form select:focus,
.contacto-form textarea:focus {
  outline: none;
  background: rgba(255,255,255,0.1);
  border-color: var(--red-400);
  box-shadow: 0 0 0 3px rgba(255,240,32,0.25);
}
.contacto-form input::placeholder,
.contacto-form textarea::placeholder {
  color: rgba(255,255,255,0.35);
}
.contacto-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4l3 3 3-3' stroke='white' fill='none' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.contacto-form select option { color: var(--ink); }

.form-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 600px) { .form-foot { flex-direction: column; align-items: flex-start; } }
.form-direct { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
@media (max-width: 600px) { .form-direct { align-items: flex-start; } }
.form-direct a {
  color: rgba(255,255,255,0.75);
  transition: color 0.2s;
}
.form-direct a:hover { color: var(--red-400); }

.form-sent {
  display: none;
  padding: 14px;
  border-radius: var(--r-sm);
  background: rgba(80,200,120,0.15);
  border: 1px solid rgba(80,200,120,0.4);
  color: #80e0a0;
  text-align: center;
}
.form-sent.show { display: block; }

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
  background: var(--navy-900);
  color: rgba(255,255,255,0.7);
  padding: 80px 0 32px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 80px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr; gap: 48px; } }
.footer .brand-name { color: var(--off); }
.footer .brand-sub { color: rgba(255,255,255,0.4); }
.footer-tag {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  max-width: 320px;
  margin: 24px 0 0;
  line-height: 1.5;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 600px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.footer-cols > div { display: flex; flex-direction: column; gap: 12px; }
.footer-col-title {
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}
.footer-cols a {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  transition: color 0.2s;
}
.footer-cols a:hover { color: var(--red-400); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 28px;
  color: rgba(255,255,255,0.4);
}
@media (max-width: 600px) { .footer-bottom { flex-direction: column; gap: 8px; } }

/* =====================================================
   SCROLL REVEAL
   ===================================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(.2,.8,.2,1), transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   CORTE MODAL — iframe overlay
   ===================================================== */
.corte-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 4vw;
}
.corte-modal[aria-hidden="false"] { display: flex; }
.corte-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(5,15,36,0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: fadeIn 0.35s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.corte-modal-shell {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 90vh;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--off);
  box-shadow:
    0 60px 120px -20px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.15),
    inset 0 1px 0 rgba(255,255,255,0.6);
  animation: modalIn 0.5s cubic-bezier(.2,.8,.2,1);
  display: flex;
  flex-direction: column;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.corte-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  background: rgba(247,244,249,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(10,20,40,0.08);
  flex: 0 0 auto;
}
.corte-modal-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.corte-modal-tag {
  color: var(--muted);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.corte-modal-title h3 {
  font-family: var(--f-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--navy-800);
  margin: 0;
  letter-spacing: -0.01em;
}
.corte-modal-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.corte-modal-external,
.corte-modal-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(10,20,40,0.12);
  background: rgba(255,255,255,0.6);
  color: var(--navy-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.corte-modal-external:hover,
.corte-modal-close:hover {
  background: var(--red-400);
  color: var(--navy-800);
  border-color: var(--red-400);
  transform: scale(1.06);
}

.corte-modal-body {
  position: relative;
  flex: 1 1 auto;
  background: var(--off);
  overflow: hidden;
}
.corte-modal-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.corte-modal-body iframe.ready { opacity: 1; }

.corte-modal-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--muted);
  background: var(--cream);
  transition: opacity 0.4s;
}
.corte-modal-loader.hide { opacity: 0; pointer-events: none; }
.corte-modal-spinner {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(96,32,128,0.2);
  border-top-color: var(--red-400);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

body.modal-open { overflow: hidden; }

/* ===== CALCULADORA ===== */
.calc-wrap { position: relative; z-index: 2; margin-top: 100px; }
.calc-head { max-width: 700px; margin-bottom: 40px; }
.calc-title {
  font-family: var(--f-serif);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--off);
  margin: 20px 0 16px;
}
.calc-title em { color: var(--red-400); }
.calc-lede { font-size: 16px; color: rgba(255,255,255,0.7); margin: 0; line-height: 1.5; }

.calc {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  padding: 40px;
  border-radius: var(--r-lg);
}
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

.calc-form { display: flex; flex-direction: column; gap: 28px; }
.calc-group { display: flex; flex-direction: column; gap: 12px; }
.calc-group-label { color: var(--red-300); letter-spacing: 0.08em; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calc-form label { display: flex; flex-direction: column; gap: 8px; }
.calc-form label .mono { color: rgba(255,255,255,0.55); }
.calc-input {
  display: flex; align-items: stretch;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.calc-input:focus-within {
  background: rgba(255,255,255,0.1);
  border-color: var(--red-400);
  box-shadow: 0 0 0 3px rgba(255,240,32,0.25);
}
.calc-input input {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0;
  color: var(--off);
  padding: 12px 14px;
  font-family: var(--f-sans);
  font-size: 16px;
  outline: none;
}
.calc-input input::placeholder { color: rgba(255,255,255,0.3); }
.calc-input span {
  display: inline-flex; align-items: center;
  padding: 0 14px;
  background: rgba(255,255,255,0.05);
  border-left: 1px solid rgba(255,255,255,0.1);
  font-family: var(--f-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.calc-actions { display: flex; align-items: center; gap: 20px; margin-top: 8px; flex-wrap: wrap; }
.calc-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.calc-reset:hover {
  background: var(--red-400);
  color: var(--navy-800);
  border-color: var(--red-400);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -8px rgba(96,32,128,0.55);
}
.calc-reset svg { transition: transform 0.4s cubic-bezier(.2,.8,.2,1); }
.calc-reset:hover svg { transform: rotate(-180deg); }

.calc-visual { display: flex; flex-direction: column; gap: 16px; }
.calc-canvas-label { color: rgba(255,255,255,0.5); }
.calc-canvas-wrap {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#micanvas { max-width: 100%; height: auto; background: transparent !important; display: block; }

.calc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.calc-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-sm);
  font-family: var(--f-serif);
  font-size: 18px;
  color: var(--off);
}
.calc-stat .mono { font-family: var(--f-mono); color: rgba(255,255,255,0.55); font-size: 10.5px; }
.calc-stat-hl {
  grid-column: 1 / -1;
  background: rgba(96,32,128,0.15);
  border-color: rgba(96,32,128,0.35);
  font-size: 22px;
}
.calc-stat-hl .mono { color: var(--red-300); }


.nav-links .nav-alt{opacity:.6}
.nav-links .nav-alt:hover{opacity:1}

/* =====================================================
   HERO — contacto directo + suscripción
   ===================================================== */
.hero-direct{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 28px;padding:16px 20px;border-radius:var(--r-md);margin:0 0 20px}
.hero-direct-items{display:flex;flex-wrap:wrap;gap:8px 26px}
.hero-direct-item{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink);text-decoration:none;line-height:1.25}
.hero-direct-item svg{flex:0 0 auto;color:var(--red-500);margin-top:1px}
.hero-direct-item>span{display:flex;flex-direction:column}
.hero-direct-lbl{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
a.hero-direct-item:hover{color:var(--navy-800)}
.hero-news{display:flex;flex-direction:column;gap:6px;position:relative}
.hero-news-lbl{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero-news-field{display:flex;align-items:center;gap:6px;border-bottom:1px solid rgba(10,20,40,.22);padding-bottom:5px}
.hero-news-field input{font-family:var(--f-sans);font-size:13.5px;border:none;background:none;outline:none;width:172px;color:var(--ink)}
.hero-news-field input::placeholder{color:var(--muted)}
.hero-news-field button{font-family:var(--f-sans);font-size:15px;line-height:1;border:none;background:none;color:var(--red-500);cursor:pointer;padding:2px 4px;transition:transform .2s}
.hero-news-field button:hover{transform:translateX(3px)}
.hero-news-ok{position:absolute;inset:auto 0 0 0;font-size:11px;color:var(--navy-800);opacity:0;pointer-events:none;transition:opacity .3s}
.hero-news.sent .hero-news-field{opacity:.25}
.hero-news.sent .hero-news-ok{opacity:1}
@media (max-width:700px){.hero-direct{flex-direction:column;align-items:flex-start}.hero-news-field input{width:100%}}

/* catálogo compacto — título + tarjetas más cerca del viewport */
.section-intro-tight{padding:86px 0 34px}
.section-intro-tight .section-lede{margin-top:14px}
.products-tight{padding:0 0 96px}
.products-tight .products-grid{gap:20px}
@media (max-width:900px){.section-intro-tight{padding:64px 0 28px}}

a.product-card-cta{text-decoration:none}
.footer-cols span:not(.footer-col-title){display:block;color:rgba(255,255,255,.55);font-size:13.5px;padding:3px 0}

/* =====================================================
   PDP — página de producto
   ===================================================== */
.pdp{padding:182px 0 0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--navy-800)}
.pdp-top{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
@media (max-width:900px){.pdp-top{grid-template-columns:1fr;gap:32px}.pdp{padding:128px 0 0}}
.pdp-gallery{display:flex;flex-direction:column;gap:12px}
.pdp-shot{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--cream-2);aspect-ratio:4/3}
.pdp-shot img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pdp-thumb{aspect-ratio:1;border-radius:var(--r-sm);background:var(--cream-2);border:1px dashed rgba(10,20,40,.18);display:grid;place-items:center;text-align:center;padding:8px;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pdp-eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-800);display:block;margin-bottom:14px}
.pdp-title{font-family:var(--f-serif);font-weight:400;font-size:clamp(38px,5vw,62px);line-height:1.02;letter-spacing:-.02em;margin:0 0 18px}
.pdp-lede{font-size:17px;line-height:1.55;color:var(--navy-700);max-width:52ch;margin:0 0 26px;text-wrap:pretty}
.pdp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.pdp-chip{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;padding:7px 11px;border-radius:100px;background:var(--red-tint);color:var(--navy-800)}
.pdp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.pdp-body{display:grid;grid-template-columns:1fr 316px;gap:56px;padding:88px 0 110px;align-items:start}
@media (max-width:900px){.pdp-body{grid-template-columns:1fr;gap:48px;padding:56px 0 80px}}
.pdp-h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.12;letter-spacing:-.015em;margin:0 0 20px}
.pdp-sec+.pdp-sec{margin-top:56px;padding-top:56px;border-top:1px solid rgba(10,20,40,.1)}
.pdp-sec p{font-size:15.5px;line-height:1.65;color:var(--navy-700);max-width:66ch;margin:0 0 14px;text-wrap:pretty}
.spec-table{width:100%;border-collapse:collapse;font-size:14.5px}
.spec-table th,.spec-table td{text-align:left;padding:13px 0;border-bottom:1px solid rgba(10,20,40,.1);vertical-align:top}
.spec-table th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400;width:38%;padding-right:18px}
.spec-table td{color:var(--navy-800)}
.usos{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(10,20,40,.1);border-radius:var(--r-md);overflow:hidden;list-style:none;padding:0;margin:0}
@media (max-width:600px){.usos{grid-template-columns:1fr}}
.usos li{background:var(--cream);padding:18px 20px;font-size:14.5px;line-height:1.45;color:var(--navy-800)}
.usos li b{display:block;font-weight:500;margin-bottom:4px}
.usos li span{color:var(--muted);font-size:13px}
.faq-item{border-bottom:1px solid rgba(10,20,40,.1);padding:18px 0}
.faq-item:first-of-type{border-top:1px solid rgba(10,20,40,.1)}
.faq-q{font-family:var(--f-sans);font-weight:500;font-size:15.5px;line-height:1.35;margin:0 0 8px;color:var(--navy-800)}
.faq-a{font-size:14.5px;line-height:1.6;color:var(--navy-700);margin:0;max-width:66ch}
.pdp-aside{position:sticky;top:106px;display:flex;flex-direction:column;gap:14px}
@media (max-width:900px){.pdp-aside{position:static}}
.pdp-aside-title{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.rel{display:flex;gap:14px;align-items:center;padding:12px;border-radius:var(--r-md);text-decoration:none;background:rgba(255,255,255,.55);border:1px solid rgba(10,20,40,.08);transition:background .2s,transform .2s}
.rel:hover{background:#fff;transform:translateY(-2px)}
.rel img{width:58px;height:58px;object-fit:cover;border-radius:var(--r-sm);flex:0 0 auto}
.rel-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.rel-name{font-size:14px;font-weight:500;color:var(--navy-800);line-height:1.2}
.rel-spec{font-family:var(--f-mono);font-size:10px;color:var(--muted)}
.pdp-aside-box{margin-top:12px;padding:20px;border-radius:var(--r-md);background:var(--navy-800);color:#fff}
.pdp-aside-box h3{font-family:var(--f-serif);font-weight:400;font-size:20px;line-height:1.15;margin:0 0 8px}
.pdp-aside-box p{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72);margin:0 0 16px}
.pdp-aside-box a{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#fff;text-decoration:none;border-bottom:1px solid var(--red-400);padding-bottom:3px}

.footer-bottom{flex-wrap:wrap;gap:8px 22px}
.footer-legal{color:rgba(255,255,255,.58);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:1px}
.footer-legal:hover{color:#fff;border-bottom-color:var(--red-400)}

.brand{gap:14px}
.footer .brand-logo{width:66px;height:66px;flex:0 0 66px}
@media (max-width:700px){.brand-logo{width:48px;height:48px;flex:0 0 48px}.brand-name{font-size:18px}}

/* =====================================================
   BANNER HILO — banda full bleed con parallax por capas
   ===================================================== */
.hilo{--mx:0;--my:0;--sp:0;position:relative;height:min(78vh,620px);min-height:440px;overflow:hidden;background:var(--navy-900);isolation:isolate}
.hilo-layers{position:absolute;inset:-8%;z-index:0;pointer-events:none}
.hilo-wash{position:absolute;inset:0;background:radial-gradient(90% 120% at 22% 20%,var(--wash,#1b1b20) 0%,transparent 62%),linear-gradient(120deg,var(--navy-900) 0%,var(--navy-800) 58%,var(--navy-700) 100%);transition:background 1s ease}
.hilo-word{position:absolute;left:-3vw;top:50%;width:min(72vw,1000px);height:auto;opacity:.07;transform:translateY(-50%);user-select:none}
.hilo-rule{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,240,32,.35) 22%,rgba(255,240,32,.35) 62%,transparent)}
.hilo-orb{position:absolute;border-radius:100px;filter:blur(2px)}
.hilo-orb-a{width:min(46vw,560px);aspect-ratio:1;left:4vw;top:6%;background:radial-gradient(circle at 34% 30%,rgba(255,240,32,.2),transparent 66%)}
.hilo-orb-b{width:min(34vw,420px);aspect-ratio:1;right:6vw;bottom:-8%;background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.14),transparent 64%)}

.hilo-stage{position:relative;z-index:2;height:100%;width:min(1320px,92vw);margin:0 auto;padding:0 4vw}
.hilo-slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,72px);opacity:0;pointer-events:none;transition:opacity .85s cubic-bezier(.2,.8,.2,1)}
.hilo-slide.is-on{opacity:1;pointer-events:auto}
.hilo-shot{position:relative;height:100%;min-height:0;margin:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:clamp(24px,4vh,52px) 0 clamp(24px,4vh,52px) clamp(8px,1.4vw,22px);opacity:0;transform:translate3d(-40px,0,0) scale(.94);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1)}
.hilo-shot img{width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));will-change:transform}
.hilo-slide.is-on .hilo-shot{opacity:1;transform:none}
.hilo-copy{min-width:0;padding-right:calc(54px + 2.4vw + 18px);opacity:0;transform:translate3d(46px,0,0);transition:opacity .9s .12s cubic-bezier(.2,.8,.2,1),transform 1.1s .12s cubic-bezier(.2,.8,.2,1)}
.hilo-copy-in{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hilo-slide.is-on .hilo-copy{opacity:1;transform:none}
.hilo-tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red-400)}
.hilo-name{font-family:var(--f-serif);font-size:clamp(34px,4.4vw,68px);font-weight:400;line-height:1.02;letter-spacing:-.025em;color:#fff;margin:0;text-wrap:pretty}
.hilo-spec{font-size:clamp(14.5px,1.2vw,17px);line-height:1.5;color:rgba(255,255,255,.76);margin:0;max-width:40ch}
.hilo-cta{display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding:14px 22px;border-radius:100px;background:var(--red-400);color:var(--navy-900);font-size:14.5px;font-weight:500;text-decoration:none;transition:transform .25s,box-shadow .25s}
.hilo-cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(255,240,32,.6)}
.hilo-cta .btn-arrow{transition:transform .25s}
.hilo-cta:hover .btn-arrow{transform:translateX(4px)}

.hilo-arrow{position:absolute;top:50%;z-index:5;transform:translateY(-50%);width:54px;height:54px;font-size:26px;line-height:1;border:1px solid rgba(255,255,255,.28);border-radius:100px;background:rgba(255,255,255,.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .22s,transform .22s}
.hilo-arrow:hover{background:rgba(255,255,255,.22);transform:translateY(-50%) scale(1.07)}
.hilo-arrow[data-hilo="-1"]{left:clamp(12px,2.4vw,34px)}
.hilo-arrow[data-hilo="1"]{right:clamp(12px,2.4vw,34px)}
.hilo-dots{position:absolute;left:50%;bottom:26px;z-index:5;transform:translateX(-50%);display:flex;gap:10px}
.hilo-dot{width:9px;height:9px;padding:0;border:none;border-radius:100px;background:rgba(255,255,255,.3);cursor:pointer;transition:background .25s,width .3s}
.hilo-dot[data-on="1"]{background:var(--red-400);width:30px}
.hilo-count{position:absolute;right:clamp(12px,2.4vw,34px);bottom:26px;z-index:5;font-size:10.5px;letter-spacing:.14em;color:rgba(255,255,255,.5)}

@media (max-width:900px){
  .hilo{height:auto;min-height:0;padding:64px 0 108px}
  .hilo-stage{height:auto}
  .hilo-slide{position:relative;inset:auto;grid-template-columns:1fr;grid-template-rows:auto auto;text-align:left;gap:26px;display:none}
  .hilo-slide.is-on{display:grid}
  .hilo-shot{height:clamp(200px,42vw,300px);padding:0}
  .hilo-copy{padding-right:0}
  .hilo-word{width:118vw;left:-9vw;opacity:.06}
  .hilo-arrow{width:42px;height:42px;font-size:21px;top:auto;bottom:22px;transform:none}
  .hilo-arrow:hover{transform:scale(1.07)}
  .hilo-arrow[data-hilo="-1"]{left:4vw}
  .hilo-arrow[data-hilo="1"]{left:calc(4vw + 52px);right:auto}
  .hilo-dots{left:auto;right:4vw;transform:none;bottom:34px}
  .hilo-count{display:none}
}
@media (prefers-reduced-motion:reduce){.hilo-shot,.hilo-copy{transition:none}}

/* barra superior de contacto */
.topbar{position:fixed;top:0;left:0;right:0;z-index:101;background:var(--navy-900);color:rgba(255,255,255,.88)}
.topbar-inner{width:min(1320px,94vw);margin:0 auto;height:38px;display:flex;align-items:center;justify-content:center;gap:28px;font-family:var(--f-sans);font-size:12.5px;flex-wrap:nowrap;overflow:hidden}
.topbar-inner a,.topbar-inner span{color:inherit;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.topbar-inner a:hover{color:var(--red-400)}
.topbar-lbl{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
/* banner como primera vista, debajo del nav fijo y la barra de contacto */
.hilo-first{height:min(92vh,760px);min-height:520px;padding-top:124px}
.hilo-first .hilo-stage{height:100%}
.hilo-count{bottom:auto;top:calc(124px + 18px)}
@media (max-width:900px){
  .topbar-inner{height:auto;padding:8px 0;flex-wrap:wrap;gap:4px 18px;font-size:11.5px;justify-content:flex-start}
  .topbar-lbl{display:none}
  .nav{top:0}
  .topbar{position:static}
  .hilo-first{padding:150px 0 108px}
  .hilo-first .hilo-stage{height:auto}
}

/* tarjeta destacada horizontal */
.product-card-wide{grid-column:1 / -1}
.product-card-wide .product-card-inner{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);align-items:center;gap:clamp(20px,3vw,48px)}
.product-card-wide .product-img{aspect-ratio:4/3;height:100%}
.product-card-wide .product-meta{padding:0}
.product-card-wide .product-name{font-size:clamp(26px,2.6vw,38px)}
.product-card-wide .product-desc{max-width:46ch}
.product-card-wide .product-card-cta{grid-column:2}
@media (max-width:640px){.product-card-wide .product-card-inner{grid-template-columns:1fr}.product-card-wide .product-card-cta{grid-column:1}}

/* franja de contacto y datos, sustituye al hero */
.quickbar{padding:clamp(40px,6vw,72px) 0 clamp(34px,5vw,56px);background:var(--cream)}
.quickbar-inner{display:flex;flex-direction:column;gap:22px}
.quickbar .hero-direct,.quickbar .hero-stats{margin:0;opacity:1;transform:none;animation:none}

/* =====================================================
   CATÁLOGO EN PANELES — bloque de color a toda altura
   ===================================================== */
.products-panels .products-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.products-panels .product-card{border-radius:var(--r-lg);border:none;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden}
.products-panels .product-card-glow{display:none}
.products-panels .product-card-inner{position:relative;aspect-ratio:3/4;display:grid;grid-template-rows:auto minmax(0,1fr) auto;row-gap:12px;padding:clamp(22px,2.2vw,32px);border-radius:inherit;overflow:hidden;background:var(--panel,var(--navy-800));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.products-panels .product-card:hover .product-card-inner{transform:translateY(-6px);box-shadow:0 36px 70px -28px rgba(12,8,24,.5)}
.products-panels .product-card-inner::after{content:"";position:absolute;inset:auto -10% -22% -10%;height:62%;background:radial-gradient(60% 100% at 50% 100%,rgba(0,0,0,.22),transparent 70%);pointer-events:none}

/* orden visual: texto arriba, foto abajo */
.products-panels .product-meta{grid-row:1;position:relative;z-index:2;display:flex;flex-direction:column;gap:9px;padding:0}
.products-panels .product-cat{font-size:10px;letter-spacing:.14em;color:var(--panel-dim,rgba(255,255,255,.6))}
.products-panels .product-name{font-size:clamp(23px,2.1vw,31px);line-height:1.06;letter-spacing:-.02em;color:var(--panel-ink,#fff);margin:0}
.products-panels .product-desc{font-size:13.5px;line-height:1.45;color:var(--panel-dim,rgba(255,255,255,.72));margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.products-panels .product-specs{font-size:10.5px;letter-spacing:.06em;color:var(--panel-dim,rgba(255,255,255,.62));gap:7px}

.products-panels .product-img{grid-row:2;aspect-ratio:auto;height:100%;min-height:0;margin:0 -6px;border-radius:0;background:none;border:none;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
.products-panels .product-img img{width:auto;height:100%;max-width:112%;object-fit:contain;border-radius:0;filter:drop-shadow(0 30px 40px rgba(0,0,0,.42));transform:rotate(-7deg) scale(1.04);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.products-panels .product-card:hover .product-img img{transform:rotate(-3deg) scale(1.1)}
.products-panels .product-img-shine,.products-panels .product-img-label{display:none}

.products-panels .product-card-cta{grid-row:3;position:static;inset:auto;z-index:2;margin:0;padding:0;border:none;background:none;color:var(--panel-ink,#fff);font-size:13px;display:inline-flex;align-items:center;gap:8px;align-self:start}
.products-panels .product-card-cta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.products-panels .product-card-cta .arrow{transition:transform .3s}
.products-panels .product-card:hover .product-card-cta .arrow{transform:translateX(5px)}

/* rotación de color por panel */
.products-panels .product-card:nth-child(4n+1){--panel:var(--navy-800);--panel-ink:#fff;--panel-dim:rgba(255,255,255,.7)}
.products-panels .product-card:nth-child(4n+2){--panel:var(--red-400);--panel-ink:var(--navy-900);--panel-dim:rgba(20,8,32,.66)}
.products-panels .product-card:nth-child(4n+3){--panel:var(--cream-2);--panel-ink:var(--navy-900);--panel-dim:rgba(20,8,32,.6)}
.products-panels .product-card:nth-child(4n+4){--panel:var(--navy-900);--panel-ink:#fff;--panel-dim:rgba(255,255,255,.66)}

@media (max-width:1000px){.products-panels .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.products-panels .products-grid{grid-template-columns:1fr}.products-panels .product-card-inner{aspect-ratio:4/5}}

/* ---- hover 3D con capas en profundidad (panel de catálogo) ---- */
.products-panels .product-card{perspective:1200px;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.products-panels .product-card-inner{transform-style:preserve-3d;transition:box-shadow .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
.products-panels .product-card:hover .product-card-inner{transform:none;box-shadow:0 34px 70px -26px rgba(12,8,24,.55),0 0 0 1px rgba(255,255,255,.08)}
.products-panels .product-meta,.products-panels .product-card-cta,.products-panels .product-img{transform-style:preserve-3d}
.products-panels .product-name,.products-panels .product-cat,.products-panels .product-desc,.products-panels .product-specs,.products-panels .product-card-cta{transform:translate3d(0,0,14px);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.products-panels .product-card:hover .product-cat{transform:translate3d(0,0,34px)}
.products-panels .product-card:hover .product-name{transform:translate3d(0,0,52px)}
.products-panels .product-card:hover .product-desc{transform:translate3d(0,0,38px)}
.products-panels .product-card:hover .product-specs{transform:translate3d(0,0,30px)}
.products-panels .product-card:hover .product-card-cta{transform:translate3d(0,0,46px)}
.products-panels .product-img img{transform:rotate(-7deg) scale(1.04) translate3d(0,0,10px)}
.products-panels .product-card:hover .product-img img{transform:rotate(-3deg) scale(1.12) translate3d(0,0,68px);filter:drop-shadow(0 46px 52px rgba(0,0,0,.5))}
.products-panels .product-card:nth-child(4n+2):hover .product-card-inner{box-shadow:0 34px 70px -26px rgba(255,240,32,.5),0 0 0 1px rgba(20,8,32,.1)}
.products-panels .product-card:nth-child(4n+3):hover .product-card-inner{box-shadow:0 34px 70px -26px rgba(96,32,128,.45),0 0 0 1px rgba(20,8,32,.08)}
@media (prefers-reduced-motion:reduce){.products-panels .product-card,.products-panels .product-card *{transition:none!important}}

/* =====================================================
   PANELES QUE GIRAN — ficha técnica al reverso
   ===================================================== */
.products-panels .product-card.is-flippable{cursor:pointer;outline:none}
.products-panels .product-card.is-flippable:focus-visible .product-card-inner{box-shadow:0 0 0 3px var(--red-400)}
.products-panels .is-flippable .product-card-inner{background:none;padding:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.455,.03,.515,.955),box-shadow .5s}
.products-panels .is-flippable:hover .product-card-inner{transform:translateZ(0) rotateY(0)}
.products-panels .is-flippable.is-flipped .product-card-inner{transform:translateZ(46px) rotateY(180deg)}
.products-panels .is-flippable.is-flipped:hover .product-card-inner{transform:translateZ(46px) rotateY(180deg)}
.pface{position:absolute;inset:0;border-radius:inherit;padding:clamp(22px,2.2vw,32px);background:var(--panel);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.pface-front{display:grid;grid-template-rows:auto minmax(0,1fr) auto;row-gap:12px}
.pface-front::after{content:"";position:absolute;inset:auto -10% -22% -10%;height:62%;background:radial-gradient(60% 100% at 50% 100%,rgba(0,0,0,.22),transparent 70%);pointer-events:none}
.pface-back{transform:rotateY(180deg);display:flex;flex-direction:column;gap:12px;color:var(--panel-ink)}
.pback-lbl{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--panel-dim)}
.pback-name{font-family:var(--f-serif);font-size:clamp(20px,1.7vw,26px);font-weight:400;line-height:1.08;letter-spacing:-.02em;margin:0}
.pback-specs{margin:2px 0 0;display:flex;flex-direction:column;gap:9px;flex:1 1 auto;min-height:0;overflow:hidden}
.pback-specs>div{display:flex;flex-direction:column;gap:2px;padding-bottom:9px;border-bottom:1px solid color-mix(in oklab,var(--panel-ink) 14%,transparent)}
.pback-specs>div:last-child{border-bottom:none}
.pback-specs dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--panel-dim)}
.pback-specs dd{margin:0;font-size:13px;line-height:1.35}
.pback-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pback-go{display:inline-flex;align-items:center;gap:8px;font-size:13px;text-decoration:none;color:var(--panel-ink);border-bottom:1px solid color-mix(in oklab,var(--panel-ink) 32%,transparent);padding-bottom:2px}
.pback-go .arrow{transition:transform .25s}
.pback-go:hover .arrow{transform:translateX(4px)}
.pback-close{font-family:var(--f-sans);font-size:11.5px;padding:7px 13px;border:1px solid color-mix(in oklab,var(--panel-ink) 26%,transparent);border-radius:100px;background:none;color:var(--panel-ink);cursor:pointer;transition:background .2s}
.pback-close:hover{background:color-mix(in oklab,var(--panel-ink) 12%,transparent)}
@media (prefers-reduced-motion:reduce){.products-panels .is-flippable .product-card-inner{transition:none}}

/* overflow:hidden aplana el 3D — las caras recortan, el contenedor no */
.products-panels .product-card.is-flippable{overflow:visible}
.products-panels .is-flippable .product-card-inner{overflow:visible;background:none}
.products-panels .is-flippable .product-card-inner::after{display:none}
.pface{isolation:isolate}

/* volver al catálogo, en las páginas de producto */
.pdp-back{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;padding:9px 16px 9px 13px;border:1px solid color-mix(in oklab,var(--navy-800) 18%,transparent);border-radius:100px;font-family:var(--f-sans);font-size:13px;color:var(--navy-800);text-decoration:none;transition:background .2s,border-color .2s}
.pdp-back:hover{background:color-mix(in oklab,var(--navy-800) 8%,transparent);border-color:color-mix(in oklab,var(--navy-800) 34%,transparent)}
.pdp-back-arrow{transition:transform .25s}
.pdp-back:hover .pdp-back-arrow{transform:translateX(-3px)}
.crumbs{margin-bottom:30px}

/* realce breve del panel al regresar de su página */
.products-panels .product-card.is-vuelto .product-card-inner{box-shadow:0 0 0 3px var(--red-400),0 30px 60px -24px rgba(12,8,24,.5)}

/* miniaturas con foto real en las páginas de producto */
.pdp-thumb-photo{border-style:solid;border-color:rgba(10,20,40,.08);padding:10px;overflow:hidden}
.pdp-thumb-photo img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}

/* controles nuevos de la calculadora */
.calc-group-label em{font-style:normal;opacity:.5}
.calc-seg{display:flex;gap:4px;padding:3px;border-radius:100px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);flex:1 1 auto;min-width:0}
.calc-seg label{flex:1 1 0;min-width:0;margin:0;cursor:pointer}
.calc-seg input{position:absolute;opacity:0;width:0;height:0}
.calc-seg span{display:block;text-align:center;padding:8px 6px;border-radius:100px;font-family:var(--f-sans);font-size:12.5px;color:rgba(255,255,255,.62);white-space:nowrap;transition:background .2s,color .2s}
.calc-seg input:checked+span{background:var(--red-400);color:var(--navy-900);font-weight:500}
.calc-seg input:focus-visible+span{outline:2px solid var(--red-400);outline-offset:2px}
.calc-aviso{display:none;margin:0;padding:10px 13px;border-radius:var(--r-sm);background:rgba(255,240,32,.12);border:1px solid rgba(255,240,32,.3);color:#fff;font-size:11.5px;line-height:1.45;letter-spacing:.01em}
.calc-aviso.show{display:block}
.calc-stat-wide{grid-column:1 / -1}

/* ---- foto del producto más grande en los paneles ---- */
.products-panels .product-card-inner{grid-template-rows:auto minmax(0,1.35fr) auto}
.pface-front{grid-template-rows:auto minmax(0,1.35fr) auto}
.products-panels .product-img{margin:0 -14px}
.products-panels .product-img img{width:100%;height:100%;max-width:none;object-fit:contain;transform:rotate(-7deg) scale(1.2) translate3d(0,0,10px)}
.products-panels .product-card:hover .product-img img{transform:rotate(-3deg) scale(1.3) translate3d(0,0,68px)}
.products-panels .product-desc{-webkit-line-clamp:2}

/* ---- móvil: menos peso de pintado y foto más grande ---- */
@media (max-width:900px){
  .products-panels .product-card-inner{aspect-ratio:3/4;grid-template-rows:auto minmax(0,1.5fr) auto}
  .pface-front{grid-template-rows:auto minmax(0,1.5fr) auto}
  .products-panels .product-img img{transform:rotate(-5deg) scale(1.24)}
  .products-panels .product-card:hover .product-img img{transform:rotate(-5deg) scale(1.24)}
  .glass,.glass-dark,.nav-inner,.hero-direct,.hero-stats,.product-card.glass,.hilo-slider,.calc.glass{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .cursor-glow{display:none}
  .grain{display:none}
  .products-panels .product-card,.products-panels .product-card *{transition-duration:.25s}
}

/* el ancla no queda debajo del nav fijo */
:target{scroll-margin-top:150px}
#productos,#corte,#nosotros,#contacto{scroll-margin-top:150px}
@media (max-width:900px){:target,#productos,#corte,#nosotros,#contacto{scroll-margin-top:110px}}

/* =====================================================
   NAV EN MOVIL — barra de contacto fija + menu desplegable
   ===================================================== */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:44px;height:44px;padding:0 11px;margin-left:10px;border:1px solid color-mix(in oklab,var(--navy-800) 18%,transparent);border-radius:100px;background:none;cursor:pointer}
.nav-burger span{display:block;height:1.6px;width:100%;border-radius:2px;background:var(--navy-800);transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .18s}
.nav-abierto .nav-burger span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.nav-abierto .nav-burger span:nth-child(2){opacity:0}
.nav-abierto .nav-burger span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
@media (max-width:900px){
  .topbar{position:fixed;top:0;left:0;right:0;z-index:102}
  .topbar-inner{height:34px;padding:0;flex-wrap:nowrap;gap:0;justify-content:center;font-size:11.5px;width:94vw}
  .topbar-inner a:nth-child(2),.topbar-inner span:last-child{display:none}
  .topbar-inner .topbar-lbl{display:inline;font-size:8.5px;margin-right:6px}
  .nav{top:34px}
  .nav-inner{height:68px!important;padding:0 12px 0 8px}
  .brand-logo{width:46px;height:46px;flex:0 0 46px}
  .brand-name{font-size:17px}
  .brand-sub{font-size:9px}
  .nav-burger{display:flex}
  .nav-inner .btn-ghost{margin-left:auto;padding:9px 14px;font-size:13px}
  .nav-links{position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:0;padding:6px;border-radius:var(--r-lg);background:var(--cream);border:1px solid color-mix(in oklab,var(--navy-800) 12%,transparent);box-shadow:0 26px 60px -22px rgba(12,8,24,.4);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s,transform .28s cubic-bezier(.2,.8,.2,1),visibility .22s}
  .nav-abierto .nav-links{opacity:1;visibility:visible;transform:none}
  .nav-links a{padding:14px 16px;border-radius:var(--r-sm);font-size:15px;min-height:48px;display:flex;align-items:center}
  .nav-links a+a{border-top:1px solid color-mix(in oklab,var(--navy-800) 9%,transparent)}
  .hilo-first{padding:146px 0 108px}
  .pdp{padding:132px 0 0}
  :target,#productos,#corte,#nosotros,#contacto{scroll-margin-top:118px}
  .products-panels .product-card-inner,.pface-front{grid-template-rows:auto minmax(0,2fr) auto}
  .products-panels .product-img{margin:0 -20px}
  .products-panels .product-img img{transform:rotate(-5deg) scale(1.38)}
  .products-panels .product-card:hover .product-img img{transform:rotate(-5deg) scale(1.38)}
  .products-panels .product-name{font-size:clamp(22px,6vw,28px)}
  .products-panels .product-specs{font-size:10px}
}
@media (max-width:420px){
  .topbar-inner .topbar-lbl{display:none}
  .brand-sub{display:none}
}

#calculadora{scroll-margin-top:150px}
@media (max-width:900px){#calculadora{scroll-margin-top:118px}}

/* ---- panel de menu movil (fuera de la pildora) ---- */
.nav-velo{position:fixed;inset:0;z-index:150;background:rgba(12,6,24,.5);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.nav-abierto .nav-velo{opacity:1;visibility:visible}
.nav-panel{position:fixed;z-index:151;left:4vw;right:4vw;top:112px;padding:10px;border-radius:var(--r-lg);background:var(--cream);border:1px solid color-mix(in oklab,var(--navy-800) 12%,transparent);box-shadow:0 30px 70px -20px rgba(12,8,24,.5);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1),visibility .22s;max-height:calc(100vh - 130px);overflow-y:auto}
.nav-abierto .nav-panel{opacity:1;visibility:visible;transform:none}
.nav-panel-links{display:flex;flex-direction:column}
.nav-panel-links a{display:flex;align-items:center;min-height:52px;padding:0 14px;border-radius:var(--r-sm);font-family:var(--f-sans);font-size:16px;color:var(--navy-800);text-decoration:none}
.nav-panel-links a+a{border-top:1px solid color-mix(in oklab,var(--navy-800) 9%,transparent)}
.nav-panel-links a:active{background:color-mix(in oklab,var(--navy-800) 8%,transparent)}
.nav-panel-datos{display:flex;flex-direction:column;gap:12px;margin-top:10px;padding:14px;border-radius:var(--r-md);background:color-mix(in oklab,var(--navy-800) 6%,transparent)}
.nav-panel-datos a,.nav-panel-datos span{display:flex;flex-direction:column;gap:3px;font-family:var(--f-sans);font-size:13.5px;line-height:1.35;color:var(--navy-800);text-decoration:none;word-break:break-word}
.nav-panel-datos .mono{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (min-width:901px){.nav-panel,.nav-velo{display:none}}

/* ---- calculadora: una columna en movil, sin desborde ---- */
.calc,.calc-form,.calc-group,.calc-row,.calc-visual,.calc-input,.calc-seg{min-width:0}
@media (max-width:900px){
  .calc{grid-template-columns:minmax(0,1fr);padding:22px 18px}
  .calc-row{grid-template-columns:minmax(0,1fr);gap:14px}
  .calc-seg span{font-size:12px;padding:9px 4px}
  .calc-stats{grid-template-columns:minmax(0,1fr)}
  .calc-actions{gap:12px}
  .calc-actions .btn-primary,.calc-reset{width:100%;justify-content:center}
  .calc-wrap{margin-top:56px}
}
@media (max-width:420px){.nav-panel{top:104px}}

/* ---- galeria de la ficha: miniatura elegida ---- */
.pdp-shot img{transition:opacity .18s ease}
.pdp-shot img.cambiando{opacity:0}
.pdp-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}
button.pdp-thumb{font:inherit;color:inherit;cursor:pointer}
.pdp-thumb-photo{cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.pdp-thumb-photo:hover{border-color:color-mix(in oklab,var(--navy-800) 32%,transparent);transform:translateY(-2px)}
.pdp-thumb-photo.is-activa{border-color:var(--navy-800);box-shadow:0 0 0 2px color-mix(in oklab,var(--navy-800) 26%,transparent)}
.pdp-thumb-photo:focus-visible{outline:2px solid var(--navy-800);outline-offset:2px}
@media (max-width:640px){.pdp-thumbs{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}


/* ---- ajustes 2026-09-17f ---- */
/* destino de los enlaces de ancla: no queda debajo de la barra fija */
#productos,#corte,#calculadora,#nosotros,#contacto{scroll-margin-top:96px}
@media (max-width:900px){#productos,#corte,#calculadora,#nosotros,#contacto{scroll-margin-top:84px}}

/* calculadora: mas aire entre textos y bordes */
.calc{padding:48px}
@media (max-width:900px){.calc{padding:32px 26px}.calc-wrap .calc-head{padding-right:6px}}
@media (max-width:560px){.calc{padding:28px 22px}.calc-canvas-wrap{padding:16px}.calc-stat{padding:12px 16px}}

/* tarjeta volteada: mismas dimensiones que la cara frontal */
.products-panels .is-flippable.is-flipped .product-card-inner,
.products-panels .is-flippable.is-flipped:hover .product-card-inner{transform:rotateY(180deg)}

/* en tactil el hover se queda pegado: la foto conserva su posicion base */
.products-panels .product-img img{--pimg-t:rotate(-7deg) scale(1.04) translate3d(0,0,10px)}
@media (max-width:900px){.products-panels .product-img img{--pimg-t:rotate(-5deg) scale(1.24)}}
@media (max-width:560px){.products-panels .product-img img{--pimg-t:rotate(-5deg) scale(1.38)}}
@media (hover:none){
  .products-panels .product-img img,
  .products-panels .product-card:hover .product-img img{transform:var(--pimg-t)!important;filter:drop-shadow(0 30px 40px rgba(0,0,0,.42))!important}
  .product-card:hover .product-img-photo img{transform:none}
  .products-panels .product-card:hover .product-card-inner{box-shadow:0 0 0 1px rgba(20,8,32,.08)}
}
.products-foot{display:flex;flex-direction:column;align-items:center;gap:0}


/* ---- ajustes 2026-09-17g ---- */
/* barra superior: la marca en una sola linea y menos aire entre piezas */
.brand-name{white-space:nowrap}
.brand-text{min-width:0}
@media (max-width:900px){
  .nav-inner{gap:10px;padding:8px 10px 8px 12px}
  .brand{gap:9px;min-width:0}
  .brand-logo{width:46px;height:46px;flex:0 0 46px}
  .brand-name{font-size:17px;line-height:1.05}
  .brand-sub{font-size:9px}
  .nav-inner .btn-ghost{padding:9px 14px;font-size:13px;white-space:nowrap}
  .nav-burger{margin-left:2px}
}
@media (max-width:380px){
  .nav-inner .btn-ghost span{display:none}
  .nav-inner .btn-ghost{padding:10px}
}

/* pie: columnas iguales en movil */
@media (max-width:900px){.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.footer-cols>div{min-width:0}}

/* slider en movil: transicion entre imagenes y foto mas grande */
@media (max-width:900px){
  .hilo-slide.is-on{animation:hiloEntra .6s cubic-bezier(.2,.8,.2,1) both}
  .hilo-shot{height:clamp(260px,62vw,420px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
  .hilo-shot img{max-width:none;width:auto}
  .hilo-copy{transition:opacity .5s .08s ease,transform .6s .08s cubic-bezier(.2,.8,.2,1)}
}
@keyframes hiloEntra{from{opacity:0;transform:translate3d(24px,0,0)}to{opacity:1;transform:none}}


/* ---- corte: una sola columna, sin la ilustracion decorativa ---- */
.corte-inner{grid-template-columns:minmax(0,1fr)}
.corte-left{max-width:760px}


/* ---- corte: los contenedores internos se miden contra .corte, no contra el viewport ---- */
.corte>.container{width:min(1320px,100%);margin-inline:auto;padding-inline:clamp(16px,3vw,28px);box-sizing:border-box}


/* ---- sucursales ---- */
.sucursales{position:relative;padding:clamp(72px,9vw,128px) 0;background:var(--cream)}
.suc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:18px;margin-top:48px}
.suc{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--r-md);background:var(--cream-2);border:1px solid color-mix(in oklab,var(--navy-800) 10%,transparent)}
.suc-name{font-family:var(--f-serif);font-size:clamp(21px,1.7vw,26px);font-weight:400;letter-spacing:-.02em;line-height:1.1;margin:0;color:var(--navy-800)}
.suc-dir{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.suc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:auto;padding-top:14px;border-top:1px solid color-mix(in oklab,var(--navy-800) 10%,transparent)}
.suc-cp{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.suc-tels{display:flex;flex-wrap:wrap;gap:4px 14px}
.suc-tels a{font-size:12.5px;letter-spacing:.04em;color:var(--navy-800);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--navy-800) 25%,transparent)}
.suc-tels a:hover{color:var(--plum,#602080);border-bottom-color:currentColor}
@media (max-width:560px){.sucursales{padding:64px 0}.suc{padding:22px}.suc-grid{gap:14px;margin-top:32px}}
.suc-mail{font-size:11.5px;letter-spacing:.04em;color:var(--navy-800);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--navy-800) 25%,transparent);align-self:flex-start;word-break:break-all}
.suc-mail:hover{border-bottom-color:currentColor}

/* ---- calculadora: los campos no desbordan su columna ---- */
.calc-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.calc-form label,.calc-input,.calc-input input,.calc-visual,.calc-stats{min-width:0}

/* ---- contacto: el formulario no se desborda en movil ---- */
.contacto,.contacto-inner,.contacto-head,.contacto-form{min-width:0;max-width:100%}
.contacto-form,.contacto-form label,.form-row,.form-full,.form-foot,.form-direct{min-width:0;box-sizing:border-box}
.form-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.contacto-form input,.contacto-form select,.contacto-form textarea{width:100%;max-width:100%;box-sizing:border-box;text-overflow:ellipsis}
.form-direct a{word-break:break-word}
@media (max-width:900px){.form-row{grid-template-columns:minmax(0,1fr)}.contacto-inner{grid-template-columns:minmax(0,1fr)}}

/* ---- slider movil: las flechas y los puntos no encimen el boton ---- */
@media (max-width:900px){.hilo{padding:64px 0 116px}.hilo-arrow{bottom:26px;z-index:6}.hilo-dots{bottom:38px}}
@media (max-width:560px){.hilo{padding:56px 0 112px}}

/* ---- slider movil: la foto arranca debajo de la barra ---- */
@media (max-width:900px){.hilo{padding-top:132px}}
@media (max-width:560px){.hilo{padding-top:126px}}
.corte-left .section-lede-light{margin-bottom:38px}
.stat-frase{flex:1 1 auto;display:flex;align-items:center;min-width:0}
.stat-frase-txt{font-family:var(--f-serif);font-weight:400;font-size:clamp(20px,2.2vw,30px);line-height:1.15;letter-spacing:-.02em;color:var(--navy-800);text-wrap:balance}
@media (max-width:900px){.stat-frase{flex:1 1 100%;justify-content:flex-start}}

/* ---- tarjetas de marca: giro con lista de articulos ---- */
.marca.is-marca-flip{padding:0;background:transparent;border:0;box-shadow:none;perspective:1000px;overflow:visible;cursor:pointer}
.marca.is-marca-flip:hover{transform:translateY(-4px);background:transparent;box-shadow:none}
.marca-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.marca.is-flipped .marca-inner{transform:rotateY(180deg)}
.mface{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:var(--r-md);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-sizing:border-box;padding:20px}
.mface-front{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .3s,box-shadow .3s}
.marca.is-marca-flip:hover .mface-front{background:rgba(255,255,255,.85);box-shadow:0 16px 40px -12px rgba(96,32,128,.35)}
.mface-front>span:first-child{font-family:var(--f-serif);font-size:28px;letter-spacing:-.02em;color:var(--navy-800)}
.mface-front .mono{color:var(--muted)}
.mface-back{transform:rotateY(180deg);background:var(--navy-800);color:#fff;align-items:flex-start;justify-content:flex-start;gap:10px;overflow:auto}
.mback-name{margin:0;font-family:var(--f-serif);font-weight:400;font-size:19px;letter-spacing:-.02em;line-height:1.1}
.mback-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%}
.mback-list li{font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.82);padding-left:14px;position:relative;text-wrap:pretty}
.mback-list li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:1px;background:var(--red-400)}
@media (max-width:500px){.mface{padding:16px}.mface-front>span:first-child{font-size:23px}.mback-name{font-size:17px}.mback-list li{font-size:12.5px}}
.brand-sub{max-width:190px;line-height:1.25;letter-spacing:.1em}
@media (max-width:1100px){.nav .brand-sub{display:none}}
.footer .brand-sub{max-width:240px}

/* ---- abanico de hojas ---- */
.abanico{position:absolute;inset:0;display:block}
.ab-capa{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s;transform-origin:50% 85%}
.ab-1{z-index:4}.ab-2{z-index:3}.ab-3{z-index:2}.ab-4{z-index:1}
.product-card:hover .ab-1,.product-card.is-abanico .ab-1{transform:translate(9%,-4%) rotate(7deg)}
.product-card:hover .ab-2,.product-card.is-abanico .ab-2{transform:translate(3%,-1.5%) rotate(2.5deg)}
.product-card:hover .ab-3,.product-card.is-abanico .ab-3{transform:translate(-3%,.5%) rotate(-2.5deg)}
.product-card:hover .ab-4,.product-card.is-abanico .ab-4{transform:translate(-9%,2.5%) rotate(-7deg)}
.product-card:hover .ab-capa{filter:drop-shadow(0 18px 16px rgba(0,0,0,.2))}
.product-img-photo[data-abanico]{overflow:visible}
@media (hover:none){.product-card .ab-1{transform:translate(6%,-3%) rotate(5deg)}.product-card .ab-2{transform:translate(2%,-1%) rotate(1.8deg)}.product-card .ab-3{transform:translate(-2%,.4%) rotate(-1.8deg)}.product-card .ab-4{transform:translate(-6%,2%) rotate(-5deg)}}

/* ---- abanico: gana sobre los efectos de la tarjeta ---- */
.products-panels .product-img-photo[data-abanico] img.ab-capa,
.products-panels .product-card:hover .product-img-photo[data-abanico] img.ab-capa{transform:none;filter:none}
.products-panels .product-card:hover .product-img-photo[data-abanico] img.ab-1{transform:translate(9%,-4%) rotate(7deg)}
.products-panels .product-card:hover .product-img-photo[data-abanico] img.ab-2{transform:translate(3%,-1.5%) rotate(2.5deg)}
.products-panels .product-card:hover .product-img-photo[data-abanico] img.ab-3{transform:translate(-3%,.5%) rotate(-2.5deg)}
.products-panels .product-card:hover .product-img-photo[data-abanico] img.ab-4{transform:translate(-9%,2.5%) rotate(-7deg)}
.products-panels .product-card:hover .product-img-photo[data-abanico] img.ab-capa{filter:drop-shadow(0 18px 16px rgba(0,0,0,.2))}
@media (hover:none){
  .products-panels .product-img-photo[data-abanico] img.ab-capa,
  .products-panels .product-card:hover .product-img-photo[data-abanico] img.ab-capa{transform:none!important;filter:none!important}
  .products-panels .product-img-photo[data-abanico] img.ab-1{transform:translate(6%,-3%) rotate(5deg)!important}
  .products-panels .product-img-photo[data-abanico] img.ab-2{transform:translate(2%,-1%) rotate(1.8deg)!important}
  .products-panels .product-img-photo[data-abanico] img.ab-3{transform:translate(-2%,.4%) rotate(-1.8deg)!important}
  .products-panels .product-img-photo[data-abanico] img.ab-4{transform:translate(-6%,2%) rotate(-5deg)!important}
}

.pdp-list{display:grid;gap:11px;margin:20px 0 0;padding:0;list-style:none}
.pdp-list li{position:relative;padding-left:24px;line-height:1.55;font-size:15.5px}
.pdp-list li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--pur,#602080);opacity:.75}

.pdp-nota{margin:14px 0 0;font-size:12.5px;letter-spacing:.04em;opacity:.72}

.products-panels .product-card.es-tocable{cursor:pointer;-webkit-tap-highlight-color:rgba(96,32,128,.12)}
.products-panels .product-card.es-tocable:active .product-card-inner{transform:scale(.988)}
/* enlace estirado: toda la tarjeta navega en celular. Va detras del CTA, que
   queda adelante por su translate3d en Z, asi que el CTA sigue siendo enlace. */
.products-panels .product-card .card-tap{position:absolute;inset:0;z-index:1;display:block;border-radius:inherit;font-size:0;line-height:0;color:transparent;text-decoration:none}
/* En celular el CTA se esconde: la tarjeta entera ya es el enlace, y el texto
   "Ver variantes de..." no corresponde, no hay variantes que mostrar ahi.
   La foto y el texto dejan de recibir el toque para que lo reciba el enlace. */
@media (max-width:900px){
  .products-panels .product-card .card-tap{z-index:6;transform:translate3d(0,0,80px)}
  .products-panels .product-card.es-tocable .product-card-cta{display:none}
  .products-panels .product-card.es-tocable .product-img,
  .products-panels .product-card.es-tocable .product-img img,
  .products-panels .product-card.es-tocable .product-meta{pointer-events:none}
}