/* ============================================================
Mastermind · Eskalup
Réplica web del diseño de Figma (frame 1024 × 5146)
Todo el layout se expresa en múltiplos de --k, que vale 1px
a partir de 1024px de ancho y escala proporcionalmente
por debajo. A partir de 760px hacia abajo hay un layout
propio para móvil.
============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
margin: 0;
background: #fff;
color: var(--ink);
overflow-x: hidden;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
"Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: none; }
h1, h2, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
/* el contenedor NO puede ser : contain:layout lo volvería bloque
contenedor de los position:fixed y rompería la barra de CTA */
@supports (container-type: inline-size) { .pagewrap { container-type: inline-size; } }
.stage {
/* Unidad de escala. El diseño mide 1024px de ancho: --k es cuánto mide
un "píxel de Figma" en pantalla. Se estira hasta 1.6 para que la página
ocupe todo el ancho en monitores grandes sin degradar las fotos. */
--k: min(1.6px, calc(100vw / 1024));
--ink: #1e1e1e;
--pur: #4d42f7;
--muted: rgba(132, 117, 109, .82);
--cream: #fff0ba;
position: relative;
width: calc(1024 * var(--k));
margin-inline: auto;
}
@supports (container-type: inline-size) {
.stage { --k: min(1.6px, calc(100cqw / 1024)); }
}
/* ============================================================
1 · HERO
============================================================ */
.hero {
position: relative;
isolation: isolate;
/* a sangre: ocupa todo el ancho de la ventana, no sólo el del diseño */
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
overflow: clip;
padding-top: calc(109 * var(--k));
padding-bottom: calc(39 * var(--k));
text-align: center;
}
@supports (container-type: inline-size) {
.hero { width: 100cqw; margin-left: calc((100% - 100cqw) / 2); }
}
/* lienzo centrado del ancho del diseño, para las decoraciones */
.hero__art {
position: absolute;
top: 0;
/* sin transform: crearía un contexto de apilado y anularía los blend modes */
left: calc(50% - 512 * var(--k));
width: calc(1024 * var(--k));
height: 100%;
pointer-events: none;
}
.hero__bg {
position: absolute;
top: calc(-230 * var(--k));
left: calc(50% - 3.5 * var(--k));
transform: translateX(-50%);
width: max(calc(1107 * var(--k)), 100vw);
height: calc(830 * var(--k));
object-fit: cover;
}
@supports (container-type: inline-size) {
.hero__bg { width: max(calc(1107 * var(--k)), 100cqw); }
}
.hero__star { position: absolute; transform: rotate(12.18deg); }
.hero__star--purple {
left: calc(792.91 * var(--k)); top: calc(450 * var(--k));
width: calc(145.13 * var(--k)); height: calc(143.273 * var(--k));
}
.hero__star--yellow {
left: calc(102.03 * var(--k)); top: calc(473.63 * var(--k));
width: calc(116.218 * var(--k)); height: calc(114.771 * var(--k));
}
.hero__wave {
position: absolute;
left: calc(-28 * var(--k)); top: calc(424 * var(--k));
width: calc(1084.87 * var(--k)); height: calc(227.467 * var(--k));
}
.hero__title {
position: relative;
margin-top: calc(-30.934 * var(--k));
font-size: calc(120 * var(--k));
line-height: calc(143 * var(--k));
font-weight: 600;
letter-spacing: 0;
mix-blend-mode: plus-lighter;
}
.hero__title span {
display: inline-block;
background: linear-gradient(90deg, #ffffff 0%, #b2f9ff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 calc(75.4 * var(--k)) rgba(255, 255, 255, .49));
}
.hero__glow {
position: absolute;
left: calc(52.8 * var(--k)); top: calc(80.8 * var(--k));
width: calc(933.4 * var(--k)); height: calc(382.4 * var(--k));
mix-blend-mode: hard-light;
pointer-events: none;
}
.hero__fade {
position: absolute;
left: 0; top: calc(435 * var(--k));
width: 100%; height: calc(165 * var(--k));
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
}
.hero__logo {
position: relative;
width: calc(114.138 * var(--k));
height: calc(30.934 * var(--k));
margin-inline: auto;
}
.hero__meta {
position: relative;
margin-top: calc(-14 * var(--k));
font-size: calc(16 * var(--k));
line-height: calc(19 * var(--k));
font-weight: 500;
letter-spacing: -.0294em;
color: var(--cream);
text-shadow: 0 0 calc(12.7 * var(--k)) rgba(0, 0, 0, .3);
}
/* ── tarjetas de los 3 días ─────────────────────────────── */
.days {
position: relative;
margin-top: calc(120 * var(--k));
display: flex;
justify-content: center;
gap: calc(10 * var(--k));
text-align: left;
}
.day {
position: relative;
width: calc(242 * var(--k));
height: calc(258 * var(--k));
padding: calc(119 * var(--k)) calc(20 * var(--k)) 0 calc(18 * var(--k));
border: 1px solid #fff;
border-radius: calc(14 * var(--k));
backdrop-filter: blur(calc(15.85 * var(--k)));
-webkit-backdrop-filter: blur(calc(15.85 * var(--k)));
background: conic-gradient(from 180deg at 50% 50%,
rgba(237, 249, 255, .93) 0%,
rgba(255, 247, 240, .93) 28%,
rgba(237, 249, 255, .93) 100%);
}
.day:nth-child(2) {
background: conic-gradient(from 180deg at 50% 50%,
rgba(237, 249, 255, .93) 0%,
rgba(255, 247, 240, .93) 57.5%,
rgba(237, 249, 255, .93) 100%);
}
.day:nth-child(3) {
background: conic-gradient(from 180deg at 50% 50%,
rgba(237, 249, 255, .93) 0%,
rgba(255, 247, 240, .93) 16%,
rgba(237, 249, 255, .93) 100%);
}
.day__n {
position: absolute;
top: calc(6 * var(--k));
right: calc(23 * var(--k));
font-size: calc(48 * var(--k));
line-height: calc(57 * var(--k));
font-weight: 500;
color: #fff;
letter-spacing: -.006em;
}
.day__t {
font-size: calc(24 * var(--k));
line-height: calc(29 * var(--k));
font-weight: 600;
color: #000;
letter-spacing: -.0113em;
}
.day__b {
width: calc(180 * var(--k));
margin-top: calc(13 * var(--k));
font-size: calc(16 * var(--k));
line-height: calc(19 * var(--k));
font-weight: 400;
color: var(--muted);
letter-spacing: -.0388em;
}
.day--3 .day__b { width: calc(201 * var(--k)); }
/* ============================================================
2 · COLLAGE
============================================================ */
.collage {
position: relative;
height: calc(344 * var(--k));
}
.collage > * { position: absolute; }
.c-star { transform: rotate(12.18deg); }
.c-star--23 {
left: calc(652.93 * var(--k)); top: calc(44.79 * var(--k));
width: calc(108.782 * var(--k)); height: calc(107.428 * var(--k));
}
.c-star--24 {
left: calc(269.50 * var(--k)); top: calc(155.04 * var(--k));
width: calc(108.782 * var(--k)); height: calc(107.428 * var(--k));
}
.c-photo {
border-radius: calc(22 * var(--k));
overflow: hidden;
}
.c-photo img { position: absolute; }
.c-photo--right {
left: calc(740.63 * var(--k)); top: calc(51.38 * var(--k));
width: calc(368.732 * var(--k)); height: calc(208.364 * var(--k));
transform: rotate(-7.46deg);
}
.c-photo--right img { left: 0; top: -13.69%; width: 100%; height: 132.72%; }
.c-photo--mid {
left: calc(350.88 * var(--k)); top: calc(50.36 * var(--k));
width: calc(354.031 * var(--k)); height: calc(209.38 * var(--k));
transform: rotate(7.1deg);
}
.c-photo--mid img { left: 0; top: -10.8%; width: 100%; height: 126.81%; }
.c-photo--left {
left: calc(-86.09 * var(--k)); top: calc(53.22 * var(--k));
width: calc(398.132 * var(--k)); height: calc(206.515 * var(--k));
transform: rotate(-7.6deg);
}
.c-photo--left img { left: -.12%; top: -44.14%; width: 100.23%; height: 144.14%; }
.c-arrow { position: absolute; }
.c-arrow img { position: absolute; }
.c-arrow--right {
left: calc(670.9 * var(--k)); top: calc(256 * var(--k));
width: calc(97 * var(--k)); height: calc(49 * var(--k));
transform: scaleY(-1);
}
.c-arrow--right img { left: -5.5%; top: 56.34%; width: 111%; height: 54.55%; }
.c-arrow--left {
left: calc(282.9 * var(--k)); top: calc(11 * var(--k));
width: calc(98 * var(--k)); height: calc(50 * var(--k));
}
.c-arrow--left img { left: -5.44%; top: 56.46%; width: 110.88%; height: 54.21%; }
/* ============================================================
3 · LEAD
============================================================ */
.lead {
padding-bottom: calc(16 * var(--k));
text-align: center;
}
.lead__avatars {
display: flex;
justify-content: center;
}
.lead__avatars img {
width: calc(32.804 * var(--k));
height: calc(32.804 * var(--k));
border-radius: 50%;
}
.lead__avatars img + img { margin-left: calc(-15.072 * var(--k)); }
.lead__text {
width: calc(518 * var(--k));
margin: calc(16.196 * var(--k)) auto 0;
font-size: calc(32 * var(--k));
line-height: calc(38 * var(--k));
font-weight: 500;
color: var(--ink);
letter-spacing: -.0128em;
}
.lead__text em { font-style: normal; color: var(--pur); }
/* ============================================================
4 · EVENTO PRESENCIAL
============================================================ */
.evento {
position: relative;
padding-top: calc(72 * var(--k));
padding-bottom: calc(80 * var(--k));
}
.ev__wave {
position: absolute;
left: calc(-55.5 * var(--k)); top: calc(28.59 * var(--k));
width: calc(1055.83 * var(--k)); height: calc(419.09 * var(--k));
}
.ev__star { position: absolute; transform: rotate(12.18deg); }
.ev__star--a {
left: calc(121.19 * var(--k)); top: calc(114.16 * var(--k));
width: calc(157.591 * var(--k)); height: calc(155.545 * var(--k));
}
.ev__star--b {
left: calc(755.19 * var(--k)); top: calc(235.16 * var(--k));
width: calc(157.591 * var(--k)); height: calc(155.545 * var(--k));
}
/* tarjeta de vidrio (compartida con el cierre) */
.glass {
position: relative;
margin-inline: auto;
border: 1px solid #fff;
border-radius: calc(14 * var(--k));
backdrop-filter: blur(calc(53.6 * var(--k)));
-webkit-backdrop-filter: blur(calc(53.6 * var(--k)));
background: conic-gradient(from 180deg at 50% 50%,
rgba(237, 249, 255, .80) 0%,
rgba(255, 255, 255, .80) 100%);
text-align: center;
}
.glass--ev {
width: calc(819 * var(--k));
height: calc(329 * var(--k));
padding-top: calc(54 * var(--k));
}
.glass__logo {
width: calc(82 * var(--k));
height: calc(22.224 * var(--k));
margin-inline: auto;
}
.glass__title {
margin-top: calc(11.8 * var(--k));
font-size: calc(40 * var(--k));
line-height: calc(40 * var(--k));
font-weight: 600;
color: var(--ink);
letter-spacing: -.010em;
}
.glass__title span { color: var(--pur); }
.glass__body {
width: calc(659 * var(--k));
margin: calc(11 * var(--k)) auto 0;
font-size: calc(18 * var(--k));
line-height: 1.59;
font-weight: 400;
color: var(--ink);
letter-spacing: -.027em;
}
.glass__body b { font-weight: 700; }
.glass__body i { font-style: italic; }
/* ============================================================
5 · TARJETA INFO (villa + datos)
============================================================ */
.infowrap { position: relative; }
.info {
position: relative;
width: calc(970 * var(--k));
height: calc(608 * var(--k));
margin-inline: auto;
border-radius: calc(35 * var(--k));
overflow: hidden;
isolation: isolate;
}
.info > * { position: absolute; }
.info__bg {
left: calc(-131 * var(--k)); top: calc(-32 * var(--k));
width: calc(1314 * var(--k)); height: calc(662 * var(--k));
overflow: hidden;
}
.info__bg img { position: absolute; left: 0; top: 0; width: 100%; height: 132.37%; object-fit: cover; }
.info__star {
left: calc(705.91 * var(--k)); top: calc(224.96 * var(--k));
width: calc(145.13 * var(--k)); height: calc(143.273 * var(--k));
transform: rotate(12.18deg);
}
.info__wave {
left: calc(-47.01 * var(--k)); top: calc(207.46 * var(--k));
width: calc(1084.87 * var(--k)); height: calc(227.467 * var(--k));
}
.info__title {
left: calc(110 * var(--k)); top: calc(85 * var(--k));
font-size: calc(140 * var(--k));
line-height: calc(167 * var(--k));
font-weight: 600;
letter-spacing: 0;
mix-blend-mode: overlay;
white-space: nowrap;
}
.info__title span {
display: inline-block;
background: linear-gradient(90deg, #ffffff 0%, #b2f9ff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 calc(75.4 * var(--k)) rgba(255, 255, 255, .49));
}
.info__glow {
left: calc(-23.83 * var(--k)); top: calc(-9.53 * var(--k));
width: calc(1024.61 * var(--k)); height: calc(584.323 * var(--k));
mix-blend-mode: hard-light;
pointer-events: none;
}
.info__inner {
left: calc(-3 * var(--k)); top: calc(32 * var(--k));
width: calc(933 * var(--k)); height: calc(413 * var(--k));
overflow: hidden;
}
.info__inner img { position: absolute; left: -13.67%; top: -15.45%; width: 140.62%; height: 212.14%; object-fit: cover; }
.info__logo {
left: calc(401.03 * var(--k)); top: calc(61.8 * var(--k));
width: calc(158.657 * var(--k)); height: calc(43 * var(--k));
}
.facts {
left: 0; right: 0; top: calc(243 * var(--k));
display: flex;
justify-content: center;
gap: calc(22 * var(--k));
}
.fact {
display: flex;
align-items: center;
gap: calc(11 * var(--k));
height: calc(61 * var(--k));
padding: 0 calc(17 * var(--k)) 0 calc(14 * var(--k));
border: 1px solid #fff;
border-radius: calc(16 * var(--k));
background: rgba(0, 0, 0, .12);
backdrop-filter: blur(calc(7.5 * var(--k)));
-webkit-backdrop-filter: blur(calc(7.5 * var(--k)));
color: #fff;
}
.fact img {
position: static;
width: calc(25.5 * var(--k));
height: calc(29.23 * var(--k));
flex: none;
}
.fact:nth-child(2) img { width: calc(24.5 * var(--k)); height: calc(23.93 * var(--k)); }
.fact:nth-child(3) img { width: calc(27 * var(--k)); height: calc(27 * var(--k)); }
.fact > div { display: flex; flex-direction: column; }
.fact__k {
font-size: calc(14 * var(--k));
line-height: calc(17 * var(--k));
font-weight: 500;
letter-spacing: -.0357em;
}
.fact__v {
font-size: calc(18 * var(--k));
line-height: calc(21 * var(--k));
font-weight: 500;
white-space: nowrap;
letter-spacing: -.025em;
}
/* ============================================================
6 · TESTIMONIOS
============================================================ */
.testi {
padding-top: calc(80 * var(--k));
padding-bottom: calc(72 * var(--k));
text-align: center;
}
.testi__eyebrow {
font-size: calc(20 * var(--k));
line-height: calc(28 * var(--k));
font-weight: 600;
color: var(--pur);
letter-spacing: -.017em;
}
.testi__title {
margin-top: calc(6 * var(--k));
font-size: calc(40 * var(--k));
line-height: calc(48 * var(--k));
font-weight: 600;
color: var(--ink);
letter-spacing: -.00925em;
}
.testi__title span { color: var(--pur); }
.t-grid {
width: calc(920 * var(--k));
margin: calc(32 * var(--k)) auto 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(22 * var(--k)) calc(20 * var(--k));
}
.t-card {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
text-align: left;
}
.t-card__tile {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
padding: 0;
border: 0;
border-radius: calc(12 * var(--k));
background: #1e1e24;
overflow: hidden;
cursor: pointer;
}
.t-card__tile:focus-visible {
outline: 2px solid var(--pur);
outline-offset: calc(3 * var(--k));
}
/* una vez montado el player deja de ser botón */
.t-card__tile--live {
background: #000;
cursor: default;
}
.t-card__tile--live vturb-smartplayer { display: block; width: 100%; }
/* opcional: poné la miniatura del video como primer hijo de .t-card__tile
*/
.t-card__poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.t-card__play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(46 * var(--k));
height: calc(46 * var(--k));
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, .85);
background: rgba(255, 255, 255, .12);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: background .18s ease, transform .18s ease;
}
.t-card__play svg {
display: block;
width: calc(18 * var(--k));
height: calc(20 * var(--k));
}
.t-card__tile:hover .t-card__play,
.t-card__tile:focus-visible .t-card__play {
background: rgba(255, 255, 255, .28);
transform: translate(-50%, -50%) scale(1.06);
}
.t-card__name {
display: block;
margin-top: calc(12 * var(--k));
font-size: calc(15 * var(--k));
line-height: calc(20 * var(--k));
font-weight: 600;
letter-spacing: -.012em;
color: var(--ink);
}
.t-card__rubro {
display: inline-block;
margin-top: calc(5 * var(--k));
padding: calc(3 * var(--k)) calc(9 * var(--k));
border-radius: calc(6 * var(--k));
background: #f1efec;
font-size: calc(11 * var(--k));
line-height: calc(14 * var(--k));
font-weight: 500;
letter-spacing: .01em;
color: #5c5651;
}
/* ============================================================
CTA · botones
============================================================ */
.cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: calc(10 * var(--k));
height: calc(56 * var(--k));
padding: 0 calc(30 * var(--k));
border: 0;
border-radius: calc(14 * var(--k));
background: var(--pur);
color: #fff;
font: inherit;
font-size: calc(17 * var(--k));
font-weight: 600;
letter-spacing: -.01em;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 calc(6 * var(--k)) calc(18 * var(--k)) rgba(77, 66, 247, .24);
transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.cta svg { width: calc(18 * var(--k)); height: calc(18 * var(--k)); flex: none; }
.cta:hover {
background: #3b31d8;
box-shadow: 0 calc(10 * var(--k)) calc(22 * var(--k)) rgba(77, 66, 247, .30);
}
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--pur); }
.cta--ghost {
padding: 0 calc(28 * var(--k));
border: 1px solid #d8d3cd;
background: #fff;
color: var(--ink);
box-shadow: none;
}
.cta--ghost:hover { background: #fff; border-color: var(--ink); box-shadow: none; }
/* sobre la foto del hero: sombra en vez de halo de color */
.cta--photo { box-shadow: 0 calc(10 * var(--k)) calc(28 * var(--k)) rgba(0, 0, 0, .30); }
.cta--photo:hover { box-shadow: 0 calc(14 * var(--k)) calc(32 * var(--k)) rgba(0, 0, 0, .34); }
.cta-note {
margin-top: calc(12 * var(--k));
font-size: calc(14 * var(--k));
line-height: calc(20 * var(--k));
color: #6b6560;
}
.hero__cta { position: relative; margin-top: calc(44 * var(--k)); }
.hero__ctanote {
position: relative;
color: rgba(255, 255, 255, .92);
font-weight: 500;
text-shadow: 0 1px calc(3 * var(--k)) rgba(0, 0, 0, .55), 0 0 calc(16 * var(--k)) rgba(0, 0, 0, .45);
}
.ev__cta {
position: relative;
display: flex;
width: fit-content;
margin: calc(40 * var(--k)) auto 0;
}
.t-more { display: none; }
.t-more[hidden] { display: none; }
.testi__cta { margin-top: calc(32 * var(--k)); }
/* barra fija (sólo móvil) */
.cta-bar { display: none; }
/* ============================================================
LISTA DE ESPERA
============================================================ */
.lista {
padding-top: calc(80 * var(--k));
padding-bottom: calc(80 * var(--k));
text-align: center;
}
.lista__eyebrow {
font-size: calc(20 * var(--k));
line-height: calc(28 * var(--k));
font-weight: 600;
color: var(--pur);
letter-spacing: -.017em;
}
.lista__title {
margin-top: calc(6 * var(--k));
font-size: calc(40 * var(--k));
line-height: calc(48 * var(--k));
font-weight: 600;
color: var(--ink);
letter-spacing: -.00925em;
}
.lista__title span { color: var(--pur); }
.lista__sub {
margin-top: calc(10 * var(--k));
font-size: calc(18 * var(--k));
line-height: calc(26 * var(--k));
color: #6b6560;
letter-spacing: -.027em;
}
.form {
width: calc(819 * var(--k));
margin: calc(32 * var(--k)) auto 0;
padding: calc(40 * var(--k));
border: 1px solid #e6e2dd;
border-radius: calc(14 * var(--k));
background: #fff;
box-shadow: 0 calc(10 * var(--k)) calc(30 * var(--k)) rgba(30, 30, 30, .05);
text-align: left;
}
.form__row { display: flex; gap: calc(20 * var(--k)); }
.form__row + .form__row { margin-top: calc(20 * var(--k)); }
.field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.field label {
margin-bottom: calc(7 * var(--k));
font-size: calc(14 * var(--k));
line-height: calc(20 * var(--k));
font-weight: 600;
color: var(--ink);
}
.field label span { color: var(--pur); }
.field input,
.field select {
box-sizing: border-box;
width: 100%;
height: calc(52 * var(--k));
padding: 0 calc(16 * var(--k));
border: 1px solid #ddd8d2;
border-radius: calc(12 * var(--k));
background: #fff;
font: inherit;
font-size: calc(16 * var(--k));
color: var(--ink);
}
.field input::placeholder { color: #8a837d; }
.field input:focus-visible,
.field select:focus-visible {
outline: 2px solid var(--pur);
outline-offset: 2px;
border-color: var(--pur);
}
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: calc(44 * var(--k)); }
.select__chev {
position: absolute;
right: calc(16 * var(--k));
top: calc(17 * var(--k));
width: calc(18 * var(--k));
height: calc(18 * var(--k));
color: #6b6560;
pointer-events: none;
}
.form__send { width: 100%; margin-top: calc(24 * var(--k)); }
.form__error {
margin-top: calc(14 * var(--k));
padding: calc(12 * var(--k)) calc(16 * var(--k));
border: 1px solid #e3b7ad;
border-radius: calc(12 * var(--k));
background: #fdf4f2;
font-size: calc(14 * var(--k));
line-height: calc(20 * var(--k));
color: #a03a22;
text-align: center;
}
.form__error[hidden] { display: none; }
.form__legal {
margin-top: calc(14 * var(--k));
font-size: calc(13 * var(--k));
line-height: calc(18 * var(--k));
color: #6b6560;
text-align: center;
}
.form-ok {
width: calc(819 * var(--k));
margin: calc(32 * var(--k)) auto 0;
padding: calc(48 * var(--k));
border: 1px solid #e6e2dd;
border-radius: calc(14 * var(--k));
background: #fff;
box-shadow: 0 calc(10 * var(--k)) calc(30 * var(--k)) rgba(30, 30, 30, .05);
}
.form-ok:focus { outline: none; }
.form-ok__check {
display: flex;
align-items: center;
justify-content: center;
width: calc(64 * var(--k));
height: calc(64 * var(--k));
margin-inline: auto;
border-radius: 50%;
background: var(--pur);
color: #fff;
}
.form-ok__check svg { width: calc(30 * var(--k)); height: calc(30 * var(--k)); }
.form-ok__t {
margin-top: calc(18 * var(--k));
font-size: calc(32 * var(--k));
line-height: calc(40 * var(--k));
font-weight: 600;
letter-spacing: -.0128em;
color: var(--ink);
}
.form-ok__b {
width: calc(560 * var(--k));
margin: calc(10 * var(--k)) auto 0;
font-size: calc(18 * var(--k));
line-height: calc(26 * var(--k));
color: #6b6560;
letter-spacing: -.027em;
}
/* ============================================================
7 · VILLA
============================================================ */
.villa {
padding-top: calc(76 * var(--k));
padding-bottom: calc(72.5 * var(--k));
text-align: center;
}
.villa__eyebrow {
font-size: calc(20 * var(--k));
line-height: calc(40 * var(--k));
font-weight: 600;
color: var(--pur);
letter-spacing: -.017em;
}
.villa__title {
font-size: calc(32 * var(--k));
line-height: calc(40 * var(--k));
font-weight: 600;
color: var(--ink);
letter-spacing: -.0128em;
}
.gallery {
width: calc(919 * var(--k));
margin: calc(56 * var(--k)) auto 0;
}
.g-row { display: flex; }
.g-row--a { gap: calc(23 * var(--k)); }
.g-row--b { margin-top: calc(21 * var(--k)); }
.g-row--c { margin-top: calc(21 * var(--k)); gap: calc(15 * var(--k)); }
.g {
position: relative;
border-radius: calc(25 * var(--k));
overflow: hidden;
}
.g img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.g--1 { width: calc(584 * var(--k)); height: calc(439 * var(--k)); }
.g--2 { width: calc(312 * var(--k)); height: calc(439 * var(--k)); }
.g--2 img { left: -74.73%; width: 186.48%; height: 100%; }
.g--3 { width: calc(919 * var(--k)); height: calc(442 * var(--k)); }
.g--3 img { left: -.06%; top: -56.22%; width: 100.11%; height: 156.22%; }
.g--4 { width: calc(390 * var(--k)); height: calc(261 * var(--k)); }
.g--5 { width: calc(514 * var(--k)); height: calc(261 * var(--k)); }
.g--5 img { left: -.06%; top: -29.89%; width: 100.13%; height: 147.89%; }
/* ============================================================
8 · PREGUNTAS
============================================================ */
.faq {
padding-top: calc(80 * var(--k));
padding-bottom: calc(80 * var(--k));
text-align: center;
}
.faq__eyebrow {
font-size: calc(20 * var(--k));
line-height: calc(28 * var(--k));
font-weight: 600;
color: var(--pur);
letter-spacing: -.017em;
}
.faq__title {
margin-top: calc(6 * var(--k));
font-size: calc(40 * var(--k));
line-height: calc(48 * var(--k));
font-weight: 600;
color: var(--ink);
letter-spacing: -.00925em;
}
.faq__title span { color: var(--pur); }
.faq__sub {
margin-top: calc(10 * var(--k));
font-size: calc(18 * var(--k));
line-height: calc(26 * var(--k));
color: #6b6560;
letter-spacing: -.027em;
}
.faq__list {
width: calc(819 * var(--k));
margin: calc(32 * var(--k)) auto 0;
text-align: left;
}
.faq__item {
border: 1px solid #e6e2dd;
border-radius: calc(14 * var(--k));
background: #fff;
transition: border-color .18s ease;
}
.faq__item + .faq__item { margin-top: calc(10 * var(--k)); }
.faq__item[open] { border-color: rgba(77, 66, 247, .30); }
.faq__q {
display: flex;
align-items: center;
gap: calc(16 * var(--k));
padding: calc(20 * var(--k)) calc(24 * var(--k));
font-size: calc(18 * var(--k));
line-height: calc(24 * var(--k));
font-weight: 600;
letter-spacing: -.0311em;
color: var(--ink);
cursor: pointer;
list-style: none;
transition: color .18s ease;
}
/* el triangulito nativo de se saca en los dos motores */
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { color: var(--pur); }
.faq__q:focus-visible {
outline: 2px solid var(--pur);
outline-offset: calc(-3 * var(--k));
border-radius: calc(14 * var(--k));
}
.faq__chev {
width: calc(20 * var(--k));
height: calc(20 * var(--k));
margin-left: auto;
flex: none;
color: #6b6560;
transition: transform .22s ease, color .18s ease;
}
.faq__item[open] .faq__chev {
transform: rotate(180deg);
color: var(--pur);
}
.faq__a {
padding: 0 calc(56 * var(--k)) calc(22 * var(--k)) calc(24 * var(--k));
font-size: calc(17 * var(--k));
line-height: calc(26 * var(--k));
color: #6b6560;
letter-spacing: -.031em;
}
/* ============================================================
9 · CIERRE
============================================================ */
.closing {
position: relative;
padding-top: calc(59.23 * var(--k));
padding-bottom: calc(99.77 * var(--k));
}
.cl__wavewrap {
position: absolute;
/* va detrás de la tarjeta por orden de DOM (z-index:-1 se ocultaría
detrás del fondo del body, que ahora es contexto de apilado) */
left: calc(-36.66 * var(--k));
top: calc(-52.21 * var(--k));
width: calc(1038.74 * var(--k));
height: calc(469.526 * var(--k));
transform: rotate(6.21deg);
}
.cl__wavewrap img {
position: absolute;
left: calc(-18.49 * var(--k)); top: calc(28.64 * var(--k));
width: calc(1055.1 * var(--k)); height: calc(419.068 * var(--k));
}
.glass--cl {
width: calc(919 * var(--k));
height: calc(287 * var(--k));
padding-top: calc(74 * var(--k));
}
.cl__logo {
width: calc(185 * var(--k));
height: calc(50.14 * var(--k));
margin-inline: auto;
}
.cl__text {
width: calc(529 * var(--k));
margin: calc(20.63 * var(--k)) auto 0;
font-size: calc(20 * var(--k));
line-height: calc(28 * var(--k));
font-weight: 400;
color: var(--ink);
letter-spacing: -.015em;
}
/* ============================================================
MÓVIL (< 760px) — layout propio, legible
============================================================ */
@media (max-width: 759.98px) {
.stage { --pad: 22px; }
/* ── hero ── */
.hero {
padding-top: 54px;
padding-bottom: 0;
padding-inline: var(--pad);
}
.hero__bg {
top: 0;
left: 50%;
width: 200%;
height: 470px;
object-position: 50% 100%;
}
.hero__star, .hero__wave { display: none; }
.hero__logo { width: 104px; height: auto; }
.hero__title {
margin-top: 14px;
font-size: clamp(46px, 15vw, 78px);
line-height: 1.1;
letter-spacing: -.5px;
}
.hero__title span { filter: drop-shadow(0 0 26px rgba(255, 255, 255, .5)); }
.hero__glow {
left: -20%; top: 30px;
width: 140%; height: 230px;
}
.hero__meta {
margin-top: 12px;
font-size: 12px;
line-height: 1.4;
letter-spacing: .3px;
}
.hero__fade { top: 270px; height: 200px; }
.days {
margin-top: 295px;
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.day {
width: 100%;
height: auto;
min-height: 0;
padding: 18px 18px 20px;
border-radius: 14px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-color: rgba(255, 255, 255, .9);
box-shadow: 0 6px 24px rgba(30, 30, 30, .06);
background: linear-gradient(160deg, rgba(237, 249, 255, .75), rgba(255, 247, 240, .75));
}
.day__n {
position: static;
display: block;
font-size: 34px;
line-height: 1;
color: var(--pur);
opacity: .3;
font-weight: 600;
}
.day__t { margin-top: 4px; font-size: 21px; line-height: 1.2; }
.day__b, .day--3 .day__b { width: 100%; margin-top: 8px; font-size: 15px; line-height: 1.45; }
/* ── collage ── */
.collage { height: calc(344 * var(--k)); }
/* ── lead ── */
.lead { padding: 40px var(--pad) 0; }
.lead__avatars img { width: 34px; height: 34px; }
.lead__avatars img + img { margin-left: -16px; }
.lead__text {
width: 100%;
max-width: 420px;
margin-top: 16px;
font-size: clamp(21px, 5.8vw, 26px);
line-height: 1.22;
}
/* ── evento ── */
.evento { padding: 56px var(--pad) 64px; }
.ev__wave {
left: -8%; top: 30px;
width: 116%; height: auto;
}
.ev__star--a { left: 4%; top: 70px; width: 96px; height: auto; }
.ev__star--b { left: 72%; top: 250px; width: 96px; height: auto; }
.glass--ev { width: 100%; height: auto; padding: 26px 18px 30px; }
.glass { backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
background: linear-gradient(160deg, rgba(237, 249, 255, .8), rgba(255, 255, 255, .8)); }
.glass__logo { width: 82px; height: auto; }
.glass__title { margin-top: 12px; font-size: clamp(27px, 7.4vw, 34px); line-height: 1.15; }
.glass__body { width: 100%; margin-top: 12px; font-size: 15px; line-height: 1.55; }
/* ── info ── */
.infowrap { padding-inline: var(--pad); }
.info {
width: 100%;
height: auto;
min-height: 400px;
padding: 34px 18px 30px;
border-radius: 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.info > * { position: static; }
.info__bg {
position: absolute;
inset: 0;
left: 0; top: 0;
width: 100%; height: 100%;
}
.info__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.info__star, .info__wave, .info__inner { display: none; }
.info__glow {
position: absolute;
left: -20%; top: 0;
width: 140%; height: 100%;
opacity: .8;
}
.info__logo { width: 120px; height: auto; }
.info__title {
margin-top: 6px;
font-size: clamp(44px, 13.5vw, 74px);
line-height: 1.12;
letter-spacing: -.5px;
}
.info__title span { filter: drop-shadow(0 0 20px rgba(255, 255, 255, .5)); }
.facts {
margin-top: 22px;
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100%;
max-width: 290px;
}
.fact {
height: auto;
padding: 10px 16px;
gap: 12px;
border-radius: 14px;
background: rgba(0, 0, 0, .28);
}
.fact img, .fact:nth-child(2) img, .fact:nth-child(3) img { width: 22px; height: auto; }
.fact__k { font-size: 12px; line-height: 1.3; }
.fact__v { font-size: 16px; line-height: 1.3; }
/* ── testimonios ── */
.testi { padding: 56px var(--pad) 8px; }
.testi__eyebrow { font-size: 16px; line-height: 22px; }
.testi__title { margin-top: 4px; font-size: clamp(27px, 7.4vw, 34px); line-height: 1.15; }
.t-grid {
width: 100%;
margin-top: 24px;
grid-template-columns: 1fr;
gap: 22px;
}
/* en una sola columna, doce videos son 3.000 px de scroll: se muestran seis */
.t-grid > li:nth-child(n+7) { display: none; }
.t-grid.is-open > li:nth-child(n+7) { display: block; }
.t-more {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
height: 50px;
margin: 22px auto 0;
padding: 0 22px;
border: 1px solid #d8d3cd;
border-radius: 12px;
background: #fff;
font: inherit;
font-size: 15px;
font-weight: 600;
letter-spacing: -.01em;
color: var(--ink);
cursor: pointer;
}
.t-more:focus-visible { outline: 2px solid var(--pur); outline-offset: 3px; }
.t-more[hidden] { display: none; }
.t-card__tile { border-radius: 14px; }
.t-card__tile:focus-visible { outline-offset: 3px; }
.t-card__play { width: 54px; height: 54px; }
.t-card__play svg { width: 21px; height: 23px; }
.t-card__name { margin-top: 11px; font-size: 16px; line-height: 21px; }
.t-card__rubro {
margin-top: 5px;
padding: 3px 9px; border-radius: 6px;
font-size: 11px; line-height: 15px;
}
/* ── CTA ── */
.cta {
height: 52px;
padding: 0 22px;
border-radius: 13px;
font-size: 16px;
gap: 9px;
white-space: normal;
text-align: center;
}
.cta svg { width: 17px; height: 17px; }
.cta--ghost { padding: 0 20px; }
.cta-note { margin-top: 10px; font-size: 13px; line-height: 18px; }
.hero__cta { margin-top: 26px; }
.ev__cta { margin-top: 26px; }
.testi__cta { margin-top: 24px; }
.cta-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
border-top: 1px solid #e6e2dd;
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
visibility: hidden;
transform: translateY(110%);
transition: transform .26s ease, visibility 0s linear .26s;
}
.cta-bar.is-on {
visibility: visible;
transform: none;
transition: transform .26s ease, visibility 0s;
}
.cta-bar__note { font-size: 11px; line-height: 15px; color: #6b6560; }
.cta-bar__btn { width: 100%; }
/* ── lista de espera ── */
.lista { padding: 56px var(--pad) 40px; }
.lista__eyebrow { font-size: 16px; line-height: 22px; }
.lista__title { margin-top: 4px; font-size: clamp(25px, 6.8vw, 32px); line-height: 1.15; }
.lista__sub { margin-top: 8px; font-size: 15px; line-height: 21px; }
.form { width: 100%; margin-top: 24px; padding: 20px; }
.form__row { flex-direction: column; gap: 16px; }
.form__row + .form__row { margin-top: 16px; }
.field label { margin-bottom: 7px; font-size: 14px; line-height: 20px; }
.field input, .field select {
height: 52px;
padding: 0 14px;
border-radius: 12px;
font-size: 16px;
}
.select select { padding-right: 42px; }
.select__chev { right: 14px; top: 17px; width: 18px; height: 18px; }
.form__send { margin-top: 20px; height: 54px; }
.form__error { margin-top: 12px; padding: 10px 14px; font-size: 13px; line-height: 19px; }
.form__legal { margin-top: 12px; font-size: 12px; line-height: 17px; }
.form-ok { width: 100%; margin-top: 24px; padding: 28px 20px; }
.form-ok__check { width: 56px; height: 56px; }
.form-ok__check svg { width: 26px; height: 26px; }
.form-ok__t { margin-top: 14px; font-size: 24px; line-height: 30px; }
.form-ok__b { width: 100%; margin-top: 8px; font-size: 15px; line-height: 21px; }
/* ── preguntas ── */
.faq { padding: 56px var(--pad) 40px; }
.faq__eyebrow { font-size: 16px; line-height: 22px; }
.faq__title { margin-top: 4px; font-size: clamp(25px, 6.8vw, 32px); line-height: 1.15; }
.faq__sub { margin-top: 8px; font-size: 15px; line-height: 21px; }
.faq__list { width: 100%; margin-top: 24px; }
.faq__item { border-radius: 14px; }
.faq__item + .faq__item { margin-top: 10px; }
.faq__q {
gap: 12px;
padding: 16px;
font-size: 16px;
line-height: 22px;
}
.faq__q:focus-visible { outline-offset: -3px; border-radius: 14px; }
.faq__chev { width: 18px; height: 18px; }
.faq__a { padding: 0 16px 18px; font-size: 15px; line-height: 23px; }
/* ── cierre ── */
.closing { padding: 40px var(--pad) 70px; }
.cl__wavewrap {
left: -14%; top: 10px;
width: 128%; height: auto;
}
.cl__wavewrap img {
position: static;
left: auto; top: auto;
width: 100%; height: auto;
}
.glass--cl { width: 100%; height: auto; padding: 30px 18px 34px; }
.cl__logo { width: 150px; height: auto; }
.cl__text { width: 100%; margin-top: 16px; font-size: 16px; line-height: 1.45; }
}
/* ── accesibilidad ── */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation: none !important; transition: none !important; }
}