/* felipito.cl · estilos. Colores y tipografía de marca/MARCA.md. Página oscura (única versión; no cambia con el tema del dispositivo).
Los valores base de abajo son los de la página clara; la sección «Página oscura» al final los reemplaza. */
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("fuentes/manrope-latin.woff2") format("woff2");
}
:root {
--fondo: #F5F6F8;
--tarjeta: #FFFFFF;
--linea: #DDE2E8;
--texto: #20242A;
--texto-2: #58616D;
--marino: #1B365D;
--marino-mascota: #0C3473;
--marino-hondo: #0A2550;
--acento: #3974DE;
--acento-hover: #2C62C4;
--celeste: #0FA9C9;
--celeste-osc: #64DFF5;
--salvada: #227455;
--salvada-suave: #E3F3EC;
--sombra: 0 1px 2px rgba(20, 30, 50, .06), 0 10px 30px -12px rgba(20, 30, 50, .18);
--radio: 18px;
--ancho: 1160px;
--wa-fondo: #EFEAE2;
--wa-salida: #D9FDD3;
--wa-boton: #027EB5;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
margin: 0; background: var(--fondo); color: var(--texto);
font: 400 17px/1.6 "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-variant-numeric: tabular-nums; overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
img, video, svg { display: block; max-width: 100%; }
a { color: var(--acento); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 8px; }
.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.saltar { position: absolute; left: 12px; top: -60px; background: var(--texto); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 100; }
.saltar:focus { top: 12px; }
/* Marca: palabra en currentColor, puntos de las «i» en celeste */
.marca { height: 28px; width: auto; color: var(--texto); }
.marca-punto { fill: var(--celeste); }
.oscura .marca, .pie .marca { color: #F4F5F6; }
/* Texto */
.antetitulo { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--marino); margin-bottom: 12px; }
h1 { font-weight: 800; font-size: clamp(34px, 8.6vw, 60px); line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
h2 { font-weight: 800; font-size: clamp(28px, 6.4vw, 44px); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; max-width: 22ch; }
h3 { font-weight: 800; font-size: 18px; line-height: 1.3; }
.bajada { color: var(--texto-2); font-size: clamp(17px, 2.2vw, 20px); margin-top: 16px; max-width: 60ch; }
.nota { font-size: 13px; color: var(--texto-2); }
.nota-centro { text-align: center; margin-top: 18px; }
/* Botones */
.boton {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 50px; padding: 0 24px; border-radius: 999px; border: 0;
background: var(--acento); color: #fff; font: inherit; font-weight: 600; font-size: 16px;
text-decoration: none; cursor: pointer;
box-shadow: 0 6px 18px -8px rgba(57, 116, 222, .7);
transition: background .2s, transform .2s, box-shadow .2s;
}
.boton:hover { background: var(--acento-hover); transform: translateY(-1px); }
.boton svg { width: 18px; height: 18px; }
.boton-chico { min-height: 40px; padding: 0 16px; font-size: 14px; }
.boton-sec { background: var(--tarjeta); color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--linea); }
.boton-sec:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--acento); }
.boton-grande { min-height: 58px; padding: 0 34px; font-size: 18px; }
/* Encabezado fijo */
.cabecera {
position: sticky; top: 0; z-index: 50;
background: rgba(245, 246, 248, .86);
-webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid transparent; transition: border-color .2s;
}
.cabecera.con-sombra { border-bottom-color: var(--linea); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.cabecera-marca { display: inline-flex; border-radius: 6px; }
.cabecera .marca { height: 26px; }
/* Portada */
.portada { padding: 28px 0 56px; position: relative; overflow: hidden; }
.portada::before {
content: ""; position: absolute; inset: -20% -30% auto auto; width: 720px; height: 720px; border-radius: 50%;
background: radial-gradient(closest-side, rgba(57, 116, 222, .14), transparent); pointer-events: none;
}
.portada::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(rgba(27, 54, 93, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 54, 93, .06) 1px, transparent 1px);
background-size: 40px 40px;
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, #000 20%, transparent 75%);
mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, #000 20%, transparent 75%);
}
.portada-grilla { display: grid; gap: 36px; position: relative; z-index: 1; }
.portada .bajada { margin-top: 18px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.portada-visual { position: relative; display: flex; align-items: flex-start; min-height: 420px; }
.portada-tel { position: relative; z-index: 2; width: 62vw; max-width: 290px; }
.portada-tel figcaption { margin-top: 10px; text-align: center; }
.portada-mascota { position: absolute; z-index: 1; left: 46vw; top: 4%; width: 52vw; max-width: 260px; height: auto; filter: drop-shadow(0 18px 30px rgba(12, 52, 115, .18)); }
@media (min-width: 560px) { .portada-mascota { left: 270px; } }
@media (min-width: 900px) {
.portada { padding: 56px 0 64px; }
.portada-grilla { grid-template-columns: 1.02fr .98fr; align-items: center; gap: 40px; }
.portada-visual { min-height: 560px; }
.portada-tel { width: 290px; margin-top: 40px; }
.portada-mascota { left: 210px; top: 0; width: 360px; max-width: none; }
}
@media (min-width: 1200px) { .portada-mascota { width: 400px; } }
/* Teléfono (marco propio, sin marcas) */
.tel {
position: relative; background: #14171B; border-radius: 34px; padding: 9px;
box-shadow: 0 30px 60px -28px rgba(12, 30, 60, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.tel::before { content: ""; position: absolute; top: 15px; left: 50%; width: 64px; height: 6px; margin-left: -32px; border-radius: 6px; background: #2A2F36; z-index: 2; }
.tel-pantalla { border-radius: 26px; overflow: hidden; background: #fff; }
.tel-captura .tel-pantalla { aspect-ratio: 1170 / 2532; }
.tel-captura img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Maqueta de chat (estilo WhatsApp, sin su logo ni sus íconos) */
.wa { display: flex; flex-direction: column; background: var(--wa-fondo); font-size: 13.5px; line-height: 1.42; color: #111B21; }
.wa-cab { display: flex; align-items: center; gap: 10px; padding: 26px 14px 10px; background: #F0F2F5; border-bottom: 1px solid #E3E6EA; }
.wa-av { width: 38px; height: 38px; border-radius: 50%; background: #DCE7F7; object-fit: cover; }
.wa-cab b { display: block; font-size: 15px; line-height: 1.2; }
.wa-cab span { font-size: 12px; color: #667781; }
.wa-cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 16px; }
.wa-quien { align-self: center; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #667781; }
.wa-dia { align-self: center; background: #fff; color: #54656F; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); margin: 2px 0 4px; }
.wa-msg { display: flex; flex-direction: column; gap: 3px; max-width: 92%; }
.wa-in { align-self: flex-start; }
.wa-out { align-self: flex-end; }
.wa-burbuja { position: relative; background: #fff; border-radius: 4px 12px 12px 12px; padding: 7px 9px 5px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.wa-out .wa-burbuja { background: var(--wa-salida); border-radius: 12px 4px 12px 12px; }
.wa-burbuja p { overflow-wrap: anywhere; }
.wa-burbuja b { font-weight: 800; }
.wa-pie { display: block; font-size: 11.5px; color: #667781; margin-top: 4px; }
.wa-hora { display: block; text-align: right; font-size: 10.5px; color: #667781; margin-top: 2px; }
.wa-botones { display: grid; gap: 3px; }
.wa-boton { display: flex; align-items: center; justify-content: center; gap: 6px; background: #fff; color: var(--wa-boton); font-weight: 600; font-size: 13.5px; padding: 8px; border-radius: 10px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.wa-ico { width: 15px; height: 15px; }
/* Secciones */
.seccion { padding: 60px 0; }
.suave { background: #EEF1F5; }
.oscura { background: var(--marino-mascota); background: linear-gradient(160deg, var(--marino-mascota), var(--marino-hondo)); color: #F4F5F6; }
.oscura .bajada, .oscura .nota { color: #C4CCDA; }
.oscura .antetitulo { color: var(--celeste-osc); }
@media (min-width: 900px) { .seccion { padding: 104px 0; } }
/* Tarjetas */
.tarjetas { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 36px; }
.tarjeta { background: var(--tarjeta); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra); border: 1px solid #E8ECF1; }
.tarjeta h3 { margin-bottom: 6px; }
.tarjeta p { color: var(--texto-2); font-size: 16px; }
.tarjeta .ico { box-sizing: content-box; width: 22px; height: 22px; padding: 8px; border-radius: 11px; color: var(--marino); background: linear-gradient(180deg, #EEF3FC, #E3EBF9); box-shadow: inset 0 0 0 1px rgba(57, 116, 222, .12); margin-bottom: 14px; }
.tarjeta { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
@media (hover: hover) { .tarjeta:hover { transform: translateY(-2px); border-color: #D5DEEA; box-shadow: 0 14px 30px -18px rgba(12, 30, 60, .35); } }
@media (prefers-reduced-motion: reduce) { .tarjeta, .tarjeta:hover { transition: none; transform: none; } }
.numero { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #E7EEFB; color: var(--acento); font-weight: 800; font-size: 14px; margin-bottom: 14px; }
@media (max-width: 719px) {
.tarjeta { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 18px; }
.tarjeta > .ico, .tarjeta > .numero { grid-row: span 2; margin: 2px 0 0; }
.tarjeta > h3, .tarjeta > p, .tarjeta > .salvo-maqueta { grid-column: 2; }
.tarjeta:not(:has(> .ico, > .numero)) { grid-template-columns: 1fr; }
.tarjeta:not(:has(> .ico, > .numero)) > * { grid-column: 1; }
}
@media (min-width: 720px) {
.tres { grid-template-columns: repeat(3, 1fr); }
.cuatro { grid-template-columns: repeat(2, 1fr); }
.seis { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.cuatro { grid-template-columns: repeat(4, 1fr); }
.seis { grid-template-columns: repeat(3, 1fr); }
}
/* La pregunta */
.pregunta-cabeza { display: grid; gap: 18px; }
.pregunta-cara { width: 104px; height: auto; }
@media (min-width: 720px) { .pregunta-cabeza { grid-template-columns: 140px 1fr; align-items: center; gap: 28px; } .pregunta-cara { width: 140px; } }
/* Video */
.video-grilla { display: grid; gap: 32px; align-items: center; }
.video-texto h2 { max-width: 16ch; }
.video-texto .nota { margin-top: 14px; }
.video-marco { position: relative; width: min(78vw, 330px); margin: 0 auto; background: #000; border-radius: 30px; padding: 8px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); }
.video-marco video { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 22px; background: #000; object-fit: cover; }
.video-play {
position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; border: 0;
background: rgba(255, 255, 255, .94); color: var(--marino-mascota); cursor: pointer;
display: grid; place-items: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); transition: transform .2s;
}
.video-play svg { width: 34px; height: 34px; margin-left: 4px; }
.video-play:hover { transform: scale(1.06); }
.video-marco.reproduciendo .video-play { display: none; }
@media (min-width: 900px) { .video-grilla { grid-template-columns: 1fr auto; gap: 80px; } .video-marco { width: 340px; } }
/* Cómo funciona */
.dos-columnas { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 820px) { .dos-columnas { grid-template-columns: 1fr 1fr; } }
.columna { background: var(--tarjeta); border-radius: var(--radio); padding: 26px; box-shadow: var(--sombra); border: 1px solid #E8ECF1; }
.columna-cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.columna-cabeza .ico { width: 42px; height: 42px; padding: 9px; border-radius: 12px; background: #E7EEFB; color: var(--acento); }
.columna-cabeza h3 { font-size: 21px; }
.lista { list-style: none; padding: 0; display: grid; gap: 12px; }
.lista li { position: relative; padding-left: 26px; color: var(--texto-2); }
.lista li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--celeste); }
.remate { margin-top: 32px; font-size: clamp(21px, 3vw, 28px); font-weight: 800; letter-spacing: -.01em; text-align: center; color: var(--marino); text-wrap: balance; }
/* Galerías de pantallas: carrusel en teléfono, fila en computador */
.galeria {
display: flex; gap: 18px; margin: 40px -20px 0; padding: 8px 20px 18px;
overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.galeria::-webkit-scrollbar { display: none; }
.galeria-item { flex: 0 0 min(66vw, 280px); scroll-snap-align: center; }
.galeria-chats { margin-top: 8px; }
@media (min-width: 900px) {
.galeria { overflow: visible; justify-content: center; align-items: flex-start; margin: 48px 0 0; padding: 0; gap: 28px; }
.galeria-item { flex: 0 0 280px; }
.galeria-item:nth-child(2) { margin-top: 40px; }
.galeria-chats { margin-top: 44px; }
.galeria-chats .galeria-item:nth-child(2) { margin-top: 120px; }
}
/* «Lo que salvó tu equipo»: maqueta HTML con datos inventados */
.salvo-maqueta { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--salvada-suave); }
.salvo-cifra { grid-row: span 2; font-size: 38px; font-weight: 800; line-height: 1; color: var(--salvada); }
.salvo-texto { font-weight: 600; font-size: 14px; color: var(--texto); }
.salvo-chip { justify-self: start; font-size: 12px; font-weight: 600; color: var(--salvada); }
.salvo-chip::before { content: "● "; }
/* Tus datos */
.puntos { list-style: none; padding: 0; display: grid; gap: 22px; margin-top: 36px; }
.puntos li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
.puntos .ico { width: 48px; height: 48px; padding: 11px; border-radius: 14px; background: var(--salvada-suave); color: var(--salvada); }
.puntos p { color: var(--texto-2); margin-top: 4px; }
@media (min-width: 900px) { .puntos { grid-template-columns: repeat(3, 1fr); gap: 32px; } .puntos li { grid-template-columns: 1fr; } }
/* Cómo se parte */
.pasos { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 36px; counter-reset: paso; }
.pasos li { position: relative; background: var(--tarjeta); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra); border: 1px solid #E8ECF1; }
.paso-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--marino); color: #fff; font-weight: 800; margin-bottom: 14px; }
.pasos p { color: var(--texto-2); margin-top: 6px; }
@media (min-width: 820px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.condiciones { display: grid; gap: 10px; margin-top: 24px; }
/* Cierre */
.cierre { text-align: center; position: relative; overflow: hidden; }
.cierre::before { content: ""; position: absolute; left: 50%; top: -260px; width: 760px; height: 760px; margin-left: -380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(97, 198, 225, .22), transparent); pointer-events: none; }
.cierre-caja { position: relative; display: flex; flex-direction: column; align-items: center; }
.cierre-cara { width: 132px; height: auto; margin-bottom: 18px; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .3)); }
.cierre h2 { margin: 0 auto; max-width: 20ch; }
.cierre .bajada { margin: 16px auto 0; }
.cierre .boton { margin-top: 30px; background: #fff; color: var(--marino-mascota); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); }
.cierre .boton:hover { background: #EAF6FB; }
/* Pie */
.pie { background: #0B1A33; color: #B0B5BD; padding: 32px 0 calc(32px + env(safe-area-inset-bottom)); font-size: 14px; }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.pie .marca { height: 22px; }
.pie .marca-punto { fill: var(--celeste-osc); }
.pie-textos p + p { margin-top: 2px; }
/* Movimiento: poco y con intención */
.js .revelar { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .revelar.visible { opacity: 1; transform: none; }
.portada-mascota { animation: saludo 6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes saludo { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-1.2deg); } }
.portada-tel .wa-msg { animation: llega .6s cubic-bezier(.2, .7, .2, 1) .5s both; }
@keyframes llega { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
.js .revelar { opacity: 1; transform: none; }
}
/* ===== Página oscura ===== */
:root {
--fondo: #0A1428;
--tarjeta: #111E36;
--linea: #22324F;
--texto: #F4F5F6;
--texto-2: #A9B4C6;
--marino: #8FB4F0;
--acento: #4A86EC;
--acento-hover: #3A74D8;
--celeste: #64DFF5;
--salvada: #5CC79A;
--salvada-suave: rgba(92, 199, 154, .12);
--sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -20px rgba(0, 0, 0, .7);
color-scheme: dark;
}
.marca { color: #F4F5F6; }
.antetitulo { color: var(--celeste); }
.cabecera { background: rgba(10, 20, 40, .82); }
.boton-sec { background: rgba(255, 255, 255, .04); color: var(--texto); box-shadow: inset 0 0 0 1.5px #2C3D5E; }
.boton-sec:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px var(--celeste); }
.portada::before { background: radial-gradient(closest-side, rgba(74, 134, 236, .28), transparent); }
.portada::after { background-image: linear-gradient(rgba(143, 180, 240, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 180, 240, .07) 1px, transparent 1px); }
.portada-mascota { filter: drop-shadow(0 0 60px rgba(100, 223, 245, .18)) drop-shadow(0 18px 30px rgba(0, 0, 0, .5)); }
.tel { background: #05080F; box-shadow: 0 30px 70px -26px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.tel::before { background: #1C222C; }
.suave { background: #0D1932; }
.oscura { background: linear-gradient(160deg, #0F2B5E, #081733); }
.tarjeta, .columna, .pasos li { border-color: #1F2E4A; }
@media (hover: hover) { .tarjeta:hover { border-color: #33507E; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); } }
.tarjeta .ico { color: var(--celeste); background: linear-gradient(180deg, rgba(100, 223, 245, .14), rgba(100, 223, 245, .06)); box-shadow: inset 0 0 0 1px rgba(100, 223, 245, .18); }
.numero, .columna-cabeza .ico { background: rgba(74, 134, 236, .16); color: #8FB4F0; }
.paso-n { background: var(--acento); }
.remate { color: #F4F5F6; }
.remate, h1 { text-shadow: 0 0 40px rgba(74, 134, 236, .15); }
.cierre { background: linear-gradient(180deg, #0F2B5E, #0A1F46); }
.pie { background: #050B18; }
:focus-visible { outline-color: var(--celeste); }
/* Portada: mascota sin fondo. En teléfono, más chica y detrás del teléfono, sin tocar el borde. */
.portada-visual { min-height: 0; padding-top: 0; }
.portada-mascota { left: auto; right: 0; top: -6px; width: 40vw; max-width: 190px; filter: drop-shadow(0 0 40px rgba(100, 223, 245, .16)) drop-shadow(0 16px 24px rgba(0, 0, 0, .45)); }
@media (min-width: 560px) { .portada-mascota { left: 250px; right: auto; width: 200px; } }
@media (min-width: 900px) {
.portada-visual { min-height: 540px; }
.portada-mascota { left: 236px; top: 20px; width: 300px; max-width: none; }
}
@media (min-width: 1200px) { .portada-mascota { left: 250px; width: 320px; } }
/* ===== Movimiento con el scroll =====
Idea tomada de 21st.dev («Container Scroll Animation» de Aceternity y los «text reveal»),
rehecha en CSS y JavaScript sin React ni librerías.
Todo depende de la clase .mov, que movimiento.js pone solo si hay JavaScript y la persona
no pidió «reducir movimiento». Sin ella, la página queda quieta y completa.
--p va de 0 (recién entra a la pantalla) a 1 (en su lugar). */
/* 1. Portada: la mascota se queda atrás al bajar (profundidad) */
.mov .portada-mascota { translate: 0 calc(var(--y, 0) * .16px); }
.mov .portada-tel { translate: 0 calc(var(--y, 0) * -.04px); }
/* 2. La pregunta y el remate: las palabras se encienden a medida que se leen */
.mov [data-mov="palabras"] .pal {
opacity: clamp(.16, calc(var(--p, 1) * (var(--n, 1) + 2) - var(--i, 0)), 1);
transition: opacity .12s linear;
}
/* 3. El video: el teléfono llega inclinado y se endereza (Container Scroll) */
.mov [data-mov="enderezar"] {
transform: perspective(1100px)
rotateX(calc((1 - var(--p, 1)) * 28deg))
scale(calc(.84 + var(--p, 1) * .16))
translateY(calc((1 - var(--p, 1)) * 40px));
transform-origin: 50% 70%;
will-change: transform;
}
.mov .video-marco.reproduciendo { transform: none; }
/* 4. Galerías de pantallas */
/* En computador: los teléfonos llegan juntos al centro y se abren en abanico */
@media (min-width: 900px) {
.mov [data-mov="abanico"] .galeria-item { will-change: transform; }
.mov [data-mov="abanico"] .galeria-item:nth-child(2) { position: relative; z-index: 2; }
/* tres teléfonos */
.mov [data-mov="abanico"] .galeria-item:first-child:nth-last-child(3) {
transform: translateX(calc((1 - var(--p, 1)) * 80%)) rotate(calc((1 - var(--p, 1)) * -10deg));
}
.mov [data-mov="abanico"] .galeria-item:nth-child(2):nth-last-child(2) {
transform: translateY(calc((1 - var(--p, 1)) * 70px)) scale(calc(.94 + var(--p, 1) * .06));
}
.mov [data-mov="abanico"] .galeria-item:nth-child(3):last-child {
transform: translateX(calc((1 - var(--p, 1)) * -80%)) rotate(calc((1 - var(--p, 1)) * 10deg));
}
/* dos teléfonos */
.mov [data-mov="abanico"] .galeria-item:first-child:nth-last-child(2) {
transform: translateX(calc((1 - var(--p, 1)) * 45%)) rotate(calc((1 - var(--p, 1)) * -7deg));
}
.mov [data-mov="abanico"] .galeria-item:nth-child(2):last-child {
transform: translateX(calc((1 - var(--p, 1)) * -45%)) rotate(calc((1 - var(--p, 1)) * 7deg));
}
}
/* En teléfono (carrusel): la fila llega inclinada y se endereza */
@media (max-width: 899px) {
.mov [data-mov="abanico"] {
transform: perspective(900px) rotateX(calc((1 - var(--p, 1)) * 22deg)) scale(calc(.9 + var(--p, 1) * .1));
transform-origin: 50% 100%;
will-change: transform;
}
}
/* 5. Los chats se escriben solos: los mensajes llegan uno tras otro al aparecer el teléfono */
.mov .tel-chat[data-mov-chat] .wa-msg {
opacity: 0; transform: translateY(14px) scale(.97);
transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
transition-delay: calc(var(--k, 0) * 900ms + 150ms);
}
.mov .tel-chat[data-mov-chat].en-vivo .wa-msg { opacity: 1; transform: none; }
/* 6. Cierre: la cara feliz sube y crece */
.mov [data-mov="cierre"] .cierre-cara {
transform: translateY(calc((1 - var(--p, 1)) * 50px))
scale(calc(.6 + var(--p, 1) * .4))
rotate(calc((1 - var(--p, 1)) * -12deg));
}
.mov [data-mov="cierre"]::before { opacity: calc(.3 + var(--p, 1) * .7); }
/* ===== Felipito saluda (portada) =====
.portada-mascota pasa de ser un ![]()
a una caja con la imagen quieta adentro.
saluda.js le agrega un