/* Villa Panty VSL - sistema de pagina "Tinta y papel" - by hanssilver.com */ /* Blanco = papel. Rosado = atencion. Negro = tinta, nunca fondo. */ /* Los tokens van en :root y no en un contenedor: en WordPress el no lleva ninguna clase nuestra y las secciones son hermanas, no anidadas. */ :root { /* ---- Tinta ---- */ --vp-ink: #1c1a20; --vp-ink-2: #514c56; --vp-ink-3: #8f8496; /* ---- Rosado ---- */ --vp-pink: #eb589d; --vp-pink-deep: #bc3f79; --vp-pink-soft: #f4dbe7; --vp-pink-tint: #fdeff5; --vp-line: #f0c4d8; /* ---- Papel ---- */ --vp-paper: #ffffff; --vp-green: #0e7a3f; --vp-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ---- Ritmo ---- */ --vp-wide: 1140px; --vp-narrow: 720px; --vp-gut: clamp(20px, 5vw, 32px); --vp-band: clamp(64px, 9vw, 124px); /* ---- Curvas (las nativas de CSS no tienen fuerza) ---- */ --vp-out: cubic-bezier(0.23, 1, 0.32, 1); --vp-in-out: cubic-bezier(0.77, 0, 0.175, 1); } /* Contenedores raiz del sistema. La tipografia se declara aqui para no quedar a merced de la fuente que traiga el tema de WordPress. */ .vp, .vp-band, .vp-head, .vp-foot, .vp-recall { color: var(--vp-ink); font-family: var(--vp-font); } .vp { background: var(--vp-paper); } .vp *, .vp *::before, .vp *::after, .vp-band *, .vp-band *::before, .vp-band *::after, .vp-head *, .vp-foot *, .vp-recall * { box-sizing: border-box; } /* ============================================================ 1. Escala tipografica El negro deja de ser fondo, asi que el peso visual lo carga el tamano. Tracking negativo en los cuerpos grandes: es lo que separa una tipografia dispuesta de una tipografia por defecto. ============================================================ */ .vp-display { margin: 0; font-size: clamp(2.1rem, 0.95rem + 5.2vw, 5.25rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; color: var(--vp-ink); text-wrap: balance; } .vp-h2 { margin: 0; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.028em; color: var(--vp-ink); text-wrap: balance; } .vp-h3 { margin: 0; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.012em; color: var(--vp-ink); } .vp-lead { margin: 0; font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem); font-weight: 400; line-height: 1.55; color: var(--vp-ink-2); text-wrap: pretty; } .vp-body { margin: 0; font-size: 1rem; line-height: 1.62; color: var(--vp-ink-2); text-wrap: pretty; } .vp-meta { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--vp-ink-3); } /* Etiqueta de seccion: numero + label sobre una linea de 1px. Sustituye a la pildora "eyebrow" que repetia cada seccion. */ .vp-tag { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(20px, 3vw, 30px); padding-bottom: 14px; border-bottom: 1px solid var(--vp-line); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vp-ink-3); } .vp-tag::before { content: attr(data-n); display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--vp-pink); color: #fff; font-size: 0.72rem; letter-spacing: 0; } /* ============================================================ 2. El subrayador La firma de la pagina. Un campo rosado detras de la palabra que importa, revelado con clip-path al entrar en pantalla. Es explicativo y se ve una vez: puede permitirse durar mas. ============================================================ */ .vp-mark { position: relative; display: inline-block; /* Un subrayador partido en dos lineas deja de leerse como un trazo */ white-space: nowrap; color: var(--vp-ink); background: none; isolation: isolate; } .vp-mark::before { content: ""; position: absolute; z-index: -1; left: -0.12em; right: -0.12em; top: 0.12em; bottom: 0.02em; background: var(--vp-pink-tint); border-bottom: 3px solid var(--vp-pink); clip-path: inset(0 100% 0 0); transition: clip-path 620ms var(--vp-out) 120ms; } .vp-mark[data-in="1"]::before { clip-path: inset(0 0 0 0); } /* Variante llena, para el cierre */ .vp-mark--solid { color: #fff; } .vp-mark--solid::before { background: var(--vp-pink-deep); border-bottom: 0; top: 0.06em; bottom: -0.02em; border-radius: 4px; } /* ============================================================ 3. Estructura Sin bandas de color alternas. La separacion la hacen el aire y las lineas de 1px. ============================================================ */ .vp-band { padding-block: var(--vp-band); padding-inline: var(--vp-gut); background: var(--vp-paper); } /* La UNICA superficie rosada de la pagina: donde se decide. */ .vp-band--field { background: var(--vp-pink-tint); } .vp-band--tight { padding-block: clamp(40px, 6vw, 72px); } .vp-band + .vp-band { border-top: 1px solid var(--vp-pink-soft); } .vp-band--field + .vp-band, .vp-band + .vp-band--field { border-top: 0; } .vp-wrap { width: 100%; max-width: var(--vp-wide); margin-inline: auto; } .vp-wrap--narrow { max-width: var(--vp-narrow); } .vp-center { text-align: center; } .vp-stack > * + * { margin-top: var(--vp-s, 16px); } .vp-stack--lg { --vp-s: 24px; } .vp-stack--xl { --vp-s: 36px; } .vp-grid { display: grid; gap: clamp(14px, 2vw, 20px); } @media (min-width: 720px) { .vp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ============================================================ 4. Cabecera ============================================================ */ .vp-head { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--vp-gut); background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--vp-pink-soft); } .vp-head__logo { display: block; height: 34px; width: auto; } .vp-head__right { display: flex; align-items: center; gap: 14px; } .vp-head__note { display: none; font-size: 0.82rem; color: var(--vp-ink-3); } @media (min-width: 860px) { .vp-head__note { display: block; } } /* ============================================================ 5. Botones Escala al presionar: la interfaz confirma que escucho. ============================================================ */ .vp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 28px; border: 0; border-radius: 999px; font-family: var(--vp-font); font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 160ms var(--vp-out), background-color 160ms ease, color 160ms ease; } .vp-btn:active { transform: scale(0.97); } .vp-btn:focus-visible { outline: 3px solid var(--vp-pink-deep); outline-offset: 3px; } .vp-btn--primary { background: var(--vp-pink-deep); color: #fff; } .vp-btn--wa { background: var(--vp-green); color: #fff; } .vp-btn--ghost { background: transparent; color: var(--vp-ink); box-shadow: inset 0 0 0 2px var(--vp-line); } .vp-btn--sm { min-height: 44px; padding: 10px 20px; font-size: 0.92rem; } @media (hover: hover) and (pointer: fine) { .vp-btn--primary:hover { background: #a83569; } .vp-btn--wa:hover { background: #0a6533; } .vp-btn--ghost:hover { background: var(--vp-pink-tint); box-shadow: inset 0 0 0 2px var(--vp-pink); } } /* ============================================================ 6. Heroe ============================================================ */ .vp-hero { padding-block: clamp(44px, 7vw, 88px) clamp(32px, 5vw, 56px); } .vp-hero__kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 7px 16px 7px 8px; border-radius: 999px; background: var(--vp-pink-tint); color: var(--vp-pink-deep); font-size: 0.78rem; font-weight: 600; line-height: 1.3; } .vp-hero__kicker b { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--vp-pink); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .vp-hero__lead { margin: 22px auto 0; max-width: 60ch; } /* Marco del video: hairline rosada y etiqueta anclada. El negro esta prohibido de fondo, asi que el peso lo da el borde. */ .vp-frame { position: relative; margin-top: clamp(28px, 4vw, 44px); border: 1px solid var(--vp-line); border-radius: 20px; background: var(--vp-pink-tint); padding: 10px; } .vp-frame__tag { position: absolute; top: -11px; left: 24px; z-index: 2; padding: 3px 12px; border-radius: 999px; background: var(--vp-pink); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .vp-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 12px; overflow: hidden; background: var(--vp-pink-soft); cursor: pointer; } .vp-video iframe, .vp-video img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } .vp-video__play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--vp-pink-deep); color: #fff; transform: translate(-50%, -50%); transition: transform 200ms var(--vp-out); box-shadow: 0 16px 40px -16px rgba(188, 63, 121, 0.9); } .vp-video__play svg { width: 26px; height: 26px; margin-left: 4px; } .vp-video:active .vp-video__play { transform: translate(-50%, -50%) scale(0.94); } @media (hover: hover) and (pointer: fine) { .vp-video:hover .vp-video__play { transform: translate(-50%, -50%) scale(1.06); } } .vp-video__hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--vp-pink-deep); } /* ============================================================ 7. Riel de cifras Las tres cifras suben por encima del quiz: la prueba tiene que llegar antes que la peticion, no despues. ============================================================ */ .vp-rail { display: grid; gap: 0; border-top: 1px solid var(--vp-line); border-bottom: 1px solid var(--vp-line); } @media (min-width: 720px) { .vp-rail { grid-template-columns: repeat(3, 1fr); } } .vp-rail__cell { padding: clamp(22px, 3.4vw, 34px) clamp(14px, 2.4vw, 28px); border-top: 1px solid var(--vp-pink-soft); } .vp-rail__cell:first-child { border-top: 0; } @media (min-width: 720px) { .vp-rail__cell { border-top: 0; border-left: 1px solid var(--vp-pink-soft); text-align: center; } .vp-rail__cell:first-child { border-left: 0; } } .vp-rail__n { display: block; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--vp-pink-deep); } .vp-rail__t { display: block; margin-top: 8px; font-size: 0.92rem; line-height: 1.45; color: var(--vp-ink-2); } /* Reversion de riesgo. Vivia enterrada en la pregunta 5 del FAQ, que es donde nadie la lee. Va pegada a la decision. */ .vp-assure { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin: 22px auto 0; max-width: 640px; font-size: 0.86rem; line-height: 1.4; color: var(--vp-ink-2); text-align: center; } .vp-assure span { display: inline-flex; align-items: center; gap: 7px; } .vp-assure svg { width: 16px; height: 16px; flex: none; color: var(--vp-pink); } /* ============================================================ 8. Tarjetas hairline Sin sombra gris. La sombra se reserva para lo que de verdad flota, que en esta pagina es una sola cosa: el quiz. ============================================================ */ .vp-card { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--vp-line); border-radius: 16px; background: var(--vp-paper); } .vp-card--field { background: var(--vp-pink-tint); border-color: var(--vp-pink-soft); } .vp-list { margin: 0; padding: 0; list-style: none; } .vp-list li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--vp-pink-soft); font-size: 0.98rem; line-height: 1.5; color: var(--vp-ink-2); } .vp-list li:first-child { border-top: 0; padding-top: 0; } .vp-list svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--vp-pink); } .vp-list b { color: var(--vp-ink); font-weight: 600; } /* ============================================================ 9. Testimonios ============================================================ */ .vp-quote { display: flex; flex-direction: column; gap: 14px; height: 100%; } .vp-quote__stars { display: flex; gap: 3px; color: var(--vp-pink); } .vp-quote__stars svg { width: 17px; height: 17px; } .vp-quote__text { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--vp-ink); } .vp-quote__who { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--vp-pink-soft); font-size: 0.86rem; color: var(--vp-ink-3); } .vp-quote__who b { display: block; color: var(--vp-ink); font-weight: 600; } .vp-warn { margin-top: 20px; padding: 14px 18px; border: 1px dashed var(--vp-line); border-radius: 12px; font-size: 0.86rem; color: var(--vp-ink-3); text-align: center; } /* ============================================================ 10. FAQ Acordeon real. Seis cajas abiertas a la vez son seis objeciones gritando a la vez; plegadas, la persona elige la suya. ============================================================ */ .vp-faq { border-top: 1px solid var(--vp-pink-soft); } .vp-faq__item { border-bottom: 1px solid var(--vp-pink-soft); } .vp-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 4px; border: 0; background: none; font-family: var(--vp-font); font-size: clamp(1rem, 0.96rem + 0.25vw, 1.1rem); font-weight: 600; line-height: 1.35; text-align: left; color: var(--vp-ink); cursor: pointer; transition: color 160ms ease; } .vp-faq__q:focus-visible { outline: 3px solid var(--vp-pink-deep); outline-offset: -3px; border-radius: 8px; } @media (hover: hover) and (pointer: fine) { .vp-faq__q:hover { color: var(--vp-pink-deep); } } .vp-faq__sign { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--vp-pink-tint); color: var(--vp-pink-deep); transition: transform 220ms var(--vp-out), background-color 220ms ease; } .vp-faq__sign svg { width: 15px; height: 15px; } .vp-faq__item[data-open="1"] .vp-faq__sign { transform: rotate(45deg); background: var(--vp-pink); color: #fff; } /* 0fr -> 1fr: la unica forma de animar alto automatico sin medir en JS */ .vp-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--vp-out); } .vp-faq__item[data-open="1"] .vp-faq__a { grid-template-rows: 1fr; } .vp-faq__a > div { overflow: hidden; } .vp-faq__a p { margin: 0; padding: 0 4px 22px; font-size: 0.98rem; line-height: 1.6; color: var(--vp-ink-2); max-width: 62ch; } /* ============================================================ 11. Cierre y pie ============================================================ */ .vp-close { text-align: center; } .vp-close__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; } .vp-foot { padding: clamp(34px, 5vw, 52px) var(--vp-gut); border-top: 1px solid var(--vp-pink-soft); background: var(--vp-paper); text-align: center; } .vp-foot__logo { display: block; height: 30px; width: auto; margin: 0 auto 16px; } .vp-foot__links { display: flex; justify-content: center; gap: 20px; margin-top: 12px; } .vp-foot__links a { color: var(--vp-pink-deep); font-size: 0.9rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 160ms ease; } @media (hover: hover) and (pointer: fine) { .vp-foot__links a:hover { border-bottom-color: var(--vp-pink); } } /* ============================================================ 12. Barra de rescate Arregla la fuga real del embudo: la pagina pedia "vuelve arriba". Si pasas el quiz sin responder, la decision te sigue. ============================================================ */ .vp-recall { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--vp-gut); padding-bottom: max(12px, env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-top: 1px solid var(--vp-line); transform: translateY(100%); visibility: hidden; transition: transform 260ms var(--vp-out), visibility 0s linear 260ms; } .vp-recall[data-show="1"] { transform: translateY(0); visibility: visible; transition: transform 260ms var(--vp-out), visibility 0s; } .vp-recall__t { min-width: 0; font-size: 0.92rem; font-weight: 600; line-height: 1.35; color: var(--vp-ink); } .vp-recall__t span { display: block; font-weight: 400; font-size: 0.8rem; color: var(--vp-ink-3); } /* ============================================================ 14. Utilidades Existen para que el markup no necesite ni un solo atributo style=. WordPress los borra al guardar si el usuario no tiene unfiltered_html, y entonces la maqueta se descuadra entera. ============================================================ */ .vp-d1 { --vp-d: 60ms; } .vp-d2 { --vp-d: 70ms; } .vp-d3 { --vp-d: 120ms; } .vp-d4 { --vp-d: 140ms; } .vp-d5 { --vp-d: 180ms; } .vp-d6 { --vp-d: 220ms; } .vp-mt-s { margin-top: 16px; } .vp-mt-m { margin-top: 18px; } .vp-mt-l { margin-top: clamp(26px, 4vw, 40px); } .vp-mt-xl { margin-top: clamp(28px, 4vw, 44px); } .vp-mw-760 { max-width: 760px; margin-inline: auto; } .vp-mw-18 { max-width: 18ch; } .vp-mw-20 { max-width: 20ch; } .vp-mw-16 { max-width: 16ch; } .vp-unit { font-size: 0.5em; } .vp-ico { width: 1.3em; height: 1.3em; } .vp-pt0 { padding-top: 0; } /* ============================================================ 13. Entradas Nada aparece de la nada: siempre desde un estado ya visible. ============================================================ */ .vp-in { opacity: 0; transform: translateY(14px); transition: opacity 460ms var(--vp-out), transform 460ms var(--vp-out); transition-delay: var(--vp-d, 0ms); } .vp-in[data-in="1"] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .vp-in { opacity: 1; transform: none; transition: none; } .vp-mark::before { clip-path: inset(0 0 0 0); transition: none; } .vp-recall { transition: none; } .vp-faq__a { transition: none; } .vp-band *, .vp-head *, .vp-foot *, .vp-recall * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .vp-btn:active, .vp-video:active .vp-video__play { transform: none; } } /* ============================================================ 15. Armadura contra el tema La pagina vive dentro de WordPress, con el CSS del tema y el de Elementor cargados por encima. Una regla del tema del tipo ".page h1 { font-size: 2rem }" tiene mas especificidad que ".vp-display" y descuadra la maqueta entera. Repetir la clase sube la especificidad a (0,2,0) sin recurrir a !important, que es lo que hay que evitar mientras se pueda. ============================================================ */ .vp-band.vp-band { padding-block: var(--vp-band); padding-inline: var(--vp-gut); margin: 0; } .vp-band--tight.vp-band--tight { padding-block: clamp(40px, 6vw, 72px); } .vp-wrap.vp-wrap { width: 100%; max-width: var(--vp-wide); margin-inline: auto; float: none; } .vp-wrap--narrow.vp-wrap--narrow { max-width: var(--vp-narrow); } .vp-display.vp-display { margin: 0; font-size: clamp(2.1rem, 0.95rem + 5.2vw, 5.25rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; text-transform: none; } .vp-h2.vp-h2 { margin: 0; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.028em; text-transform: none; } .vp-h3.vp-h3 { margin: 0; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem); font-weight: 700; line-height: 1.25; text-transform: none; } .vp-lead.vp-lead { margin: 0; font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem); font-weight: 400; line-height: 1.55; } .vp-body.vp-body { margin: 0; font-size: 1rem; line-height: 1.62; } .vp-meta.vp-meta { margin: 0; font-size: 0.875rem; line-height: 1.5; } /* Los temas suelen poner vinetas, margenes y padding a las listas */ .vp-list.vp-list { margin: 0; padding: 0; list-style: none; } .vp-list.vp-list li { margin: 0; list-style: none; display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; } .vp-list.vp-list li::before, .vp-list.vp-list li::marker { content: none; } .vp-list.vp-list li:first-child { padding-top: 0; } /* Y casi todos redefinen los botones enteros */ .vp-btn.vp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 28px; border: 0; border-radius: 999px; font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; text-transform: none; letter-spacing: normal; width: auto; } .vp-btn--sm.vp-btn--sm { min-height: 44px; padding: 10px 20px; font-size: 0.92rem; } .vp-btn--primary.vp-btn--primary { background: var(--vp-pink-deep); color: #fff; } .vp-btn--wa.vp-btn--wa { background: var(--vp-green); color: #fff; } .vp-btn--ghost.vp-btn--ghost { background: transparent; color: var(--vp-ink); } .vp-faq__q.vp-faq__q { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 20px 4px; border: 0; border-radius: 0; background: none; font-size: clamp(1rem, 0.96rem + 0.25vw, 1.1rem); font-weight: 600; text-align: left; text-transform: none; min-height: 0; } .vp-card.vp-card { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--vp-line); border-radius: 16px; margin: 0; } .vp-rail__n.vp-rail__n { display: block; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; margin: 0; } .vp-quote__text.vp-quote__text { margin: 0; font-size: 1rem; line-height: 1.6; } /* Las imagenes del logo, que el tema suele estirar */ .vp-head__logo.vp-head__logo, .vp-foot__logo.vp-foot__logo { max-width: 100%; border-radius: 0; box-shadow: none; }