:root {
    color-scheme: light;
    --navy: #052758;
    --blue: #075ed4;
    --cyan: #079cdb;
    --green: #25a53e;
    --green-dark: #13862d;
    --muted: #4e6381;
    --line: #dce8f2;
    --white: #fff;
    font-family:Arial,Helvetica,sans-serif;
    color: var(--navy);
    background: #fff;
}

* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; min-width: 0; margin: 0; overflow-x: hidden; }
body { min-height: 100vh; background: #fff; touch-action: pan-y; }
img { display: block; max-width: 100%; }
.page { position: relative; width: 100%; max-width: 100%; min-height: 100vh; overflow-x: hidden; background: linear-gradient(180deg, #fff 0%, #fbfdff 100%); }
.container { width: calc(100% - 4rem); max-width: 1340px; min-width: 0; margin-inline: auto; }

.header { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 136px; padding-block: 1rem; }
.brand { display: inline-flex; text-decoration: none; }
.logo-frame { display: block; width: 190px; height: 106px; }
.brand-logo { width: 100%; height: 100%; object-fit: contain; }
.whatsapp-button { display: inline-flex; gap: .65rem; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.4rem; border: 1px solid rgb(255 255 255 / 55%); border-radius: 10px; color: #fff; background: linear-gradient(135deg, #168e2d, #35b842); box-shadow: 0 10px 22px rgb(22 142 45 / 25%); font-size: 1rem; font-weight:700; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.whatsapp-button:hover { transform: translateY(-2px); box-shadow: 0 13px 25px rgb(22 142 45 / 30%); }
.whatsapp-button:focus-visible { outline: 3px solid rgb(37 165 62 / 28%); outline-offset: 3px; }
.whatsapp-icon { display: grid; width: 25px; height: 25px; border: 2px solid currentColor; border-radius: 50%; place-items: center; font-size: .82rem; line-height: 1; }

.hero { position: relative; display: grid; grid-template-columns: minmax(390px, .85fr) minmax(520px, 1.25fr); align-items: center; min-height: 470px; }
.hero::before {
    position: absolute; z-index: 0; top: -155px; left: -20%; width: 76%; height: 250px;
    border-radius: 0 0 70% 45%; background: linear-gradient(130deg, #f7fbff, #dfefff); content: ""; transform: rotate(7deg);
}
.hero-copy { position: relative; z-index: 2; padding: 2rem 0 3rem 2rem; }
.eyebrow { margin: 0 0 1rem; color: var(--green-dark); font-size: clamp(.8rem, 1.2vw, 1rem); font-weight:700; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 0; color: var(--navy); font-size: clamp(4.2rem, 7vw, 7rem); font-weight:700; letter-spacing: -.065em; line-height: .83; text-transform: uppercase; }
h1 span { display: block; color: var(--blue); }
.lead { margin: 2rem 0 0; color: #304d77; font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.45; }
.lead strong { display: block; color: var(--blue); }

.hero-art { position: relative; z-index: 1; min-width: 0; min-height: 460px; align-self: stretch; }
.hero-art::before {
    position: absolute; z-index: -2; inset: -45px -18vw -60px -80px; border-radius: 48% 0 0 48%;
    background: radial-gradient(circle at 55% 45%, #fff 0 40%, #eff8ff 76%, #e5f2fb 100%); content: "";
}
.tanker-frame { position: absolute; inset: 2% -3% 0 -10%; display: grid; align-items: center; }
.tanker-image { width: 100%; max-height: 470px; object-fit: contain; filter: drop-shadow(0 24px 22px rgb(5 39 88 / 14%)); }
.curve { position: absolute; z-index: -1; border: 8px solid transparent; border-radius: 50%; }
.curve--blue { inset: 16% -5% 8% 1%; border-top-color: rgb(7 94 212 / 19%); transform: rotate(-8deg); }
.curve--green { inset: 29% -2% 2% 8%; border-top-color: rgb(37 165 62 / 16%); transform: rotate(6deg); }

.benefits {
    position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center;
    min-height: 145px; padding: 1.5rem clamp(2rem, 5vw, 5rem); border: 1px solid #edf3f7; border-radius: 22px;
    background: rgb(255 255 255 / 96%); box-shadow: 0 14px 38px rgb(5 39 88 / 9%);
}
.benefit { display: flex; gap: 1.8rem; align-items: center; justify-content: center; }
.benefit-divider { width: 1px; height: 76px; background: var(--line); }
.benefit-icon { position: relative; display: grid; flex: 0 0 74px; width: 74px; height: 74px; place-items: center; }
.benefit-icon--water { color: var(--blue); }
.benefit-icon--speed { color: var(--green); }
.benefit-icon img { width: 100%; height: 100%; object-fit: contain; }
.benefit h2 { margin: 0 0 .45rem; font-size: 1rem; text-transform: uppercase; }
.benefit p { margin: 0; color: #2f4c76; font-size: .92rem; line-height: 1.5; }

.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem; padding-block: 3rem 4rem; }
.action-card { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; min-width: 0; min-height: 150px; overflow: hidden; padding: 1.6rem 1.6rem 1.6rem 1.8rem; border: 1px solid #dbe8f1; border-radius: 20px; background: #fff; box-shadow: 0 15px 34px rgb(5 39 88 / 10%); }
.action-card::before { position: absolute; top: 18px; bottom: 18px; left: 0; width: 4px; border-radius: 0 4px 4px 0; content: ""; }
.action-card--blue::before { background: linear-gradient(180deg, var(--blue), var(--cyan)); }
.action-card--green::before { background: linear-gradient(180deg, var(--green-dark), #5cc542); }
.action-card--pro6::before { background: linear-gradient(180deg, var(--blue), var(--green)); }
.action-number { color: #d9eaf2; font-size: 3.1rem; font-weight:700; letter-spacing: -.07em; line-height: 1; }
.action-card--green .action-number { color: #dcefe1; }
.action-copy { min-width: 0; }
.action-label { display: block; margin-bottom: .35rem; color: var(--green-dark); font-size: .65rem; font-weight:700; letter-spacing: .1em; text-transform: uppercase; }
.action-copy h3 { margin: 0 0 .7rem; font-size: clamp(1.05rem, 1.6vw, 1.4rem); text-transform: uppercase; }
.action-card--blue h3 { color: var(--blue); }
.action-card--green h3 { color: var(--green-dark); }
.action-copy p { margin: 0; color: #304d77; font-size: .98rem; line-height: 1.45; }
.button { display: inline-flex; gap: .8rem; align-items: center; justify-content: center; justify-self: end; min-width: 178px; min-height: 44px; padding: .7rem 1.2rem; border-radius: 8px; color: #fff; font-size: .78rem; font-weight:700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; transition: transform .16s ease, box-shadow .16s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible { outline: 3px solid rgb(7 94 212 / 25%); outline-offset: 3px; }
.button--blue { background: linear-gradient(90deg, #0758d2, #079cdb); box-shadow: 0 8px 18px rgb(7 94 212 / 20%); }
.button--green { background: linear-gradient(90deg, #15982e, #5cc542); box-shadow: 0 8px 18px rgb(37 165 62 / 20%); }
.button--pro6 { background: linear-gradient(90deg, var(--blue), var(--green-dark)); box-shadow: 0 8px 18px rgb(7 94 212 / 20%); }
.asset-frame.is-missing { position: relative; border: 1px dashed var(--line); }
.asset-frame.is-missing::before { position: absolute; inset: 0; display: grid; color: var(--navy); content: attr(data-missing-label); place-items: center; font-size: .75rem; font-weight:700; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1050px) {
    .hero { grid-template-columns: minmax(330px, .8fr) minmax(430px, 1.2fr); }
    .action-card { grid-template-columns: 66px minmax(0, 1fr) auto; gap: .9rem; padding-inline: 1.3rem; }
    .action-number { font-size: 2.7rem; }
}

@media (max-width: 760px) {
    .container { width: calc(100% - 1.5rem); }
    .header { min-height: 86px; padding-block: .35rem; }
    .logo-frame { width: 132px; height: 72px; }
    .whatsapp-button { gap: .4rem; min-height: 38px; padding: .5rem .75rem; border-radius: 7px; font-size: .72rem; }
    .whatsapp-icon { width: 20px; height: 20px; border-width: 1.5px; font-size: .65rem; }
    .hero { display: grid; grid-template-columns: minmax(0, 1fr); min-height: auto; padding-top: 1.2rem; }
    .hero::before { top: -105px; left: -50%; width: 140%; height: 180px; }
    .hero-copy { padding: .5rem .5rem 0; }
    .eyebrow { margin-bottom: .65rem; font-size: .68rem; }
    h1 { max-width: 7ch; font-size: clamp(3rem, 15.5vw, 5rem); line-height: .85; }
    .lead { margin-top: 1.15rem; font-size: .95rem; }
    .lead strong { display: inline; }
    .hero-art { min-height: 245px; margin-top: .5rem; }
    .hero-art::before { inset: -25px -40vw -28px -25vw; border-radius: 50%; }
    .tanker-frame { inset: 0; display: grid; place-items: center; }
    .tanker-image { width: 100%; max-width: 100%; max-height: 255px; object-fit: contain; object-position: center; }
    .curve--blue { inset: 10% -10% 3%; }
    .curve--green { inset: 24% -14% -2% 5%; }
    .benefits { grid-template-columns: 1fr 1px 1fr; min-height: 128px; padding: 1rem .5rem; border-radius: 16px; }
    .benefit { flex-direction: column; gap: .55rem; text-align: center; }
    .benefit-icon { flex-basis: 48px; width: 48px; height: 48px; }
    .benefit-divider { height: 82px; }
    .benefit h2 { margin-bottom: .25rem; font-size: .68rem; }
    .benefit p { font-size: .68rem; line-height: 1.35; }
    .actions { grid-template-columns: 1fr; gap: .9rem; padding-block: 1rem 2.5rem; }
    .action-card { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; gap: .75rem .65rem; min-height: 0; padding: 1.1rem 1rem 1rem 1.2rem; border-radius: 16px; }
    .action-card::before { top: 12px; bottom: 12px; width: 3px; }
    .action-number { grid-column: 1; grid-row: 1; align-self: center; font-size: 2.2rem; }
    .action-copy { grid-column: 2; grid-row: 1; }
    .action-label { margin-bottom: .2rem; font-size: .52rem; }
    .action-copy h3 { margin-bottom: .3rem; font-size: .9rem; }
    .action-copy p { font-size: .72rem; }
    .button { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; min-height: 40px; padding: .55rem .75rem; font-size: .68rem; }
}

@media (max-width: 360px) {
    .container { width: calc(100% - 1rem); }
    .hero-copy { padding-inline: .25rem; }
    .logo-frame { width: 112px; height: 64px; }
    .whatsapp-button { padding-inline: .55rem; font-size: .66rem; }
    .hero-art { min-height: 220px; }
    .tanker-image { max-height: 225px; }
    .action-card { grid-template-columns: 44px minmax(0, 1fr); gap: .65rem .55rem; padding-inline: .9rem; }
    .action-number { font-size: 2rem; }
}

@supports (overflow: clip) {
    html, body, .page { overflow-x: clip; }
}

@media (prefers-reduced-motion: reduce) {
    .button { transition: none; }
}

/* Escala de lectura: portada Cliente */
:root { --font-xs:.8125rem; --font-sm:.875rem; --font-base:1rem; --font-md:1.0625rem; font-family:Arial,Helvetica,sans-serif; }
html,body,button,input,select,textarea { font-family:Arial,Helvetica,sans-serif; }
.eyebrow { font-size:.82rem; }
.hero-copy .lead { font-size:1rem; }
.benefit h2 { font-size:.9rem; }
.benefit p { font-size:.86rem; line-height:1.45; }
.action-label { font-size:.75rem; }
.action-copy h3 { font-size:1.02rem; }
.action-copy p { font-size:.9rem; line-height:1.45; }
.action-button, .whatsapp-button { font-size:.86rem; min-height:44px; }
@media (max-width:560px) { .benefit h2 { font-size:.86rem; } .benefit p,.action-copy p { font-size:.84rem; } .action-label { font-size:.72rem; } }