:root {
    --navy:#091b30;
    --navy2:#102e4b;
    --cyan:#16c7da;
    --blue:#0879d9;
    --orange:#ff8b2c;
    --ink:#122d43;
    --light:#f5f9fc
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
    color:var(--ink);
    background:#fff
}
a {
    color:inherit
}
button,input,select,textarea {
    font:inherit
}
button {
    cursor:pointer
}
header {
    position:sticky;
    top:0;
    z-index:30;
    background:#091b30f5;
    backdrop-filter:blur(12px);
    color:#fff;
    border-bottom:1px solid #ffffff1c
}
.nav {
    max-width:1150px;
    margin:auto;
    padding:12px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px
}
.brand {
    text-decoration:none;
    font-size:23px;
    font-weight:900;
    letter-spacing:.4px
}
.brand b {
    color:var(--cyan)
}
nav {
    display:flex;
    align-items:center;
    gap:20px
}
nav a {
    text-decoration:none;
    font-size:14px;
    font-weight:650
}
nav a:hover {
    color:var(--cyan)
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:12px;
    background:var(--cyan);
    color:#062238;
    padding:14px 20px;
    text-decoration:none;
    font-weight:850;
    box-shadow:0 6px 22px #00d3ef25
}
.btn:hover {
    filter:brightness(1.08);
    transform:translateY(-2px)
}
.btn.blue {
    background:var(--blue);
    color:#fff
}
.hero {
    background:radial-gradient(circle at 80% 15%,#175d76 0%,var(--navy) 62%);
    color:#fff;
    padding:68px 20px 80px
}
.wrap {
    max-width:1150px;
    margin:auto
}
.hero-grid {
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:45px;
    align-items:center
}
.eyebrow {
    font-size:12px;
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#0095a8
}
.hero .eyebrow,.dark .eyebrow {
    color:var(--cyan)
}
h1 {
    font-size:clamp(38px,5vw,68px);
    line-height:1.07;
    letter-spacing:-2px;
    margin:15px 0 20px
}
h1 span {
    color:var(--cyan)
}
p {
    line-height:1.65
}
.hero p {
    font-size:18px;
    color:#d5e8ef
}
.hero-logo {
    width:100%;
    max-width:500px;
    display:block;
    margin:auto;
    filter:drop-shadow(0 20px 35px #0007)
}
section {
    padding:75px 20px
}
.section-title {
    font-size:clamp(29px,4vw,43px);
    line-height:1.15;
    letter-spacing:-1px;
    margin:10px 0 15px
}
.lead {
    color:#567081;
    max-width:750px
}
.services {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:30px
}
.service {
    background:var(--light);
    border:1px solid #dbe9f1;
    border-radius:18px;
    padding:23px;
    transition:transform .25s,box-shadow .25s
}
.service:hover {
    transform:translateY(-5px);
    box-shadow:0 16px 35px #123b541b
}
.service .symbol {
    font-size:32px
}
.service h3 {
    margin:15px 0 5px;
    font-size:19px
}
.service p {
    font-size:14px;
    color:#567081;
    margin:0
}
.dark {
    background:var(--navy);
    color:#fff
}
.dark .lead {
    color:#bed3e1
}
.present {
    display:grid;
    grid-template-columns:185px 1fr;
    gap:26px;
    align-items:center;
    background:#fff;
    color:var(--ink);
    padding:16px 24px;
    border-radius:20px;
    box-shadow:0 12px 40px #0001;
    margin:25px 0
}
.present img {
    width:100%;
    max-height:200px;
    object-fit:cover;
    object-position:top;
    border-radius:14px;
    background:#081b30
}
.present p {
    margin:6px 0;
    color:#536a7a
}
.present.reverse {
    grid-template-columns:1fr 185px
}
.present.reverse img {
    order:2
}
.photo-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin:28px 0
}
.photo {
    margin:0;
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 5px 22px #001c3020
}
.photo img {
    width:100%;
    height:260px;
    object-fit:cover;
    display:block
}
.photo figcaption {
    padding:12px 15px;
    color:#314c5f;
    font-size:14px;
    font-weight:700
}
.video-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:30px
}
.video {
    background:#15334c;
    border:1px solid #ffffff21;
    border-radius:16px;
    overflow:hidden
}
.video video {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
    background:#071726
}
.video strong {
    display:block;
    padding:12px 16px;
    font-size:14px
}
.quote-area {
    background:linear-gradient(180deg,#f4f9fc,#fff)
}
.quote-layout {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:38px;
    align-items:start
}
.quote-mascots {
    display:flex;
    gap:12px;
    margin-top:22px
}
.quote-mascots img {
    width:48%;
    height:180px;
    object-fit:cover;
    object-position:top;
    border-radius:18px;
    background:var(--navy)
}
.quote {
    background:white;
    border:1px solid #d7e7f0;
    border-radius:22px;
    box-shadow:0 18px 50px #082b4619;
    padding:28px;
    display:grid;
    gap:17px
}
.quote label {
    display:grid;
    gap:7px;
    font-weight:750;
    font-size:14px
}
.quote input,.quote select,.quote textarea {
    width:100%;
    padding:13px;
    border:1px solid #b9cedc;
    border-radius:10px;
    color:#19334a;
    background:#fff;
    outline-color:var(--cyan)
}
.quote textarea {
    resize:vertical
}
.quote .btn {
    width:100%
}
.quote small {
    color:#526d7d;
    line-height:1.5
}
.quote .hidden {
    display:none
}
.contact-bar {
    background:var(--navy2);
    color:#fff;
    text-align:center;
    padding:35px 20px
}
footer {
    background:#071522;
    color:#b7cad6;
    text-align:center;
    padding:23px;
    font-size:13px
}
.float-wa {
    position:fixed;
    bottom:18px;
    right:18px;
    z-index:35;
    background:#25d366;
    color:#072c19;
    border-radius:99px;
    padding:13px 18px;
    font-weight:850;
    text-decoration:none;
    box-shadow:0 8px 28px #0004
}
.reveal {
    opacity:0;
    transform:translateY(35px);
    transition:opacity .65s ease,transform .65s ease
}
.reveal.visible {
    opacity:1;
    transform:translateY(0)
}
.present .mascot {
    transition:transform .5s
}
.present.visible .mascot {
    animation:wavein .75s ease both
}
@keyframes wavein {
    from {
        transform:translateX(-22px) rotate(-5deg)
    }
    to {
        transform:translateX(0) rotate(0)
    }
}
@media(max-width:850px) {
    .services {
        grid-template-columns:repeat(2,1fr)
    }
    .hero-grid,.quote-layout {
        grid-template-columns:1fr
    }
    .hero-logo {
        max-width:390px
    }
    .video-grid,.photo-grid {
        grid-template-columns:repeat(2,1fr)
    }
}
@media(max-width:560px) {
    nav a:not(.btn) {
        display:none
    }
    .nav {
        padding:10px 15px
    }
    .nav .btn {
        font-size:12px;
        padding:10px 12px
    }
    .hero {
        padding:45px 18px
    }
    .hero-grid {
        gap:22px
    }
    section {
        padding:52px 17px
    }
    .services,.video-grid,.photo-grid {
        grid-template-columns:1fr
    }
    .photo img {
        height:280px
    }
    .present,.present.reverse {
        grid-template-columns:105px 1fr;
        gap:14px;
        padding:12px
    }
    .present.reverse img {
        order:0
    }
    .present img {
        height:135px
    }
    .present h3 {
        font-size:16px
    }
    .present p {
        font-size:13px
    }
    .quote {
        padding:20px
    }
    .quote-mascots img {
        height:150px
    }
    .float-wa {
        bottom:12px;
        right:12px;
        padding:11px 14px;
        font-size:13px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    .reveal {
        opacity:1;
        transform:none;
        transition:none
    }
    .present.visible .mascot {
        animation:none
    }
}
.brand {
    display:flex;
    align-items:center
}
.brand img {
    width:88px;
    height:62px;
    object-fit:contain;
    filter:drop-shadow(0 1px 3px #0008)
}
.nav {
    padding-top:5px;
    padding-bottom:5px
}
.hero-logo {
    max-width:440px;
    mix-blend-mode:normal
}
.logo-float {
    animation:logoFloat 5s ease-in-out infinite
}
@keyframes logoFloat {
    0%,100% {
        translate:0 0
    }
    50% {
        translate:0 -12px
    }
}
.services {
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr))
}
.present {
    grid-template-columns:150px 1fr;
    min-height:190px;
    overflow:hidden
}
.present.reverse {
    grid-template-columns:1fr 150px
}
.present img.mascot {
    width:150px;
    height:170px;
    max-height:none;
    object-fit:cover;
    object-position:center top;
    mix-blend-mode:normal;
    border-radius:0;
    background:transparent
}
.present.visible img.mascot {
    animation:mascotEnter 1s cubic-bezier(.2,1.4,.4,1) both,mascotBob 3s ease-in-out 1s infinite
}
.present.reverse.visible img.mascot {
    animation:mascotEnterRight 1s cubic-bezier(.2,1.4,.4,1) both,mascotBob 3s ease-in-out 1s infinite
}
@keyframes mascotEnter {
    from {
        opacity:0;
        transform:translateX(-110px) rotate(-13deg)
    }
    to {
        opacity:1;
        transform:translateX(0)
    }
}
@keyframes mascotEnterRight {
    from {
        opacity:0;
        transform:translateX(110px) rotate(13deg)
    }
    to {
        opacity:1;
        transform:translateX(0)
    }
}
@keyframes mascotBob {
    0%,100% {
        translate:0 0
    }
    50% {
        translate:0 -8px
    }
}
.quote-mascots img {
    background:transparent;
    mix-blend-mode:normal;
    object-position:center 12%;
    border-radius:0
}
.quote-mascots.visible img:first-child {
    animation:mascotEnter .9s both,mascotBob 3s ease-in-out 1s infinite
}
.quote-mascots.visible img:last-child {
    animation:mascotEnterRight .9s both,mascotBob 3.4s ease-in-out 1s infinite
}
.photo img {
    height:300px;
    object-fit:cover
}
.photo figcaption {
    min-height:48px
}
.video video {
    aspect-ratio:9/12;
    object-fit:contain;
    background:#071726
}
.video-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
}
@media(max-width:850px) {
    .video-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:560px) {
    .brand img {
        width:64px;
        height:50px
    }
    .present,.present.reverse {
        grid-template-columns:100px 1fr
    }
    .present img.mascot {
        width:100px;
        height:130px
    }
    .video-grid {
        grid-template-columns:1fr
    }
    .video video {
        aspect-ratio:9/12
    }
    .quote-mascots img {
        height:145px
    }
}
@media(prefers-reduced-motion:reduce) {
    .logo-float,.present.visible img.mascot,.present.reverse.visible img.mascot,.quote-mascots.visible img {
        animation:none!important
    }
}
.brand {
    gap:10px;
    font-size:19px;
    white-space:nowrap
}
.brand img {
    width:74px;
    height:66px;
    object-fit:contain;
    filter:drop-shadow(0 2px 5px #0007)
}
.hero-logo {
    mix-blend-mode:normal!important;
    filter:drop-shadow(0 18px 26px #0005);
    max-width:510px
}
.services {
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:1000px;
    margin-inline:auto
}
.present {
    overflow:visible;
    position:relative;
    grid-template-columns:130px 1fr;
    min-height:175px
}
.present.reverse {
    grid-template-columns:1fr 130px
}
.present img.mascot {
    width:125px;
    height:160px;
    object-fit:contain;
    object-position:center bottom;
    background:transparent;
    mix-blend-mode:normal!important
}
.present.reverse img.mascot {
    width:125px;
    height:160px
}
.quote-mascots {
    justify-content:center;
    align-items:end
}
.quote-mascots img {
    width:43%;
    max-width:180px;
    height:220px;
    object-fit:contain;
    object-position:center bottom;
    background:transparent;
    mix-blend-mode:normal!important
}
.mini-character {
    cursor:pointer;
    filter:drop-shadow(0 8px 8px #09243c35);
    transition:filter .3s ease
}
.mini-character:hover {
    filter:drop-shadow(0 10px 12px #00aaca77)
}
.mini-character.cheer {
    animation:mascotCheer .65s ease-in-out 2!important
}
@keyframes mascotCheer {
    0%,100% {
        transform:rotate(0) translateY(0)
    }
    30% {
        transform:rotate(-9deg) translateY(-13px)
    }
    65% {
        transform:rotate(9deg) translateY(-6px)
    }
}
.photo-grid {
    grid-template-columns:repeat(auto-fit,minmax(245px,1fr))
}
.photo img {
    height:260px
}
.video-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
}
.video video {
    aspect-ratio:9/12;
    object-fit:contain
}
@media(max-width:850px) {
    .services {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .video-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:560px) {
    .brand {
        font-size:14px
    }
    .brand img {
        width:53px;
        height:50px
    }
    .services {
        grid-template-columns:1fr
    }
    .present,.present.reverse {
        grid-template-columns:90px 1fr;
        gap:10px
    }
    .present.reverse {
        grid-template-columns:1fr 90px
    }
    .present.reverse img.mascot {
        order:2
    }
    .present img.mascot,.present.reverse img.mascot {
        width:88px;
        height:120px
    }
    .quote-mascots img {
        height:150px
    }
    .video-grid {
        grid-template-columns:1fr
    }
    .photo-grid {
        grid-template-columns:1fr
    }
}
@media(prefers-reduced-motion:reduce) {
    .mini-character.cheer {
        animation:none!important
    }
}
.services {
    grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
    max-width:none
}
.present {
    min-height:160px
}
.present img.mascot,.present.reverse img.mascot {
    opacity:1;
    filter:drop-shadow(0 8px 10px #0a29412c);
    object-fit:contain
}
.present.visible img.mascot {
    animation:mascotEnter .7s ease-out both,mascotBob 3s ease-in-out .7s infinite
}
.present.reverse.visible img.mascot {
    animation:mascotEnterRight .7s ease-out both,mascotBob 3.2s ease-in-out .7s infinite
}
.quote-mascots img {
    opacity:1;
    filter:drop-shadow(0 8px 10px #08283b40)
}
.photo-grid {
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    align-items:stretch
}
.photo img {
    height:245px;
    object-fit:cover
}
.quote-mascots .mini-character {
    cursor:pointer
}
.scroll-helper {
    position:fixed;
    bottom:88px;
    left:12px;
    z-index:29;
    display:flex;
    align-items:end;
    gap:6px;
    pointer-events:none;
    opacity:0;
    transform:translateY(25px) scale(.8);
    transition:opacity .45s,transform .45s
}
.scroll-helper.show {
    opacity:1;
    transform:translateY(0) scale(1)
}
.scroll-helper img {
    width:82px;
    height:110px;
    object-fit:contain;
    filter:drop-shadow(0 7px 8px #0005);
    animation:mascotBob 2.8s ease-in-out infinite;
    pointer-events:auto;
    cursor:pointer
}
.scroll-helper span {
    background:#fff;
    color:#12314a;
    border:1px solid #c8e6ed;
    border-radius:13px;
    padding:8px 10px;
    font-size:12px;
    font-weight:750;
    max-width:170px;
    box-shadow:0 5px 20px #0002
}
@media(max-width:560px) {
    .scroll-helper {
        left:4px;
        bottom:68px
    }
    .scroll-helper img {
        width:55px;
        height:75px
    }
    .scroll-helper span {
        font-size:10px;
        max-width:115px;
        padding:6px
    }
    .photo-grid {
        grid-template-columns:1fr 1fr;
        gap:9px
    }
    .photo img {
        height:170px
    }
    .photo figcaption {
        font-size:12px;
        padding:9px
    }
    .services {
        grid-template-columns:1fr 1fr;
        gap:10px
    }
    .service {
        padding:14px
    }
    .service h3 {
        font-size:16px
    }
}
@media(prefers-reduced-motion:reduce) {
    .scroll-helper img {
        animation:none
    }
}
.present.visible img.mascot,.present.reverse.visible img.mascot,.quote-mascots.visible img:first-child,.quote-mascots.visible img:last-child,.scroll-helper img {
    animation:none!important
}
.present img.mascot,.quote-mascots img {
    transition:transform .65s cubic-bezier(.2,1.3,.4,1),filter .5s!important;
    transform:translateY(16px) scale(.92);
    filter:drop-shadow(0 8px 10px #08283b40)!important
}
.present.character-active img.mascot {
    transform:translateY(-8px) rotate(-6deg) scale(1.05)
}
.present.reverse.character-active img.mascot {
    transform:translateY(-8px) rotate(6deg) scale(1.05)
}
.quote-mascots.character-active img:first-child {
    transform:translateY(-10px) rotate(-8deg) scale(1.05)
}
.quote-mascots.character-active img:last-child {
    transform:translateY(-10px) rotate(8deg) scale(1.05)
}
.scroll-helper img {
    transition:transform .45s ease!important;
    transform:translateY(12px) rotate(-8deg)
}
.scroll-helper.show img {
    transform:translateY(-5px) rotate(5deg)
}
.scroll-helper.helper-bounce img {
    transform:translateY(-16px) rotate(-8deg)
}
@media(prefers-reduced-motion:reduce) {
    .present img.mascot,.quote-mascots img,.scroll-helper img {
        transition:none!important;
        transform:none!important
    }
}
.before-after {
    margin:22px 0 28px;
    background:#fff;
    border-radius:20px;
    padding:22px;
    box-shadow:0 12px 30px #0b2a4315
}
.before-after h3 {
    margin:0 0 8px;
    color:#102d44;
    font-size:24px
}
.before-after p {
    color:#567387;
    margin:0 0 16px
}
.compare-stage {
    position:relative;
    overflow:hidden;
    border-radius:15px;
    aspect-ratio:4/3;
    max-height:620px;
    max-width:720px;
    margin-inline:auto;
    background:#edf3f7;
    touch-action:pan-y;
    user-select:none;
    cursor:ew-resize
}
.compare-stage img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    pointer-events:none
}
.compare-before {
    clip-path:inset(0 50% 0 0)
}
.compare-divider {
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:3px;
    background:white;
    transform:translateX(-50%);
    pointer-events:none;
    box-shadow:0 0 8px #0009
}
.compare-handle {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:52px;
    height:52px;
    background:white;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#10324a;
    font-size:25px;
    font-weight:900;
    box-shadow:0 3px 15px #0005;
    pointer-events:none
}
.compare-label {
    position:absolute;
    top:14px;
    padding:8px 14px;
    border-radius:20px;
    background:#092338df;
    color:white;
    font-weight:800;
    font-size:13px;
    pointer-events:none
}
.compare-label.left {
    left:14px
}
.compare-label.right {
    right:14px
}
.compare-stage img {
    object-position:center center;
    background:#edf3f7
}
.compare-range {
    display:block;
    width:100%;
    margin:16px 0 0;
    accent-color:#11c1d5;
    cursor:ew-resize
}
.present img.mascot,.quote-mascots img,.scroll-helper img {
    filter:saturate(1.45) contrast(1.22) drop-shadow(0 9px 10px #092e4860)!important
}
.present.character-active img.mascot {
    animation:wavePurple .8s ease-in-out 1 both!important;
    transform-origin:50% 90%
}
.present.reverse.character-active img.mascot {
    animation:waveOrange .8s ease-in-out 1 both!important;
    transform-origin:50% 90%
}
.quote-mascots.character-active img:first-child {
    animation:wavePurple .8s ease-in-out 1 both!important
}
.quote-mascots.character-active img:last-child {
    animation:waveOrange .8s ease-in-out 1 both!important
}
@keyframes wavePurple {
    0% {
        transform:translateY(16px) rotate(-12deg) scale(.9)
    }
    45% {
        transform:translateY(-14px) rotate(10deg) scale(1.08)
    }
    100% {
        transform:translateY(0) rotate(0) scale(1)
    }
}
@keyframes waveOrange {
    0% {
        transform:translateY(16px) rotate(12deg) scale(.9)
    }
    45% {
        transform:translateY(-14px) rotate(-10deg) scale(1.08)
    }
    100% {
        transform:translateY(0) rotate(0) scale(1)
    }
}
@media(max-width:650px) {
    .before-after {
        padding:12px
    }
    .before-after h3 {
        font-size:19px
    }
    .compare-stage {
        aspect-ratio:4/5
    }
    .compare-handle {
        width:42px;
        height:42px
    }
}
@media(prefers-reduced-motion:reduce) {
    .present.character-active img.mascot,.present.reverse.character-active img.mascot,.quote-mascots.character-active img {
        animation:none!important
    }
}
.present,.quote-mascots,.scroll-helper {
    display:none!important
}
.before-after {
    border:1px solid #dbe9f1
}
.compare-stage {
    box-shadow:inset 0 0 0 1px #dbe9f1;
    aspect-ratio:3/4;
    max-width:620px
}
.compare-stage img {
    object-fit:cover
}
@media(max-width:650px) {
    .compare-stage {
        aspect-ratio:3/4
    }
}
#resultados .photo-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin:24px 0
}
#resultados .photo img {
    height:220px;
    width:100%;
    object-fit:cover
}
#resultados .photo figcaption {
    font-size:13px
}
#resultados .before-after {
    display:grid;
    grid-template-columns:minmax(220px,.8fr) minmax(0,1.6fr);
    align-items:center;
    gap:25px;
    padding:24px;
    margin:28px 0 0
}
#resultados .before-after h3 {
    font-size:clamp(24px,3vw,36px);
    line-height:1.15
}
#resultados .before-after p {
    font-size:15px;
    line-height:1.7
}
#resultados .compare-stage {
    width:100%;
    max-width:none;
    max-height:none;
    aspect-ratio:4/3
}
#resultados .compare-stage img {
    object-fit:cover
}
#resultados .compare-range {
    margin:9px 0 0
}
#resultados .comparison-note {
    display:block;
    color:#60798a;
    font-size:11px;
    line-height:1.5;
    margin-top:14px
}
@media(max-width:760px) {
    #resultados .before-after {
        grid-template-columns:1fr;
        gap:16px;
        padding:16px
    }
    #resultados .photo-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    #resultados .photo img {
        height:170px
    }
    #resultados .compare-stage {
        aspect-ratio:3/4
    }
}
#resultados .photo-grid {
    gap:16px;
    margin-top:26px;
    margin-bottom:34px
}
#resultados .photo {
    overflow:hidden;
    border-radius:16px;
    box-shadow:0 9px 22px #092d4515
}
#resultados .photo img {
    height:225px;
    object-fit:cover;
    display:block
}
#resultados .photo figcaption {
    font-weight:750;
    padding:13px 15px;
    font-size:14px
}
#resultados .before-after {
    grid-template-columns:minmax(210px,.75fr) minmax(0,1.75fr);
    gap:26px;
    padding:22px;
    border-radius:22px
}
#resultados .before-after h3 {
    font-size:clamp(28px,3.5vw,43px);
    letter-spacing:-.03em;
    max-width:330px
}
#resultados .before-after p {
    max-width:340px;
    font-size:16px
}
#resultados .compare-stage {
    aspect-ratio:1.55;
    max-width:none;
    max-height:none;
    border-radius:17px
}
#resultados .compare-stage img {
    object-fit:cover;
    object-position:center center
}
#resultados .compare-range {
    margin:8px 0 0;
    accent-color:#00a9bb
}
#resultados .comparison-note {
    font-size:11px;
    margin-top:12px
}
@media(max-width:760px) {
    #resultados .before-after {
        grid-template-columns:1fr;
        padding:15px
    }
    #resultados .compare-stage {
        aspect-ratio:1.12
    }
    #resultados .photo img {
        height:185px
    }
}
@media(max-width:440px) {
    #resultados .photo-grid {
        gap:10px
    }
    #resultados .photo img {
        height:145px
    }
    #resultados .photo figcaption {
        font-size:12px;
        padding:10px
    }
    #resultados .compare-stage {
        aspect-ratio:1
    }
}
#resultados .photo-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
}
#videos .video-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
}
#videos .video video {
    aspect-ratio:3/4;
    object-fit:contain
}
@media(max-width:700px) {
    #resultados .photo-grid {
        grid-template-columns:1fr
    }
    #videos .video-grid {
        grid-template-columns:1fr
    }
}
.hero-grid {
    grid-template-columns:minmax(0,1fr) minmax(0,1.17fr);
    gap:32px;
    max-width:1320px
}
.hero-brand-art {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0
}
.hero-mascots {
    display:block;
    width:100%;
    max-width:570px;
    max-height:465px;
    object-fit:contain;
    filter:drop-shadow(0 16px 18px rgba(0,0,0,.22))
}
.hero-wordmark {
    text-align:center;
    margin-top:-8px;
    line-height:1.02;
    text-shadow:0 3px 12px rgba(0,0,0,.18)
}
.hero-wordmark strong {
    display:block;
    font-size:clamp(39px,5.5vw,80px);
    font-weight:950;
    letter-spacing:-.055em;
    color:#fff;
    white-space:nowrap
}
.hero-wordmark em {
    color:#16d4e9;
    font-style:normal
}
.hero-wordmark small {
    display:block;
    margin-top:13px;
    font-size:clamp(11px,1.3vw,18px);
    font-weight:700;
    letter-spacing:.32em;
    color:#e4f8ff
}
.brand img {
    width:64px!important;
    height:45px!important;
    object-fit:cover!important;
    object-position:top center!important;
    filter:none!important
}
@media(max-width:800px) {
    .hero-grid {
        grid-template-columns:1fr;
        gap:26px
    }
    .hero-brand-art {
        max-width:520px;
        margin:auto
    }
    .hero-mascots {
        max-height:390px
    }
    .hero-wordmark strong {
        font-size:clamp(39px,10vw,65px)
    }
}
@media(max-width:560px) {
    .brand img {
        width:48px!important;
        height:38px!important
    }
    .hero-mascots {
        max-height:310px
    }
    .hero-wordmark small {
        letter-spacing:.19em
    }
}

/* Main navigation and responsive hero */
header { position:relative; z-index:10; }
.hero { display:block; background:radial-gradient(ellipse at 72% 35%,#08607a 0%,#0a344d 46%,#081b30 100%); padding:45px 22px 55px; }
.hero .wrap { max-width:1420px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.45fr); gap:26px; align-items:center; }
.hero-grid > .reveal { min-width:0; }
.hero .eyebrow { font-size:clamp(11px,1.2vw,15px); letter-spacing:1.6px; }
.hero h1 { font-size:clamp(38px,4.1vw,64px); line-height:1.09; }
.hero p { font-size:clamp(14px,1.25vw,18px); max-width:580px; }
.hero-brand-art { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:center; gap:8px; }
.hero-mascots { width:100%; max-width:none; max-height:460px; object-fit:contain; filter:drop-shadow(0 12px 12px #0003); }
.hero-wordmark { margin:0; text-align:center; }
.hero-wordmark strong { font-size:clamp(33px,5.1vw,83px); line-height:.95; letter-spacing:-.055em; white-space:normal; }
.hero-wordmark em { display:block; }
.hero-wordmark small { font-size:clamp(9px,1.15vw,16px); letter-spacing:.21em; line-height:1.5; }
@media(max-width:900px) {
  .hero-grid { grid-template-columns:1fr; gap:22px; }
  .hero { padding:44px 20px 54px; }
  .hero-brand-art { max-width:650px; width:100%; margin:auto; }
  .hero-wordmark strong { font-size:clamp(38px,8vw,70px); }
}
@media(max-width:480px) {
  .hero-brand-art { grid-template-columns:1fr; gap:0; }
  .hero-mascots { max-height:320px; }
  .hero-wordmark strong { font-size:clamp(42px,13vw,65px); }
  .hero-wordmark em { display:inline; }
  .hero-wordmark small { font-size:10px; }
}

/* Identidad visual */
.hero-mascots{display:block;width:100%;height:auto;max-height:440px;object-fit:contain;object-position:center;filter:none;background:transparent}
.hero-brand-art{align-items:center}
@media(max-width:760px){.hero-mascots{max-height:340px}}