/* Poppins self-hosted (latin + latin-ext) */
@font-face{font-family:'Poppins';font-style:normal;font-weight:200;font-display:swap;src:url(../assets/fonts/poppins-200-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:200;font-display:swap;src:url(../assets/fonts/poppins-200-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../assets/fonts/poppins-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../assets/fonts/poppins-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/poppins-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/poppins-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Hebe's — A confiança é projetada · produção (sem empacotador)
   Fontes: Poppins via Google Fonts (link no index.html).
   Para self-host: baixe os .woff2 (pesos 200–600), coloque em assets/fonts/
   e substitua o <link> por @font-face aqui. */

:root {
  --navy: #0A1733;
  --ink-2: #5A6478;
  --ink-3: #8B93A5;
  --teal: #3FA8A1;
  --teal-l: #7ED8D2;
  --silver: #AAB2BE;
  --blue: #6E93C4;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: #fff; color: var(--navy); font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--navy); text-decoration: none; }
img { max-width: none; }
button { font-family: inherit; }
::selection { background: rgba(10,23,51,0.9); color: #fff; }

@keyframes logoBreathe { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(63,168,161,0)); } 50% { transform: scale(1.035); filter: drop-shadow(0 6px 22px rgba(63,168,161,0.35)); } }
@keyframes overlayIn { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@keyframes breatheGlow { 0%,100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.06); } }
@keyframes blobFill { 0%,100% { border-radius: 46% 54% 52% 48% / 48% 46% 54% 52%; } 33% { border-radius: 58% 42% 44% 56% / 42% 58% 42% 58%; } 66% { border-radius: 42% 58% 60% 40% / 56% 40% 60% 44%; } }
@keyframes blobLift { 0%,100% { border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%; } 50% { border-radius: 54% 46% 46% 54% / 46% 54% 46% 54%; } }
@keyframes blobDeep { 0%,100% { border-radius: 50% 50% 48% 52% / 51% 49% 51% 49%; } 50% { border-radius: 51% 49% 50% 50% / 49% 51% 49% 51%; } }

/* ===== Ato 0 — Hero ===== */
.hero { height: 100vh; position: relative; background: #fff; }
.hero-inner { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; position: relative; background: radial-gradient(120% 90% at 50% 32%, #ffffff 0%, #F4F6FA 100%); }
.hero-logo { height: 64px; opacity: 0; margin-bottom: 7vh; animation: logoBreathe 5s ease-in-out 0.6s 1 both; will-change: transform, filter; }
.hero-sigline { pointer-events: none; position: absolute; left: 50%; bottom: 8vh; width: 1px; height: 10vh; background: linear-gradient(180deg, rgba(126,216,210,0), rgba(126,216,210,0.8), rgba(126,216,210,0)); opacity: 0; }
.hero-title { margin: 0; padding: 0 32px; text-align: center; font-size: clamp(30px, 4vw, 56px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.3; color: transparent; background-image: linear-gradient(100deg, #0A1733 42%, #E6EBF2 58%); background-size: 280% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; }
.hero-sub { margin: 4vh 0 0; padding: 0 32px; max-width: 560px; text-align: center; font-size: clamp(15px, 1.3vw, 18px); font-weight: 300; color: var(--ink-2); line-height: 1.7; opacity: 0; }
.hero-cta { position: relative; z-index: 5; cursor: pointer; margin-top: 5vh; display: inline-flex; align-items: center; gap: 10px; padding: 14px 34px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 400; letter-spacing: 0.04em; opacity: 0; transition: background 180ms ease; border: none; }
.hero-cta:hover { background: #1C2A48; color: #fff; }
.hero-cta .arrow { font-size: 16px; line-height: 1; }
.hero-glass { position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; background: linear-gradient(180deg, rgba(210,222,238,0) 0%, rgba(210,222,238,0.5) 100%); opacity: 0; pointer-events: none; }

/* ===== Engenharia ===== */
.eng { background: #fff; padding: 3vw; }
.eng-card { background: linear-gradient(140deg, #0E1830 0%, #05080F 65%); border-radius: 34px; position: relative; overflow: hidden; min-height: 92vh; display: grid; grid-template-columns: minmax(360px, 480px) 1fr; will-change: transform; }
.eng-left { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 10vh 0 10vh 4.5vw; }
.eng-kicker { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: #66738F; }
.eng-title { margin: 0 0 18px; max-width: 380px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; color: #fff; }

.switcher { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 12px 22px 12px 16px; width: fit-content; margin-bottom: 14px; }
.dots { display: flex; gap: 12px; align-items: center; }
.dot { width: 14px; height: 14px; border-radius: 50%; border: none; cursor: pointer; padding: 0; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color 150ms ease; }
.dot--fill { background: var(--teal); }
.dot--lift { background: #C7CDD6; }
.dot--lift2 { background: #9AA3B0; }
.dot--deep { background: var(--blue); }
.switcher .dot.is-active { outline-color: rgba(255,255,255,0.9); }
.switcher-label { font-size: 14px; font-weight: 400; color: #fff; white-space: nowrap; }

#pills { display: flex; flex-direction: column; gap: 14px; }
.pill { width: fit-content; max-width: 430px; }
.pill-closed { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 12px 24px 12px 13px; cursor: pointer; transition: background 160ms ease; }
.pill-closed:hover { background: rgba(255,255,255,0.13); }
.pill-plus { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 300; line-height: 1; }
.pill-name { font-size: 15px; font-weight: 500; color: #fff; }
.pill-open { display: none; text-align: left; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.12); border-radius: 26px; padding: 20px 26px; cursor: pointer; max-width: 430px; }
.pill-open span { display: block; font-size: 15px; line-height: 1.65; font-weight: 300; color: #C6CDDC; }
.pill-open strong { color: #fff; font-weight: 500; }
.pill.is-open .pill-closed { display: none; }
.pill.is-open .pill-open { display: block; }

.eng-stage { position: relative; overflow: hidden; }
.stage-glow { position: absolute; right: -15%; top: 50%; width: 85%; height: 130%; transform: translateY(-50%); background: radial-gradient(45% 45% at 55% 50%, rgba(130,155,200,0.22), rgba(130,155,200,0) 70%); }
.eng-syringe { position: absolute; right: 6%; top: 50%; height: 92%; width: auto; transform: translateY(-50%) rotate(24deg); filter: drop-shadow(-30px 40px 60px rgba(0,0,0,0.6)); }

/* Overlays (agulhas / pureza) */
.overlay { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 3; padding: 4vh 3vw; }
.overlay.is-visible { display: flex; animation: overlayIn 700ms ease both; }
.overlay-needles { gap: 3.5vh; }
.needles-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 3vw; align-items: end; width: min(620px, 94%); }
.needle-col { text-align: center; }
.needle-svg { height: 38vh; width: auto; filter: drop-shadow(-10px 18px 26px rgba(0,0,0,0.55)); }
.needle-name { margin: 16px 0 2px; font-size: 15px; font-weight: 500; color: #8B96AE; }
.needle-name--tw { color: #fff; }
.needle-spec { margin: 0; font-size: 13px; font-weight: 300; color: #66738F; white-space: nowrap; }
.needle-spec--tw { color: var(--teal-l); }
.tw-badge { width: 74px; height: 74px; margin-bottom: 8vh; border-radius: 50%; border: 1px solid rgba(126,216,210,0.5); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tw-badge b { font-size: 16px; font-weight: 600; color: var(--teal-l); }
.tw-badge small { font-size: 8px; letter-spacing: 0.06em; color: #8B96AE; text-align: center; line-height: 1.3; }
.overlay-caption { margin: 0; max-width: 480px; text-align: center; font-size: 13.5px; font-weight: 300; color: #8B96AE; line-height: 1.6; }

.overlay-purity { gap: 4vh; }
.orb-wrap { position: relative; width: 32vh; height: 32vh; display: flex; align-items: center; justify-content: center; }
/* Cores do orbe seguem o produto selecionado (variáveis trocadas via JS) */
.orb-glow { position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(circle, var(--orb-glow, rgba(126,216,210,0.20)), rgba(126,216,210,0) 65%); filter: blur(20px); animation: breatheGlow 6s ease-in-out infinite; }
.orb { width: 100%; height: 100%; background: radial-gradient(circle at 36% 30%, rgba(255,255,255,0.9), var(--orb-mid, rgba(126,216,210,0.4)) 55%, var(--orb-edge, rgba(63,168,161,0.22)) 100%); box-shadow: inset 0 0 60px rgba(255,255,255,0.25), 0 30px 80px var(--orb-shadow, rgba(63,168,161,0.25)); animation: blobFill 7s ease-in-out infinite; transition: background 600ms ease, box-shadow 600ms ease; }
.purity-title { margin: 0 0 8px; font-size: 16px; font-weight: 500; color: #fff; }
.purity-text { margin: 0; max-width: 440px; font-size: 13.5px; font-weight: 300; color: #8B96AE; line-height: 1.65; text-align: center; }

/* BOOM layer */
.boom { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; }
.boom-cover { position: absolute; inset: 0; background: linear-gradient(140deg, #0E1830 0%, #05080F 65%); }
.boom-word { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; text-align: center; font-size: clamp(54px, 9vw, 150px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: #fff; opacity: 0; user-select: none; }
.boom-impact { position: absolute; left: 50%; top: 50%; width: 110vmin; height: 110vmin; margin: -55vmin 0 0 -55vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(126,216,210,0.35) 30%, rgba(126,216,210,0) 62%); opacity: 0; }
.boom-shock { position: absolute; left: 50%; top: 50%; width: 40vmin; height: 40vmin; margin: -20vmin 0 0 -20vmin; border-radius: 50%; border: 1px solid rgba(126,216,210,0.65); opacity: 0; }
.boom-shock--b { border: 2px solid rgba(255,255,255,0.35); }
.boom-syr { position: absolute; top: 50%; opacity: 0; will-change: transform, opacity; filter: drop-shadow(-18px 26px 40px rgba(0,0,0,0.55)); }
.boom-syr.s0 { left: 8%; height: 58%; transform: translateY(-50%) rotate(-16deg); }
.boom-syr.s1 { left: 27%; height: 58%; transform: translateY(-50%) rotate(-6deg); }
.boom-syr.s3 { left: 66%; height: 58%; transform: translateY(-50%) rotate(14deg); }
.boom-syr.s2 { right: 6%; height: 92%; transform: translateY(-50%) rotate(24deg); }

/* ===== Divisores ===== */
.div-dark-to-light { height: 26vh; background: linear-gradient(180deg, #05080F 0%, #131A28 10%, #2B3446 24%, #4E5869 40%, #7A8494 56%, #A7B0BE 70%, #CDD4DE 82%, #E7ECF2 92%, #F6F8FA 100%); }
.div-dark { height: 14vh; background: var(--navy); }
.div-navy-to-white { height: 26vh; background: linear-gradient(180deg, #0A1733 0%, #1C2A48 12%, #38465F 26%, #5D6A80 42%, #8791A3 58%, #B2BAC7 72%, #D8DDE6 84%, #F2F4F8 94%, #FFFFFF 100%); }

/* ===== Lidocaína ===== */
.comfort { background: #F6F8FA; padding: 16vh 0 0; overflow: hidden; }
.comfort-title { margin: 0 auto; max-width: 640px; padding: 0 24px; text-align: center; font-size: clamp(26px, 3vw, 42px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.25; }
.comfort-sub { margin: 3vh auto 0; max-width: 480px; padding: 0 24px; text-align: center; font-size: 15px; font-weight: 300; color: var(--ink-2); line-height: 1.75; }
.waves { position: relative; height: 22vh; margin-top: 6vh; }
.waves svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ===== Reologia ===== */
.rheo { background: var(--navy); color: #fff; padding: 20vh 0 16vh; }
.rheo-inner { width: min(1200px, 92vw); margin: 0 auto; }
.rheo-title { margin: 0 auto 3vh; max-width: 760px; text-align: center; font-size: clamp(28px, 3.4vw, 48px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.25; }
.rheo-hint { margin: 0 auto 10vh; text-align: center; font-size: 14px; font-weight: 300; color: #7C89A6; }
.rheo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; }
.blob-cell { text-align: center; }
.blob-stage { height: 240px; display: flex; align-items: center; justify-content: center; }
.blob { width: 170px; height: 170px; cursor: grab; touch-action: none; will-change: transform; }
.blob--fill { background: radial-gradient(circle at 38% 32%, #7ED8D2, #3FA8A1 70%); box-shadow: 0 30px 70px rgba(63,168,161,0.35); animation: blobFill 3.4s ease-in-out infinite; }
.blob--lift { background: radial-gradient(circle at 38% 32%, #E8EBF0, #AAB2BE 70%); box-shadow: 0 30px 70px rgba(170,178,190,0.3); animation: blobLift 6.5s ease-in-out infinite; }
.blob--deep { background: radial-gradient(circle at 38% 32%, #A9C4E8, #6E93C4 70%); box-shadow: 0 30px 70px rgba(110,147,196,0.35); animation: blobDeep 10s ease-in-out infinite; }
.rheo-label { opacity: 0; }
.rheo-label h4 { margin: 34px 0 6px; font-size: 24px; font-weight: 400; }
.rheo-label p { margin: 0; font-size: 14px; font-weight: 300; color: #AEB8CC; }
.rheo-explain { margin: 10vh auto 0; max-width: 620px; text-align: center; font-size: 16px; font-weight: 300; color: #AEB8CC; line-height: 1.8; opacity: 0; }

/* ===== Portfólio ===== */
.portfolio { background: radial-gradient(140% 100% at 50% 0%, #ffffff 55%, #F5F7FA 100%); padding: 12vh 0 6vh; }
.sigline-v { width: 1px; height: 9vh; margin: 0 auto 5vh; background: linear-gradient(180deg, rgba(126,216,210,0), rgba(63,168,161,0.7), rgba(126,216,210,0)); }
.portfolio-title { margin: 0 auto 4vh; max-width: 640px; padding: 0 24px; text-align: center; font-size: clamp(28px, 3.2vw, 44px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.25; }
.portfolio-sub { margin: 0 auto 16vh; max-width: 460px; padding: 0 24px; text-align: center; font-size: 15px; font-weight: 300; color: var(--ink-3); line-height: 1.7; }
.product-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; width: min(1100px, 92vw); margin: 0 auto 18vh; }
.product-img { display: flex; justify-content: center; }
.product-img img { height: 42vh; width: auto; }
.product-row.is-flipped .product-img { order: 2; }
.product-row.is-flipped .product-copy { order: 1; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.p-kicker { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; }
.p-kicker--fill { color: var(--teal); }
.p-kicker--lift { color: #8A93A2; }
.p-kicker--deep { color: var(--blue); }
.product-copy h3 { margin: 0 0 12px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; letter-spacing: -0.01em; }
.product-copy p:last-child { margin: 0; max-width: 380px; font-size: 15px; font-weight: 300; color: var(--ink-2); line-height: 1.75; }

.compare { width: min(880px, 92vw); margin: 0 auto 12vh; }
.compare-kicker { margin: 0 0 6vh; text-align: center; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-3); }
.compare-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; }
.compare-grid > div { padding: 18px 8px; border-bottom: 1px solid #E6EAF0; }
.compare-grid > div:nth-last-child(-n+4) { border-bottom: none; }
.c-head { text-align: center; font-size: 16px; font-weight: 500; }
.c-head--fill { color: var(--teal); }
.c-head--lift { color: #8A93A2; }
.c-head--deep { color: var(--blue); }
.c-row { font-size: 14px; font-weight: 300; color: var(--ink-2); }
.c-dots { text-align: center; font-size: 13px; letter-spacing: 3px; color: var(--navy); }
.c-dots .off { color: #D8DEE8; }
.c-val { text-align: center; font-size: 14px; font-weight: 300; color: var(--navy); }
.compare-note { margin: 4vh 0 0; text-align: center; font-size: 12px; font-weight: 300; color: #B4BCCB; }

/* ===== Final ===== */
.final { height: 100vh; position: relative; }
.final-inner { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(120% 90% at 50% 38%, #ffffff 0%, #F4F6FA 100%); position: relative; }
.final-group { display: flex; align-items: flex-end; justify-content: center; gap: 3.4vw; margin-bottom: 8vh; will-change: transform; }
.final-item { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.final-syr { height: 32vh; width: auto; }
.final-syr--tall { height: 40vh; }
.final-box { position: absolute; bottom: 0; height: 32vh; width: auto; opacity: 0; will-change: transform, opacity; }
.final-box--tall { height: 40vh; }
.final-dim { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(10,23,51,0) 55%, rgba(10,23,51,0.05) 100%); opacity: 0; pointer-events: none; }
.final-sigline { width: 1px; height: 8vh; margin-bottom: 5vh; background: linear-gradient(180deg, rgba(126,216,210,0), rgba(63,168,161,0.7), rgba(126,216,210,0)); opacity: 0; }
.final-phrase { margin: 0 0 5vh; padding: 0 24px; text-align: center; font-size: clamp(24px, 2.8vw, 40px); font-weight: 300; letter-spacing: -0.02em; color: var(--navy); opacity: 0; }
.final-logo { height: 38px; opacity: 0; }
.final-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px 24px; border-top: 1px solid #EDF0F5; display: flex; justify-content: center; }
.final-footer p { margin: 0; font-size: 10px; font-weight: 300; letter-spacing: 0.08em; color: #C9CFDA; }

/* ===== Responsivo básico ===== */
@media (max-width: 900px) {
  .eng-card { grid-template-columns: 1fr; }
  .eng-stage { min-height: 60vh; }
  .rheo-grid { grid-template-columns: 1fr; gap: 8vh; }
  .product-row { grid-template-columns: 1fr; gap: 4vh; text-align: center; }
  .product-row.is-flipped .product-copy { align-items: center; text-align: center; }
  .product-copy p:last-child { max-width: none; }
}