/* Inversión: maquetación en código según diseño (lienzo 1024px) */
.iv-page { background:#fff; --or:#b97a22; --gold:#b3812f; --navy:#15233f; --mar:#4a1c27; --sans:'Inter',-apple-system,sans-serif; --ser:'Playfair Display',Georgia,serif; --cor:'Cormorant Garamond',Georgia,serif;}
.iv-page main > section, .iv-page .vf { container-type:inline-size; position:relative; width:100%; overflow:hidden;}
.iv-page main > section > *, .iv-page .vf > * { margin:0;}
/* HERO */
.vh { aspect-ratio:1024/420; background:var(--img-iv-hero-bg) center/100% 100% no-repeat;}
.vh > * { position:absolute;}
.vh-rule { left:4.102cqw; top:4.395cqw; width:3.125cqw; height:0.195cqw; min-height:1px; background:var(--gold);}
.vh-eb { left:8.301cqw; top:4.004cqw; font:400 0.928cqw/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:#3a4560; white-space:nowrap;}
.vh-h1 { left:4.102cqw; top:6.152cqw; font:500 4.336cqw/4.395cqw var(--ser); text-transform:uppercase; color:#12182b; white-space:nowrap; letter-spacing:-.005em;}
.vh-h1 span { display:block;}
.vh-h1 em { font:600 5.664cqw/4.395cqw var(--cor); font-variant-numeric:lining-nums; color:#c49a4e; letter-spacing:0; margin:0 0.293cqw;}
.vh-h1 .g { font-size:5.322cqw; line-height:4.395cqw; color:#c9a45f; background:linear-gradient(90deg,#b98a3b,#d8b46a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.vh-sub { left:4.102cqw; top:20.801cqw; font:500 2.148cqw/2.246cqw var(--cor); font-weight:600; color:#15233f; white-space:nowrap;}
.vh-p { left:4.102cqw; top:25.879cqw; font:300 1.260cqw/1.689cqw var(--sans); color:#3a4560; white-space:nowrap;}
/* LISTA 7 PASOS */
.vm { aspect-ratio:1024/618; display:grid; grid-template-columns:35.449cqw 1fr; background:linear-gradient(90deg,#fff,#fbfaf8);}
.vm-l { position:relative; background-size:100% 100%; background-repeat:no-repeat; color:#fff;}
.vm-l > * { position:absolute; left:3.711cqw;}
.vm-l h2 { top:14.551cqw; font:500 2.637cqw/3.223cqw var(--cor); text-transform:uppercase; letter-spacing:.02em; color:#fff; white-space:nowrap;}
.vm-l i { display:block; width:3.906cqw; height:0.195cqw; min-height:1px; background:#d4a44a; left:3.906cqw;}
.vm-l .r1 { top:25.684cqw;} .vm-l .r2 { top:50.098cqw;}
.vm-l p { top:27.441cqw; font:400 1.235cqw/1.875cqw var(--sans); color:#fff; white-space:nowrap;}
.vm-l h3 { top:51.855cqw; font:500 1.504cqw/1.914cqw var(--cor); text-transform:uppercase; letter-spacing:.09em; color:#fff; white-space:nowrap; font-weight:600;}
.vm-r { position:relative; list-style:none; margin:0; padding:0;}
.vm-r li { position:absolute; left:0; right:0;}
.vm-r li:nth-child(1) { top:1.172cqw;} .vm-r li:nth-child(2) { top:9.424cqw;} .vm-r li:nth-child(3) { top:17.773cqw;} .vm-r li:nth-child(4) { top:26.074cqw;} .vm-r li:nth-child(5) { top:34.473cqw;} .vm-r li:nth-child(6) { top:42.871cqw;} .vm-r li:nth-child(7) { top:51.367cqw;}
.vm-r .n { position:absolute; left:4.004cqw; top:1.074cqw; width:4.688cqw; height:4.688cqw; border:1.5px solid #c8964a; border-radius:50%; display:grid; place-items:center; font:600 3.906cqw/1 var(--cor); font-variant-numeric:lining-nums; color:#c0883a; background:#fdfcfa; z-index:1; padding-bottom:0.293cqw;}
.vm-r li:not(:last-child) .n::after { content:''; position:absolute; left:50%; top:100%; width:1px; height:3.613cqw; background:#d9b370;}
.vm-r img { position:absolute; left:10.645cqw; top:0; width:9.180cqw; height:6.836cqw; object-fit:cover; border-radius:0.391cqw; box-shadow:0 1px 4px rgba(0,0,0,.12);}
.vm-r li:nth-child(7) img { height:8.008cqw;}
.vm-r div { position:absolute; left:22.656cqw; top:0.781cqw; right:4.199cqw;}
.vm-r li:not(:last-child) div::after { content:''; position:absolute; left:0; right:0; top:7.422cqw; height:1px; background:#e9e4dc; transform:translateY(0.098cqw);}
.vm-r h3 { font:500 1.982cqw/2.344cqw var(--cor); font-weight:600; letter-spacing:.015em; text-transform:uppercase; color:var(--mar); margin:0 0 0.391cqw;}
.vm-r p { font:300 1.201cqw/1.680cqw var(--sans); color:#656c84; white-space:nowrap; margin:0;}
/* OFRECEMOS */
.vo { aspect-ratio:1024/142; background:#fbfaf8;}
.vo > * { position:absolute;}
.vo .eb { left:4.199cqw; top:2.051cqw; font:400 0.918cqw/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:#3a4560;}
.vo-r { left:4.199cqw; top:3.906cqw; width:3.125cqw; height:0.195cqw; min-height:1px; background:var(--gold);}
.vo-g { left:3.906cqw; right:3.320cqw; top:4.590cqw; height:8.594cqw; display:grid; grid-template-columns:13.672cqw 15.820cqw 14.648cqw 18.848cqw 14.355cqw 1fr;}
.vo-g > div { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;}
.vo-g > div + div::before { content:''; position:absolute; left:0; top:0.098cqw; bottom:0.488cqw; width:1px; background:#ece6de;}
.vo-g span { width:4.492cqw; height:4.492cqw; margin:-0.781cqw 0 0.195cqw; color:var(--or);} .vo-g svg { width:100%; height:100%;}
.vo-g > div:first-child p { margin-top:-0.488cqw;}
.vo-g p { font:400 1.230cqw/1.611cqw var(--sans); color:#2c3550; white-space:nowrap;}
/* BANNER */
.vb { aspect-ratio:1024/214; background:#d9b8a0 center/100% 100% no-repeat;}
.vb > * { position:absolute;}
.vb h2 { left:4.199cqw; top:1.758cqw; font:700 1.816cqw/2.051cqw var(--cor); text-transform:uppercase; color:#241a16; white-space:nowrap; letter-spacing:.01em;}
.vb p { left:4.199cqw; top:8.496cqw; font:400 1.094cqw/1.611cqw var(--sans); color:#f4efe9; white-space:nowrap;}
.vb blockquote { left:77.344cqw; top:2.344cqw; font:italic 500 1.719cqw/1.914cqw var(--cor); color:#3a3a48; white-space:nowrap;}
.vb blockquote i { position:absolute; left:0.293cqw; top:12.500cqw; width:2.637cqw; height:0.156cqw; background:#d4a44a;}
.vb cite { position:absolute; left:0.293cqw; top:13.574cqw; font:500 1.035cqw/1 var(--sans); font-style:normal; letter-spacing:.3em; text-transform:uppercase; color:#3a3a48;}
/* PIE */
.vf { aspect-ratio:1024/73; background:#fff;}
.vf > * { position:absolute;}
.vf-logo { left:4.590cqw; top:1.270cqw; text-decoration:none; display:block;}
.vf-logo .n { display:block; font:500 2.393cqw/2.734cqw var(--ser); color:#c07a1e; letter-spacing:.04em;}
.vf-logo .t { display:block; font:500 0.801cqw/0.977cqw var(--sans); color:#b97a22; letter-spacing:.34em; text-transform:uppercase; margin-top:0.293cqw;}
.vf-s1 { left:21.289cqw; top:1.465cqw; height:4.102cqw; width:1px; background:#e6dfd6;}
.vf-s2 { left:75.293cqw; top:1.465cqw; height:4.102cqw; width:1px; background:#e6dfd6;}
.vf-c { left:22.461cqw; width:51.758cqw; top:2.930cqw; text-align:center; font:400 0.928cqw/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:#2f3957; white-space:nowrap;}
.vf-c b { font-weight:400; color:var(--gold); padding:0 1.367cqw 0 0.586cqw;}
.vf-loc { left:82.812cqw; top:2.148cqw; display:flex; align-items:center; gap:0.586cqw; font:400 1.191cqw/1 var(--sans); color:#222b45;}
.vf-loc svg { width:1.855cqw; height:2.539cqw; color:#c07a1e;}
/* MÓVIL */
@media (max-width:760px) {
  .iv-page main > section, .iv-page .vf { aspect-ratio:auto; container-type:normal; height:auto;}
  .iv-page br.bd { display:none;}
  .vh { padding:26px 22px 210px; background-image:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.9) 62%,rgba(255,255,255,0)),var(--img-iv-hero-bg); background-size:100% 100%,cover; background-position:0 0,72% bottom;}
  .vh > * { position:static; white-space:normal !important;}
  .vh-rule { display:none;}
  .vh-eb { font-size:11px; letter-spacing:.16em; line-height:17px; margin-bottom:12px;}
  .vh-h1 { font-size:34px; line-height:38px; margin-bottom:14px;} .vh-h1 em { font-size:46px; line-height:38px;}
  .vh-h1 .g { font-size:44px; line-height:46px;}
  .vh-sub { font-size:22px; line-height:27px; margin-bottom:10px;}
  .vh-p { font-size:14.5px; line-height:22px; max-width:340px;}
  .vm { grid-template-columns:1fr;}
  .vm-l { min-height:480px; padding:28px 22px; background-size:cover; background-position:center;}
  .vm-l::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.65));}
  .vm-l > * { position:relative; left:auto !important; top:auto !important; margin-bottom:16px;}
  .vm-l i { width:40px;}
  .vm-l h2 { font-size:30px; line-height:36px;} .vm-l p { font-size:15px; line-height:23px; white-space:normal;} .vm-l h3 { font-size:17px; line-height:23px; white-space:normal;}
  .vm-r { padding:22px; display:grid; gap:20px;}
  .vm-r li { position:relative; top:auto !important; display:grid; grid-template-columns:44px 84px 1fr; gap:12px; align-items:start;}
  .vm-r .n { position:static; width:42px; height:42px; font-size:28px; padding-bottom:2px;}
  .vm-r li:not(:last-child) .n::after { display:none;}
  .vm-r img { position:static; width:84px; height:64px !important;}
  .vm-r div { position:static;} .vm-r li:not(:last-child) div::after { display:none;}
  .vm-r h3 { font-size:17px; line-height:21px;} .vm-r p { font-size:13px; line-height:19px; white-space:normal;}
  .vo { padding:24px 22px;} .vo > * { position:static;}
  .vo .eb { margin-bottom:8px; font-size:11px; letter-spacing:.16em;} .vo-r { display:block; margin-bottom:18px;}
  .vo-g { display:grid; grid-template-columns:1fr 1fr; gap:20px 8px; height:auto;}
  .vo-g > div + div::before { display:none;}
  .vo-g span { width:40px; height:40px;} .vo-g > div:first-child p { margin-top:-0.488cqw;}
.vo-g p { font-size:14px; line-height:19px; white-space:normal;}
  .vb { padding:28px 22px; background-size:cover; background-position:30% center;}
  .vb::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.55);}
  .vb > * { position:relative; left:auto !important; top:auto !important; z-index:1; white-space:normal !important;}
  .vb h2 { font-size:25px; line-height:29px; margin-bottom:12px;} .vb p { font-size:15px; line-height:22px; color:#1c2b45; margin-bottom:18px;}
  .vb blockquote { font-size:19px; line-height:25px; background:rgba(255,255,255,.7); padding:16px;}
  .vb blockquote i, .vb cite { position:static; display:block; margin-top:12px;} .vb cite { font-size:11px;} .vb blockquote i { width:34px; height:2px;}
  .vf { padding:22px; text-align:center;} .vf > * { position:static !important; display:block;}
  .vf-s1, .vf-s2 { display:none;}
  .vf-logo { margin-bottom:14px;} .vf-logo .n { font-size:26px; line-height:30px;} .vf-logo .t { font-size:9px; line-height:12px;}
  .vf-c { width:auto; font-size:10px; line-height:18px; letter-spacing:.2em; white-space:normal; margin-bottom:12px;} .vf-c b { padding:0 4px;}
  .vf-loc { display:flex; justify-content:center; font-size:13px; gap:6px;} .vf-loc svg { width:15px; height:19px;}
}
