/* ============================================================ SALES PAGES — hoja de estilo compartida Tres páginas, dos marcas. El tema se cambia poniendo una clase en el : (ninguna) = BM Workshops · .tema-fm = Fashion Money ============================================================ */ :root{ /* --- BM Workshops (diplomados) --- */ --acento:#CFE81A; /* lima */ --acento-osc:#A7BC0E; --acento2:#E96FD0; /* magenta */ --acento3:#F0A8F0; /* lila */ --tinta:#141210; --papel:#FBFAF7; --gris:#6B6560; --linea:rgba(20,18,16,.12); --linea-clara:rgba(251,250,247,.2); --font-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; --font-display:'Archivo Black',Impact,sans-serif; --display-italic:italic; --display-track:-.02em; --max:1180px; --radio:8px; } /* --- Fashion Money --- */ .tema-fm{ --acento:#3C2EEF; /* azul */ --acento-osc:#2A1FC0; --acento2:#FF08E8; /* rosa neón */ --acento3:#E7D4FC; /* lila claro */ --tinta:#0C0A22; --papel:#FAFAFF; --gris:#6A6790; --linea:rgba(12,10,34,.12); /* La tipografía es la misma de BM Workshops (Archivo / Archivo Black itálica). Fashion Money solo cambia de color, no de letra. */ } /* En BM Workshops el acento es lima y contrasta sobre la tinta. En Fashion Money el acento es azul y la tinta es azul marino: azul sobre azul marino no se lee. Sobre fondo oscuro, Fashion Money usa papel o rosa. */ .tema-fm .marquee, .tema-fm .badge, .tema-fm .wa, .tema-fm footer a, .tema-fm .oscuro h2.sec, .tema-fm .mod summary::after, .tema-fm .sello{color:var(--papel)} .tema-fm .sello{border-color:var(--acento2)} .tema-fm .marquee span::after{color:var(--acento2)} .tema-fm .mod-body li::before{background:var(--acento2)} .tema-fm .plan.destacado .btn-dark{background:var(--acento2);color:var(--papel)} .tema-fm .plan.destacado .btn-dark:hover{background:var(--papel);color:var(--tinta)} /* sobre azul el texto va claro */ .tema-fm .acento{color:var(--papel)} .tema-fm .acento .btn-ghost{color:var(--papel);border-color:var(--papel)} .tema-fm .acento .btn-ghost:hover{background:var(--papel);color:var(--acento)} /* El párrafo del cierre heredaba la tinta (#0C0A22) y quedaba azul marino sobre azul: 1.94 de contraste, ilegible. Va en papel como el titular. */ .tema-fm .final h2,.tema-fm .final p,.tema-fm .creds{color:var(--papel)} .tema-fm .creds span{color:rgba(250,250,255,.85)} .tema-fm .mod .num,.tema-fm .kit li::before,.tema-fm .pasos div::before{color:var(--papel)} .tema-fm .check li::before{color:var(--papel)} .tema-fm .oferta{color:var(--papel)} .tema-fm .oferta .precio-caja{color:var(--tinta)} *{box-sizing:border-box;margin:0;padding:0} /* El atributo hidden lo anula cualquier regla con display propio —por ejemplo .btn-sub{display:block}— y las notas internas marcadas como ocultas se veían igual. Ya había un parche suelto para .contador; esto lo resuelve para todo el sitio. */ [hidden]{display:none !important} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--papel);color:var(--tinta); font-family:var(--font-body);font-size:17px;line-height:1.6;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} .wrap-sm{max-width:860px;margin:0 auto;padding:0 24px} /* ---------- tipografía ---------- */ .display{ font-family:var(--font-display);font-style:var(--display-italic); line-height:.9;letter-spacing:var(--display-track);text-transform:uppercase; } .eyebrow{font-weight:800;font-size:13px;letter-spacing:.34em;text-transform:uppercase} /* Sobre el degradado claro del hero el eyebrow se diluía: va en pastilla. */ .eyebrow-chip{ display:inline-block;background:var(--tinta);color:var(--papel); padding:9px 18px;border-radius:100px;letter-spacing:.2em; } h2.sec{ font-family:var(--font-display);font-style:var(--display-italic);text-transform:uppercase; font-size:clamp(32px,5.6vw,60px);line-height:.94;letter-spacing:var(--display-track); } h3.sub{font-size:clamp(21px,3vw,28px);font-weight:800;line-height:1.2} .lead{font-size:clamp(17px,2vw,20px);font-weight:500} /* La frase de posicionamiento de Fashion Money va en bold, con cuerpo de título pero en caja baja: es una afirmación, no un encabezado. */ .frase-marca{ font-family:var(--font-display);font-style:var(--display-italic); font-size:clamp(24px,3.4vw,38px);line-height:1.14; letter-spacing:var(--display-track);max-width:30ch;margin:0 auto;text-wrap:balance; } /* ---------- frase de marca con mezcla de tipografías ---------- */ /* Karla la pidió "con más estilo, que no todas las letras sean iguales": las palabras que cargan el mensaje van en display grande y blanco, los conectores en la de texto, chiquitos y en lila (5.38 sobre el azul), y una línea va en contorno para romper el bloque. */ /* Karla la quiso "más horizontal, no tan vertical": con 24ch cada frase se partía en dos y salían once renglones. A 38ch cada una entra completa. */ .frase-mix{max-width:38ch;display:block} .frase-mix b, .frase-mix em{display:block;font-family:var(--font-display);font-style:var(--display-italic);font-weight:400} .frase-mix b{font-size:clamp(28px,4.8vw,54px);line-height:1;color:var(--papel)} .frase-mix em{ font-size:clamp(25px,4.2vw,48px);line-height:1.02;color:transparent; -webkit-text-stroke:2px var(--papel); } .frase-mix .chico{ display:block;font-family:var(--font-body);font-style:normal;font-weight:700; font-size:clamp(12px,1.4vw,16px);letter-spacing:.16em;text-transform:uppercase; color:#E7D4FC;line-height:1.5;margin:14px 0 6px; } .frase-mix .chico:first-child{margin-top:0} @media (max-width:600px){.frase-mix em{-webkit-text-stroke-width:1.4px}} /* ---------- casos de negocio ---------- */ /* El titular es largo: al tamaño normal de sección se partía en seis líneas y dejaba media pantalla vacía. */ .casos-head{max-width:62ch} .casos-head h2.sec{font-size:clamp(28px,4vw,48px)} .casos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px} .casos article{ background:var(--papel);border-radius:var(--radio);padding:26px 24px; border:1px solid var(--linea);transition:transform .25s ease; } .casos article:hover{transform:translateY(-3px)} .casos .marca{display:block;color:var(--acento2);font-size:17px;line-height:1;margin-bottom:12px} .casos h3{font-size:19px;font-weight:800;margin-bottom:8px;line-height:1.25} .casos p{font-size:15.5px;color:var(--gris);line-height:1.62} .casos p b{color:var(--tinta)} .casos-cierre{ margin-top:32px;padding:32px 30px;border-radius:var(--radio); background:var(--tinta);color:var(--papel);text-align:center; } .casos-cierre h3{ font-family:var(--font-display);font-style:var(--display-italic);text-transform:uppercase; font-size:clamp(24px,3.4vw,38px);line-height:1.05;margin-bottom:14px; } .casos-cierre p{color:rgba(250,250,255,.82);max-width:60ch;margin:0 auto 10px;line-height:1.62} .casos-cierre p b{color:var(--papel)} .casos-cierre p:last-child{margin-bottom:0} @media (max-width:900px){.casos{grid-template-columns:1fr}} .todo{ background:var(--acento2);color:#fff;font-size:11px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:3px; display:inline-block;vertical-align:middle; } /* ---------- barra ---------- */ .nav{position:sticky;top:0;z-index:50;background:var(--papel);border-bottom:1px solid var(--linea)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px} .logo{ font-family:var(--font-display);font-style:var(--display-italic);text-transform:uppercase; font-size:19px;letter-spacing:var(--display-track);text-decoration:none; } .logo span{color:var(--acento-osc)} .nav-cta{ background:var(--tinta);color:var(--papel);text-decoration:none;font-weight:800; font-size:14px;padding:11px 20px;border-radius:100px;white-space:nowrap;transition:background .2s; } .nav-cta:hover{background:var(--acento-osc)} .nav-links{display:flex;align-items:center;gap:22px} /* Atajos a los tres programas, al lado del logo. */ .nav-progs{display:flex;align-items:center;gap:18px} .nav-progs a{ text-decoration:none;font-weight:800;font-size:13px;letter-spacing:.12em; text-transform:uppercase;color:var(--tinta);white-space:nowrap; } /* El subrayado crece de izquierda a derecha al pasar el mouse. Va en currentColor a propósito: cada página tiene su acento y varios de ellos (el lima oscuro del hub, por ejemplo) no se leen sobre el papel. */ .nav .logo, .nav-progs a{position:relative;padding-bottom:4px} .nav .logo::after, .nav-progs a::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:2px; background:currentColor;transition:right .28s cubic-bezier(.22,.61,.36,1); } .nav .logo:hover::after, .nav-progs a:hover::after, .nav-progs a[aria-current="page"]::after{right:0} .nav-progs a[aria-current="page"]{opacity:.55} /* Con el logo, los tres programas y el botón, en pantalla chica no caben a tamaño completo: se achican en vez de desbordar. */ @media (max-width:760px){ .nav .wrap{gap:10px} .nav .logo{font-size:15px} .nav-progs{gap:12px} .nav-progs a{font-size:12px;letter-spacing:.08em} .nav-cta{font-size:12.5px;padding:9px 14px} } @media (max-width:430px){ .nav-cta{display:none} } /* ---------- botones ---------- */ .btn{ display:inline-block;text-decoration:none;font-weight:800;padding:17px 30px; border-radius:100px;font-size:16px;transition:transform .15s ease,background .2s;border:0;cursor:pointer; } .btn:active{transform:translateY(1px)} .btn-dark{background:var(--tinta);color:var(--papel)} .btn-dark:hover{background:var(--acento-osc)} /* En el inicio el hover iba al lima oscuro: sobre el botón negro casi no se notaba el cambio. El morado de la página sí se ve. */ .tema-hub .btn-dark:hover{background:var(--acento2);color:var(--papel)} .tema-hub .btn-ghost:hover{background:var(--acento2);color:var(--papel);border-color:var(--acento2)} .btn-ghost{background:transparent;color:var(--tinta);border:2px solid currentColor} .btn-ghost:hover{background:var(--tinta);color:var(--acento)} /* Sobre .oscuro el btn-dark desaparece: mismo tono que el fondo. */ .btn-neon{background:var(--acento2);color:var(--tinta)} .btn-neon:hover{background:var(--papel)} .btn-xl{ font-family:var(--font-display);font-style:var(--display-italic);text-transform:uppercase; font-size:clamp(17px,2.4vw,23px);padding:22px 44px;line-height:1.1; } .btn-sub{display:block;margin-top:12px;font-size:14px;color:var(--gris);font-weight:500} .cta-seccion{margin-top:44px} .oscuro .cta-seccion .btn-sub{color:rgba(251,250,247,.62)} /* ---------- marquee ---------- */ .marquee{background:var(--tinta);color:var(--acento);overflow:hidden;padding:15px 0;white-space:nowrap} .marquee-in{display:inline-block;animation:slide 34s linear infinite} .marquee span{ font-family:var(--font-display);font-style:var(--display-italic);text-transform:uppercase; font-size:17px;padding:0 22px; } .marquee span::after{content:'●';color:var(--acento2);margin-left:22px;font-style:normal;font-size:11px;vertical-align:middle} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marquee-in{animation:none}} /* ---------- secciones ---------- */ section{padding:92px 0} .sec-head{max-width:50ch;margin-bottom:50px} .sec-head p{color:var(--gris);margin-top:16px;font-size:18px} .oscuro{background:var(--tinta);color:var(--papel)} .oscuro h2.sec{color:var(--acento)} .oscuro .sec-head p{color:rgba(251,250,247,.66)} .acento{background:var(--acento)} .acento3{background:var(--acento3)} /* Rosa neon a seccion completa (lo pidio Karla para "no es para ti"). Sobre #FF08E8 el texto va en tinta; el gris de .check.no no alcanza. */ .acento2{background:var(--acento2);color:var(--tinta)} .acento2 h2.sec{color:var(--tinta)} .acento2 .sec-head p{color:rgba(12,10,34,.78)} .acento2 .check.no li{color:var(--tinta);border-bottom-color:rgba(12,10,34,.18)} .acento2 .check.no li::before{background:rgba(12,10,34,.16);color:var(--tinta)} .acento2 .lead{color:var(--tinta)} /* ---------- hero ---------- */ .hero{background:var(--acento);position:relative;overflow:hidden;padding:66px 0 0} .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:end} .hero-txt{padding-bottom:76px;position:relative;z-index:2} .hero h1{font-size:clamp(46px,8.6vw,100px);margin:18px 0 0} .hero h1 em{font-style:var(--display-italic);color:var(--acento2);display:block} .hero p.lead{max-width:36ch;margin:24px 0 0} .hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} .badge{ background:var(--tinta);color:var(--acento);font-size:12px;font-weight:800; letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:100px; } .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;align-items:center} .hero-img{position:relative;min-height:400px;display:flex;align-items:flex-end;justify-content:center} /* El logo salió de la foto y ahora vive arriba de ella, en su misma columna. La foto quedó siendo sólo la modelo (720x558). */ .logo-fm-hero{width:min(320px,74vw);height:auto;display:block;margin:0 auto 20px} /* El botón del hero a 23px medía 525px de texto y no cabía en la columna de 526: salía en dos líneas y ocupaba 95px de alto. A 18px entra en una. */ .tema-fm .hero-cta .btn-xl{font-size:18px;padding:16px 30px} /* ---------- placeholders de imagen ---------- */ .ph{ background:repeating-linear-gradient(45deg,rgba(0,0,0,.07) 0 12px,transparent 12px 24px),var(--acento3); display:flex;align-items:center;justify-content:center;text-align:center;padding:24px; font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(0,0,0,.5); } .ph-retrato{width:100%;max-width:420px;aspect-ratio:720/1040} .ph-4-5{aspect-ratio:4/5} .ph-16-10{aspect-ratio:16/10} /* ---------- credenciales ---------- */ .creds{background:var(--acento);padding:0} .creds .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:2px} .creds div{padding:30px 20px;text-align:center} .creds b{ display:block;font-family:var(--font-display);font-style:var(--display-italic); font-size:clamp(28px,3.8vw,44px);line-height:1;margin-bottom:6px; } .creds span{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase} /* ---------- para ti / no para ti ---------- */ .para-ti{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start} .check{list-style:none} .check li{padding:15px 0 15px 40px;position:relative;border-bottom:1px solid var(--linea);font-weight:500} .check li::before{ content:'✓';position:absolute;left:0;top:15px;width:24px;height:24px;border-radius:50%; background:var(--acento);color:var(--tinta);font-weight:800;font-size:13px; display:flex;align-items:center;justify-content:center; } .check.no li{color:var(--gris)} .check.no li::before{content:'×';background:var(--linea);color:var(--gris);font-size:16px} /* ---------- temario ---------- */ .modulos{counter-reset:mod} .mod{ border:1px solid var(--linea-clara);border-radius:var(--radio);margin-bottom:12px; overflow:hidden;background:rgba(255,255,255,.03); } .mod summary{cursor:pointer;list-style:none;padding:22px 24px;display:flex;gap:18px;align-items:center} .mod summary::-webkit-details-marker{display:none} .mod summary::after{content:'+';margin-left:auto;font-size:27px;line-height:1;color:var(--acento);flex-shrink:0} .mod[open] summary::after{content:'–'} .mod .num{ counter-increment:mod;flex-shrink:0;width:46px;height:46px;border-radius:50%; background:var(--acento);color:var(--tinta);display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-style:var(--display-italic);font-size:16px; } .mod .num::before{content:counter(mod)} .mod.romano .num::before{content:counter(mod,upper-roman)} .mod .tit{font-size:18.5px;font-weight:800;line-height:1.25} .mod .tit small{display:block;font-weight:500;font-size:14px;opacity:.6;margin-top:3px} .mod-body{padding:0 26px 26px 88px} .mod-body h4{ font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase; color:var(--acento2);margin:16px 0 8px; } .mod-body ul{list-style:none;columns:2;column-gap:34px} .mod-body li{padding:6px 0 6px 20px;position:relative;font-size:15.5px;break-inside:avoid;opacity:.9} .mod-body li::before{content:'';position:absolute;left:0;top:15px;width:10px;height:2px;background:var(--acento)} /* ---------- entregables / incluye ---------- */ .incl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .incl-grid > div{border-top:3px solid currentColor;padding-top:16px} .incl-grid h3{font-size:17.5px;font-weight:800;margin-bottom:7px} .incl-grid p{font-size:15.5px;color:var(--gris)} .oscuro .incl-grid p{color:rgba(251,250,247,.7)} /* ---------- kit / pasos numerados ---------- */ .kit .wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} .kit ol{list-style:none;counter-reset:k} .kit li{ counter-increment:k;padding:15px 0 15px 52px;position:relative; border-bottom:1px solid rgba(0,0,0,.16);font-size:16px; } .kit li::before{ content:counter(k);position:absolute;left:0;top:13px;width:34px;height:34px;border-radius:50%; background:var(--tinta);color:var(--acento);display:flex;align-items:center;justify-content:center; font-weight:800;font-size:15px; } .kit li b{display:block;font-weight:800;margin-bottom:2px} /* ---------- diagrama de flujo ---------- */ .flujo{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:36px} .flujo span{ border:2px solid currentColor;border-radius:100px;padding:10px 20px; font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase; } .flujo i{font-style:normal;opacity:.5;font-size:18px} /* Las 7 piezas de la maquina, debajo del flujo de pastillas. */ .piezas{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:34px} .piezas dt{ font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase; color:var(--acento);margin-bottom:3px; } .piezas dd{font-size:15px;line-height:1.45;color:rgba(251,250,247,.72)} @media (max-width:700px){.piezas{grid-template-columns:1fr}} /* ---------- instructora ---------- */ .about .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center} .about p{margin-bottom:15px} /* ---------- testimonios ---------- */ .testis{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .testi{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:28px 26px} .testi p{font-size:16.5px;margin-bottom:18px} .testi .quien{display:flex;align-items:center;gap:13px} .testi .av{ width:44px;height:44px;border-radius:50%;background:var(--acento3);flex-shrink:0; display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:var(--tinta); } .testi .quien b{font-size:15px} .estrellas{color:var(--acento2);font-size:15px;letter-spacing:2px;margin-bottom:10px} /* ---------- oferta ---------- */ .oferta{background:var(--acento2);text-align:center;color:#fff} .oferta h2.sec{color:inherit} .precio-caja{ background:var(--papel);color:var(--tinta);max-width:640px;margin:0 auto; border-radius:var(--radio);padding:44px 32px;border:3px solid var(--tinta);text-align:center; } .precio-antes{font-size:19px;color:var(--gris);text-decoration:line-through} /* Karla lo pidió del mismo tamaño que la caja de texto: el 45% replica la parte que le toca a la caja en el .oferta-grid (.9fr de 2fr, menos el gap). */ .oferta .logo-fm{ display:block;width:calc((100% - 24px) * .5);height:auto;margin:0 auto 26px; } @media (max-width:900px){.oferta .logo-fm{width:100%;max-width:420px}} /* La caja quedaba sola en medio de mucho rosa: ahora comparte fila con la modelo del hero recortada, que va sin fondo y se apoya en el rosa. */ /* Karla las quiere del mismo tamaño: columnas iguales y la foto estirada al alto de la caja, así que las dos ocupan exactamente el mismo rectángulo. */ .oferta-grid{ display:grid;grid-template-columns:1fr 1fr; gap:24px;align-items:stretch;text-align:left; } /* En flujo normal la foto imponía su alto intrínseco (970px) y estiraba la caja con ella. Absoluta, no aporta alto: manda la caja y la foto la copia. */ .oferta-foto{position:relative;min-height:340px} .oferta-grid .precio-caja{margin:0;max-width:none} .oferta-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 72%;display:block;border-radius:var(--radio)} @media (max-width:900px){ .oferta-grid{grid-template-columns:1fr;gap:34px} /* Apiladas ya no hay caja que copiar: la foto vuelve a su propia forma. */ .oferta-foto{max-width:420px;margin:0 auto;min-height:0;aspect-ratio:3/4;width:100%} .tema-lenceria .oferta-foto{aspect-ratio:9/16} } .precio-hoy{ font-family:var(--font-display);font-style:var(--display-italic); font-size:clamp(42px,8vw,76px);line-height:1;margin:6px 0 8px; } .precio-nota{font-size:15px;color:var(--gris);margin-bottom:26px} .pagos{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:24px} .pago{ border:2px solid var(--tinta);border-radius:100px;padding:7px 15px; font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; } /* ---------- garantía ---------- */ .garantia{background:var(--tinta);color:var(--papel);text-align:center} .sello{ width:118px;height:118px;border-radius:50%;border:4px solid var(--acento);margin:0 auto 24px; display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--acento); font-family:var(--font-display);font-style:var(--display-italic);line-height:.95; } .sello b{font-size:36px} .sello span{font-size:11.5px;letter-spacing:.1em} .garantia p{max-width:58ch;margin:0 auto;color:rgba(251,250,247,.8);font-size:18px} /* ---------- faq ---------- */ .faq details{border-bottom:1px solid var(--linea);padding:21px 0} .faq summary{ cursor:pointer;font-weight:800;font-size:18px;list-style:none; display:flex;justify-content:space-between;gap:20px;align-items:center; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';font-size:26px;color:var(--acento2);line-height:1;flex-shrink:0} .faq details[open] summary::after{content:'–'} .faq p{color:var(--gris);margin-top:13px;max-width:66ch} /* ---------- pasos ---------- */ .pasos{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;counter-reset:p} .pasos > div{counter-increment:p;position:relative;padding-top:54px} .pasos > div::before{ content:counter(p);position:absolute;top:0;left:0;width:42px;height:42px;border-radius:50%; background:var(--tinta);color:var(--acento);display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-style:var(--display-italic);font-size:17px; } .pasos h3{font-size:15.5px;font-weight:800;margin-bottom:5px} .pasos p{font-size:14.5px;color:var(--gris)} /* ---------- cierre ---------- */ .final{background:var(--acento);text-align:center} .final h2{font-size:clamp(38px,7.6vw,88px);margin-bottom:24px} .final p{max-width:48ch;margin:0 auto 32px} /* El valor del kit: grande, tachado, y el "gratis" en el acento. */ .valor-kit{margin-top:6px;line-height:1.05} .valor-kit s{ display:block;font-family:var(--font-display);font-style:var(--display-italic); text-transform:uppercase;letter-spacing:var(--display-track); font-size:clamp(26px,3.6vw,42px);color:var(--gris); } .valor-kit b{ display:block;margin-top:6px;font-size:13px;font-weight:800; letter-spacing:.14em;text-transform:uppercase;color:var(--acento-osc); } /* ---------- bloques de color pedidos por Karla ---------- */ /* Karla pidió el rosa de Fashion Money aquí y el cuerpo en blanco. El gris original daba 1.77:1; el blanco sube a 3.18. Sigue por debajo del 4.5 que pide el texto normal: sin cambiar el rosa, la única forma de llegar es meter las preguntas en tarjetas claras. */ .rosado{background:#FF08E8} .rosado .faq p, .rosado .faq summary{color:#fff} .rosado .faq details{border-bottom-color:rgba(255,255,255,.4)} .rosado .faq summary::after{color:#fff} .crema{background:#FAF7D6} /* ---------- certificado ---------- */ .certificado .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center} /* El certificado es blanco: sobre el cián necesita marco y sombra para que se lea como un impreso y no como un hueco en la sección. */ .certificado-img img{ width:100%;height:auto;display:block;background:#fff; border:2px solid var(--tinta);border-radius:var(--radio); box-shadow:0 14px 40px rgba(54,62,73,.22); transform:rotate(-1.2deg); } @media (max-width:900px){.certificado .wrap{grid-template-columns:1fr;gap:30px}} /* ---------- método BM ---------- */ /* Cinco párrafos seguidos sobre fondo claro se leen como un muro. Sobre el oscuro, con el primero destacado, la sección gana el peso de autoridad que le corresponde. */ .metodo p{color:rgba(251,250,247,.78);margin-top:16px;max-width:64ch} .metodo p.lead{color:var(--papel);margin-top:0} .metodo p b{color:var(--papel)} /* ---------- ¿cuál es para ti? ---------- */ /* Tres decisiones, no tres tarjetas: cada fila es la frase de la alumna a la izquierda y el programa al que la manda a la derecha. */ .cual-grid{display:grid;gap:14px} .cual-op{ display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center; text-decoration:none;color:inherit; border:2px solid var(--tinta);border-radius:var(--radio);padding:26px 30px; transition:transform .2s ease,background .2s ease; } .cual-op:hover{transform:translateX(6px);background:var(--papel)} .cual-quiero{font-size:clamp(17px,2.2vw,21px);font-weight:800;line-height:1.25} .cual-va{ font-family:var(--font-display);font-style:var(--display-italic); text-transform:uppercase;letter-spacing:var(--display-track); /* --acento-osc en el hub es el lima oscuro (#A7BC0E): sobre el papel da 2.05 y no se lee. El morado de acento2 da 5.85. */ font-size:clamp(15px,1.9vw,19px);color:var(--acento2);white-space:nowrap; } .cual-pie{margin-top:26px;color:var(--gris);max-width:60ch} @media (max-width:760px){ .cual-op{grid-template-columns:1fr;gap:10px} .cual-va{white-space:normal} } /* ---------- otros programas ---------- */ .otros-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px} .otro{ display:block;text-decoration:none;color:inherit; border:2px solid var(--tinta);border-radius:var(--radio);overflow:hidden; transition:transform .15s ease,background .2s; } .otro img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center 22%;display:block} /* La tarjeta de Fashion Money ya no lleva el flyer sino la modelo recortada: con el 48% que necesitaba el logo, el encuadre le cortaba la cabeza. */ .otro[href="fashion-money.html"] img{object-position:center 6%;background:var(--papel)} .otro h3,.otro p,.otro .otro-mas{margin-left:26px;margin-right:26px} .otro h3{margin-top:24px} .otro .otro-mas{display:inline-block;margin-bottom:26px} .otro:hover{transform:translateY(-3px);background:var(--papel)} .otro h3{font-size:22px;font-weight:800;margin-bottom:8px;line-height:1.15} .otro p{font-size:15.5px;color:var(--gris);margin-bottom:14px} .otro-mas{font-weight:800;font-size:14px;color:var(--acento-osc)} @media (max-width:760px){.otros-grid{grid-template-columns:1fr}} /* ---------- banner de posicionamiento ---------- */ /* Va después de la tira de fotos, con la letra de los títulos y el mismo degradado del hero, que Karla pidió expresamente. */ .banner-marca{padding:72px 0} .banner-marca p{ text-transform:uppercase;letter-spacing:var(--display-track); font-size:clamp(23px,3.2vw,40px);line-height:1.14; max-width:34ch;margin:0 auto;text-align:center;color:var(--tinta);text-wrap:balance; } /* Karla lo pidió alternado: los tramos en van con la letra de los títulos y los en Archivo normal, para que el bloque no sea un muro. */ .banner-marca p b{font-family:var(--font-display);font-style:var(--display-italic);font-weight:400} .banner-marca p i{font-family:var(--font-body);font-style:italic;font-weight:500;opacity:.85} /* ---------- footer ---------- */ footer{background:var(--tinta);color:rgba(251,250,247,.7);padding:54px 0 40px;font-size:14px} footer .wrap{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:center} footer a{color:var(--acento);text-decoration:none;font-weight:700} footer a:hover{text-decoration:underline} .socials{display:flex;gap:20px;flex-wrap:wrap} /* ---------- whatsapp flotante ---------- */ .wa{ position:fixed;right:20px;bottom:20px;z-index:60;background:var(--tinta);color:var(--acento); text-decoration:none;font-weight:800;font-size:15px;padding:15px 24px;border-radius:100px; box-shadow:0 8px 28px rgba(0,0,0,.28); } /* Karla lo pidió más llamativo: rosa neón con tinta encima da 6.1:1, se lee bien y salta sobre cualquiera de los fondos de la página. */ .tema-fm .wa{background:var(--acento2);color:var(--tinta);box-shadow:0 8px 28px rgba(255,8,232,.4)} .tema-fm .wa:hover{background:var(--papel);color:var(--tinta)} /* ---------- responsive ---------- */ @media (max-width:900px){ section{padding:64px 0} .hero{padding-top:48px} .hero .wrap{grid-template-columns:1fr;gap:0} .hero-txt{padding-bottom:40px} .hero-img{min-height:0;order:2;margin:0 -24px} .hero-img .ph{max-width:none} .creds .wrap{grid-template-columns:1fr 1fr} .para-ti,.kit .wrap,.about .wrap,.testis{grid-template-columns:1fr} .incl-grid{grid-template-columns:1fr} .pasos{grid-template-columns:1fr} .pasos > div{padding-top:0;padding-left:58px;min-height:42px} .mod-body{padding-left:24px} .mod-body ul{columns:1} .wa{right:12px;bottom:12px;padding:13px 20px;font-size:14px} } /* ============================================================ BLOQUES DE SALES PAGE ============================================================ */ /* ---------- contador ---------- */ .contador{background:var(--tinta);color:var(--papel);padding:18px 0;text-align:center} .contador[hidden]{display:none} .contador .wrap{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap} .contador .txt{font-weight:800;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--acento)} .reloj{display:flex;gap:14px} .reloj div{text-align:center;min-width:54px} .reloj b{ display:block;font-family:var(--font-display);font-style:var(--display-italic); font-size:30px;line-height:1; } .reloj span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.65} /* ---------- bonos ---------- */ .bonos{display:grid;gap:20px} .bono{transition:transform .2s ease,box-shadow .2s ease} .bono:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.16)} .bono{ display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center; background:var(--papel);border:2px solid var(--tinta);border-radius:var(--radio);padding:26px 28px; } .bono .etiqueta{ font-family:var(--font-display);font-style:var(--display-italic);text-transform:uppercase; font-size:15px;background:var(--acento);color:var(--tinta);padding:8px 14px;border-radius:100px;white-space:nowrap; } /* La tarjeta siempre es papel, tambien dentro de .oscuro: sin esto el h3 heredaba el blanco de la seccion y el nombre del bono no se veia. */ .bono h3{font-size:20px;font-weight:800;margin-bottom:6px;line-height:1.2;color:var(--tinta)} .bono p{font-size:15.5px;color:var(--gris)} .bono ul{list-style:none;margin-top:10px} .bono li{font-size:15px;padding:3px 0 3px 18px;position:relative;color:var(--gris)} .bono li::before{content:'·';position:absolute;left:4px;font-weight:800;color:var(--acento2)} .bono .valor{text-align:right;white-space:nowrap} .bono .valor s{ display:block;font-family:var(--font-display);font-style:var(--display-italic); font-size:clamp(18px,2.2vw,22px);color:var(--gris); margin-bottom:1px;white-space:nowrap; } .bono .valor b{ display:block;font-family:var(--font-display);font-style:var(--display-italic); font-size:27px;color:var(--tinta); } .bono .valor span{ display:block;font-size:11px;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:var(--acento2);margin-top:4px; } /* ---------- objeciones ---------- */ .objs{display:grid;gap:18px} .obj{border-left:4px solid var(--acento);padding:4px 0 4px 24px} .obj h3{font-size:20px;font-weight:800;margin-bottom:8px} .obj p{color:var(--gris)} .oscuro .obj p{color:rgba(251,250,247,.72)} /* ---------- perfiles / para quién ---------- */ .perfiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .perfil{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:30px 26px} .perfil .ico{ width:52px;height:52px;border-radius:50%;background:var(--acento);margin-bottom:18px; display:flex;align-items:center;justify-content:center;font-size:24px; } .perfil{transition:transform .2s ease} .perfil:hover{transform:translateY(-4px)} .obj{transition:border-left-width .2s ease,padding-left .2s ease} .obj:hover{border-left-width:7px;padding-left:27px} .clases figure{transition:transform .25s ease} .clases figure:hover{transform:translateY(-4px) scale(1.02)} .perfil h3{font-size:19px;font-weight:800;margin-bottom:10px} .perfil p{font-size:15.5px;color:var(--gris)} /* ---------- doble precio ---------- */ .dos-pagos{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px} .plan{border:2px solid var(--tinta);border-radius:var(--radio);padding:26px 22px;text-align:center} .plan.destacado{background:var(--tinta);color:var(--papel);border-color:var(--tinta)} .plan .etq{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;opacity:.7} .plan .monto{ font-family:var(--font-display);font-style:var(--display-italic); font-size:clamp(30px,5vw,44px);line-height:1;margin-bottom:6px; } .plan .detalle{font-size:14px;opacity:.7;margin-bottom:18px} .plan .btn{width:100%;font-size:15px;padding:15px 20px} .plan.destacado .btn-dark{background:var(--acento);color:var(--tinta)} .plan.destacado .btn-dark:hover{background:var(--papel)} .seguro{font-size:12px;margin-top:10px;opacity:.65;letter-spacing:.06em;text-transform:uppercase;font-weight:700} /* ---------- sellos de confianza ---------- */ .sellos{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:36px} .sellos div{ font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; border:2px solid currentColor;border-radius:100px;padding:10px 20px; } @media (max-width:900px){ .bono{grid-template-columns:1fr;gap:14px} .bono .valor{text-align:left} .perfiles,.dos-pagos{grid-template-columns:1fr} } /* ---------- banda de "los tres sin" ---------- */ .sines{background:var(--tinta);color:var(--papel);padding:44px 0} .sines .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .sines .wrap > div{ padding-left:44px;position:relative;font-weight:800;font-size:clamp(17px,2.1vw,21px);line-height:1.25; } .sines .wrap > div::before{ content:'✕';position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:50%; border:2px solid var(--acento2);color:var(--acento2); display:flex;align-items:center;justify-content:center;font-size:14px; } @media (max-width:900px){ .sines .wrap{grid-template-columns:1fr;gap:14px} .sines{padding:34px 0} } /* ---------- fotos reales ---------- */ .foto-hero{ width:100%;max-width:420px;height:auto; object-fit:cover;object-position:center top; border-radius:6px 6px 0 0; } /* hero del hub: foto con fondo propio, más grande que el .foto-hero base. El tope de alto evita que el hero crezca más que la pantalla y mande el botón abajo del pliegue en una laptop. */ /* Una sola lista larga repartida en dos columnas, para que no quede media página vacía tras quitar la columna de "Todavía no, si…". */ .lista-doble{columns:2;column-gap:48px} .lista-doble li{break-inside:avoid} @media (max-width:700px){ .lista-doble{columns:1} } /* Cierre de Fashion Money con foto al lado. El .final normal centra el texto; aquí pasa a dos columnas, así que se alinea a la izquierda. */ .cierre-foto .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;text-align:left} .cierre-foto .cierre-txt p{margin-left:0;margin-right:0} /* La foto original es muy vertical (652x966) y dejaba el texto flotando en 422px de aire. Se recorta a 4:5 desde arriba, que es donde está ella; lo que se pierde es el piso vacío de abajo. */ .cierre-foto .cierre-img img{ width:100%;height:auto;aspect-ratio:4/5; object-fit:cover;object-position:center 22%; display:block;border-radius:var(--radio); } @media (max-width:900px){ .cierre-foto .wrap{grid-template-columns:1fr;gap:32px;text-align:center} .cierre-foto .cierre-txt p{margin-left:auto;margin-right:auto} .cierre-foto .cierre-img{max-width:340px;margin:0 auto} } /* Sección de la Fashion Money Machine: texto a la izquierda, el carrito a la derecha. La imagen es PNG con transparencia (72% del lienzo), así que va directa sobre el fondo oscuro, sin caja. */ .maquina .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center} .maquina-img img{width:100%;height:auto;display:block} @media (max-width:900px){ .maquina .wrap{grid-template-columns:1fr;gap:32px} .maquina-img{max-width:320px;margin:0 auto} } /* Hero de Fashion Money: PNG con transparencia (48% del lienzo), va directo sobre el azul de la marca. Sin esquinas ni sombra, que sobre un recorte se ven como una caja fantasma. Va anclado para que arranque en el titular y termine en el botón: arriba 39px = eyebrow (21) + margen del h1 (18) abajo 111px = margen del btn-sub (12) + su alto (22) + padding del .hero-txt (76). Los tres son fijos, así que el encuadre no se desalinea al cambiar el alto de la ventana. */ @media (min-width:901px){ /* Las columnas fr respetan el ancho mínimo del contenido, y el titular de 100px ("PRODUCTOS.") no se puede encoger: se llevaba 708px y dejaba sólo 365 para la imagen. Con ancho fijo de 470 la imagen llena los 672px de alto, y al texto le quedan 622, por encima de su mínimo. */ /* A 100px la línea "PRODUCTOS." mide 729px y sólo dejaba 363 para la imagen. Bajando el titular a 88px necesita 641 y le deja 451, sin perder sus cuatro líneas. Es el precio de que la imagen sea grande. */ /* Karla pidio la foto "mucho mas grande". El titular y la imagen se pelean por el mismo ancho: "PRODUCTOS." no se puede encoger, asi que cada punto que gana la foto lo paga el h1. A 72px el titular mide 525 y le deja 566 a la columna; ademas la imagen se sale 74px hacia la derecha, hasta el borde de la ventana, y termina en 640px: 42% mas grande que antes. */ .tema-fm .hero h1{font-size:clamp(46px,6.4vw,72px)} .tema-fm .hero .wrap{grid-template-columns:minmax(0,1fr) 566px;align-items:center} /* El logo y la foto comparten columna: logo arriba, modelo abajo. En vez de correr cada uno por su lado, la columna entera adopta el ancho de la foto y se sale 74px a la derecha; así el logo cae centrado sobre la modelo. */ .tema-fm .hero-img{ flex-direction:column;align-items:center;justify-content:flex-end; width:570px;margin-left:auto;margin-right:-74px; } .tema-fm .logo-fm-hero{margin:0 0 20px} /* Con la foto tan alta, anclar el texto abajo dejaba 200px de azul vacio encima del eyebrow. Centrado, el aire se reparte y el hero entra completo. */ .tema-fm .hero-txt{padding-bottom:0} .tema-fm .hero-img{justify-content:flex-end} .tema-fm .hero-img .recorte-fm{width:100%;max-width:none} /* Anclada por abajo, no por arriba. Con align-self:stretch + padding superior el ajuste era circular: cada píxel de relleno agrandaba la fila y, como el hero usa align-items:end, el texto bajaba lo mismo. Anclando al borde inferior —que sí es estable— la imagen termina exactamente en el botón y su alto lo define el ancho de la columna. 111px = margen del btn-sub (12) + su alto (22) + padding del .hero-txt (76) */ .tema-fm .hero-img{align-self:end;padding:0 0 40px} } .foto-hero.recorte-fm{ width:100%;height:auto;max-width:none; border-radius:0;background:none;box-shadow:none; } @media (max-width:900px){ .foto-hero.recorte-fm{max-width:340px;height:auto;aspect-ratio:720/558;margin:0 auto} } /* El titular del hub pasó de "Crea, diseña y vende" a una frase el doble de larga: a 100px salía en cinco líneas y estiraba el hero. */ .hero-hub h1{font-size:clamp(40px,6.2vw,70px)} .hero-hub .hero-txt > .lead{max-width:44ch} .foto-hero.hub{ max-width:min(560px,100%); max-height:78vh; object-fit:cover;object-position:center top; margin-inline:auto; } .foto{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radio)} /* height:auto es imprescindible: sin él, el atributo height="1000" del fija la altura, y con ancho y alto declarados el aspect-ratio se ignora. La foto salía a 461x1000 en vez de 4:5, estirada y mal recortada. */ .foto-4-5{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:var(--radio)} /* galería de prendas */ .galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .galeria img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:6px} /* .ancha: para recortes horizontales donde la prenda ya llena el cuadro */ .galeria.ancha img{aspect-ratio:16/9} @media (max-width:900px){ .galeria{grid-template-columns:1fr 1fr} } /* ---------- video vertical ---------- */ .video-sec .wrap{display:grid;grid-template-columns:.72fr 1.28fr;gap:52px;align-items:center} .video-vert{ width:100%;max-width:380px;aspect-ratio:9/16;display:block; border:3px solid var(--tinta);border-radius:12px;background:#000; } @media (max-width:900px){ .video-sec .wrap{grid-template-columns:1fr;gap:32px} .video-vert{margin:0 auto} } /* ---------- mosaico de fotos ---------- */ .mosaico{ display:grid;grid-template-columns:repeat(4,1fr); /* filas altas: las fotos son verticales y con celdas bajas se cortan las cabezas */ grid-auto-rows:320px;gap:12px; } .mosaico img{ width:100%;height:100%;object-fit:cover;display:block;border-radius:8px; transition:transform .3s ease, filter .3s ease; } .mosaico img:hover{transform:scale(1.02);filter:saturate(1.12)} /* la primera manda: doble de ancho y alto. La celda ancha de la sexta se quitó: recortaba una foto vertical a 560x320 y le cortaba la cabeza a la modelo. */ .mosaico img:nth-child(1){grid-column:span 2;grid-row:span 2} @media (max-width:900px){ .mosaico{grid-template-columns:1fr 1fr;grid-auto-rows:230px} .mosaico img:nth-child(1){grid-column:span 2;grid-row:span 2} } /* ---------- franja de fotos a todo lo ancho ---------- */ .tira{display:flex;gap:4px;overflow:hidden;background:var(--tinta)} .tira img{ flex:1 1 0;min-width:0;aspect-ratio:3/4;object-fit:cover;display:block; filter:grayscale(.15);transition:filter .35s ease, flex-grow .35s ease; } .tira img:hover{filter:none;flex-grow:1.35} @media (max-width:900px){ .tira img:nth-child(n+4){display:none} } /* ---------- sección de video, versión grande ---------- */ .video-sec{background:var(--tinta);color:var(--papel)} .video-sec h2.sec{color:var(--acento)} .video-sec .wrap{display:grid;grid-template-columns:.72fr 1.28fr;gap:56px;align-items:center} .video-vert{ width:100%;max-width:360px;aspect-ratio:9/16;display:block; border:3px solid var(--acento);border-radius:14px;background:#000; box-shadow:0 22px 0 rgba(0,0,0,.25); } .video-sec .lead{color:rgba(251,250,247,.85)} .video-sec .nota-int{color:rgba(251,250,247,.5);font-size:14.5px} @media (max-width:900px){ .video-sec .wrap{grid-template-columns:1fr;gap:34px} .video-vert{margin:0 auto;max-width:300px} } /* ---------- flyer completo en el hero ---------- */ /* El flyer es 9:16, así que necesita más columna que una foto normal */ .hero-flyer{padding-top:52px} .hero-flyer .wrap{grid-template-columns:.82fr 1.18fr;gap:36px;align-items:center} .hero-flyer .hero-txt{padding-bottom:52px} .hero-flyer .hero-img{min-height:0;align-items:center;justify-content:flex-end} .hero-flyer h1{font-size:clamp(42px,6.6vw,78px)} .foto-hero.flyer{ width:auto;max-width:100%; /* grande, pero nunca tanto que empuje el botón fuera de la pantalla */ max-height:min(1040px, 86vh); border-radius:14px; box-shadow:0 26px 64px rgba(20,18,16,.3); } /* en pantallas anchas el flyer se sale un poco de la caja, hacia la orilla */ @media (min-width:1240px){ .hero-flyer .hero-img{margin-right:-40px} } @media (max-width:900px){ .hero-flyer .wrap{grid-template-columns:1fr} .hero-flyer .hero-img{justify-content:center;margin-right:0} .foto-hero.flyer{max-width:420px;margin:0 auto} } /* ---------- fotos reales de alumnas ---------- */ .alumnas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:44px} .alumnas figure{margin:0;background:var(--papel);border:2px solid var(--tinta);border-radius:10px;overflow:hidden} .alumnas img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block} .alumnas figcaption{ padding:11px 14px;font-size:13px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;background:var(--tinta);color:var(--acento); } @media (max-width:900px){ .alumnas{grid-template-columns:1fr 1fr} } /* la franja aguanta hasta 8 fotos en pantalla ancha */ @media (min-width:901px){ .tira img{aspect-ratio:2/3} } /* ============================================================ TEMA LENCERÍA — pastel degradado (crema · lila · azul · cian) Swimwear y Fashion Money no se tocan. ============================================================ */ .tema-lenceria{ /* Paleta 2026-08-17. El naranja #f04d23 queda fuera a propósito. El lila se mantiene por decisión de Karla. */ --acento:#CDA9F5; /* lila — se mantiene */ --acento-osc:#d100b3; /* Purple pinn — hovers y estados activos */ --acento2:#d100b3; /* Purple pinn — texto de acento y titulares */ --acento3:#CDA9F5; /* lila — bloques morados grandes */ /* La variable sigue llamándose --verde por las 15 reglas que ya la usan; el valor ya no es verde. El lila da 5.45 de contraste sobre el gris oscuro, mejor que Pink Dragon (4.87), así que es el acento sobre oscuro. */ --verde:#CDA9F5; /* acento sobre fondos oscuros */ --rosa:#f38fbb; /* Pink Dragon — campos claros */ --cian:#9DE4F0; --azul:#AEC4F5; --papel:#F8F4FD; --tinta:#363e49; /* Grey hunt */ --gris:#5F6875; /* gris de texto, de la misma familia */ --linea:rgba(54,62,73,.12); /* Lila -> rosa para bloques grandes. Los dos son claros, así que el texto oscuro se lee en todo el recorrido (5.45 en el lila, 4.87 en el rosa, 5.11 en el punto medio). Sin rojo. */ --deg-suave:linear-gradient(118deg,#CDA9F5 0%,#E09CD8 50%,#f38fbb 100%); } /* el hero lleva el degradado completo */ .tema-lenceria .hero{ background:linear-gradient(118deg, #FAF7D6 0%, #FFFEF4 22%, #FFFFFF 40%, #F5ECFD 54%, #E6D2FA 68%, #CDA9F5 82%, #AEC4F5 92%, #9DE4F0 100%); } .tema-lenceria .final{ background:var(--deg-suave); color:var(--tinta); } .tema-lenceria .final h2, .tema-lenceria .final p{color:var(--tinta)} .tema-lenceria .creds{background:var(--acento)} .tema-lenceria .badge{background:var(--tinta);color:#FCE9F2} .tema-lenceria .marquee{color:#FCE9F2} .tema-lenceria .marquee span::after{color:var(--verde)} .tema-lenceria .oscuro h2.sec{color:var(--verde)} .tema-lenceria .mod .num{background:var(--verde);color:var(--tinta)} .tema-lenceria .mod summary::after{color:var(--verde)} .tema-lenceria .mod-body li::before{background:var(--verde)} .tema-lenceria .sello{border-color:var(--verde);color:var(--verde)} .tema-lenceria .wa{background:var(--acento-osc);color:#FCE9F2} .tema-lenceria .wa:hover{background:var(--tinta)} .tema-lenceria footer a{color:#FCE9F2} .tema-lenceria .sines .wrap > div::before{border-color:var(--cian);color:var(--cian)} /* el bloque de precio va en el rosa suave de Swimwear, con texto oscuro */ .tema-lenceria .oferta{ background:var(--deg-suave); color:var(--tinta); } .tema-lenceria .oferta h2.sec, .tema-lenceria .oferta .eyebrow, .tema-lenceria .oferta .lead{color:var(--tinta)} .tema-lenceria .oferta .btn-sub{color:rgba(54,62,73,.72)} .tema-lenceria .plan.destacado .btn-dark{background:var(--verde);color:var(--tinta)} .tema-lenceria .plan.destacado .btn-dark:hover{background:var(--papel)} .tema-lenceria .video-sec h2.sec{color:var(--verde)} .tema-lenceria .oferta-deg, .tema-lenceria .final-deg, .tema-lenceria .certificado, .tema-lenceria .banner-marca{ background:linear-gradient(118deg, #FAF7D6 0%, #FFFEF4 22%, #FFFFFF 40%, #F5ECFD 54%, #E6D2FA 68%, #CDA9F5 82%, #AEC4F5 92%, #9DE4F0 100%); } /* El valor del kit va tachado y "gratis" en el acento. */ .kit .eyebrow s{opacity:.6} .kit .eyebrow b{color:var(--acento2)} .tema-lenceria .correo .dia{color:var(--verde)} /* ---------- video horizontal ---------- */ .video-sec.horiz .wrap{grid-template-columns:1.35fr .65fr} .video-horiz{ width:100%;aspect-ratio:16/9;display:block; border:3px solid var(--cian, var(--acento));border-radius:14px;background:#000; box-shadow:0 22px 54px rgba(0,0,0,.3); } @media (max-width:900px){ .video-sec.horiz .wrap{grid-template-columns:1fr} } /* ---------- testimonios en video ---------- */ .videos-testi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .videos-testi video{ width:100%;aspect-ratio:9/16;display:block;background:#000; border:3px solid var(--tinta);border-radius:12px; } .videos-testi figcaption{ margin-top:10px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; } .videos-testi figure{margin:0} @media (max-width:900px){ .videos-testi{grid-template-columns:1fr} } /* ============================================================ TEMA LENCERÍA — cada color con una sola función ------------------------------------------------------------ lila claro #F8F4FD fondo base de toda la página crema #FAF7D6 bloques suaves (.acento3) lila #CDA9F5 barra de datos y detalles morado #7A3FD0 texto de acento y bloque de precio cian #9DE4F0 único acento sobre los fondos oscuros degradado solo hero y cierre ============================================================ */ .tema-lenceria .creds{background:var(--acento)} .tema-lenceria .creds b,.tema-lenceria .creds span{color:var(--tinta)} .tema-lenceria .tira{background:var(--tinta)} .tema-lenceria .sines{background:var(--tinta)} .tema-lenceria .perfil .ico{background:var(--acento)} .tema-lenceria .check li::before{background:var(--acento2);color:#fff} .tema-lenceria .testi{background:var(--papel)} .tema-lenceria .estrellas{color:var(--acento2)} .tema-lenceria .bono .etiqueta{background:var(--verde);color:var(--tinta)} .tema-lenceria .alumnas figcaption{background:var(--tinta);color:var(--verde)} .tema-lenceria .obj{border-left-color:var(--acento2)} .tema-lenceria .oscuro .obj{border-left-color:var(--verde)} .tema-lenceria .faq summary::after{color:var(--acento2)} .tema-lenceria .nav-cta:hover{background:var(--acento2)} .tema-lenceria .btn-dark:hover{background:var(--acento2)} .tema-lenceria .videos-testi figcaption{color:var(--acento2)} /* ============================================================ BANDA "INSCRIPCIONES ABIERTAS" ============================================================ */ .abiertas{ background:var(--acento);position:relative;overflow:hidden; display:grid;grid-template-columns:.8fr minmax(340px,3fr) .8fr;align-items:end; } .abiertas img{ width:100%;height:100%;max-height:420px;object-fit:cover;display:block; opacity:.55;filter:saturate(.55); transition:opacity .35s ease, filter .35s ease, transform .45s ease; } .abiertas img:hover{opacity:1;filter:none;transform:scale(1.04)} .tira img:hover, .mosaico img:hover{opacity:1;filter:none} .abiertas .centro{padding:56px 24px;text-align:center;position:relative;z-index:2} .abiertas .kicker{ font-family:var(--font-display);font-style:var(--display-italic);text-transform:uppercase; color:#fff;font-size:clamp(22px,3.4vw,40px);line-height:1; text-shadow:0 3px 14px rgba(0,0,0,.28);letter-spacing:.01em; } /* Frase larga como antetítulo: en la letra de display y a 40px se comía la pantalla y competía con el titular del blob. */ .abiertas .kicker.largo{ font-family:var(--font-body);font-style:normal;font-weight:800; font-size:clamp(12px,1.5vw,15px);letter-spacing:.16em;line-height:1.5; max-width:52ch;margin:0 auto 12px;text-shadow:none; } /* 52px es el tope al que la frase entra en una sola línea dentro del blob. */ .abiertas .kicker.largo + .grande b{font-size:clamp(26px,4.2vw,52px)} .abiertas .grande{position:relative;display:inline-block;margin:6px 0 22px} /* el trazo de pincel detrás */ .abiertas .grande::before{ content:'';position:absolute;inset:-6% -8%; background:#DDEBC2;border-radius:44% 56% 48% 52% / 58% 42% 56% 44%; transform:rotate(-1.4deg);z-index:-1; } /* El trazo de pincel del banner llevaba var(--verde), que en esta paleta ya es el mismo lila del fondo del banner: el titular quedaba sin respaldo y toda la franja se perdía entre las secciones pastel de alrededor. El banner pasa al rosa neón que la página ya usa en preguntas, y el trazo a crema. */ .tema-lenceria .abiertas{background:#FF08E8} .tema-lenceria .abiertas .grande::before{background:#FAF7D6} .tema-lenceria .abiertas .kicker{color:var(--papel)} /* El sub-texto va con opacidad en línea, pensado para el lila claro. Sobre el rosa neón la tinta al 75% se cae por debajo del mínimo. */ .tema-lenceria .abiertas .btn-sub{opacity:1 !important} /* Fondo del bloque "Tu siguiente paso", uno por paleta. */ .otros-lila{background:#CDA9F5} /* lencería */ .otros-fm{background:#E7D4FC} /* Fashion Money */ .otros-sw{background:#EAF5A8} /* swimwear */ /* El primer banner de inscripciones va en morado y el segundo en rosa, para que no se lean como el mismo bloque repetido. Sobre el morado la tinta da 2.23: el sub-texto va en papel. */ .tema-lenceria .abiertas.abiertas-morado{background:#d100b3} .tema-lenceria .abiertas.abiertas-morado .btn-sub{color:var(--papel) !important} /* En Fashion Money la franja va sobre el lila claro: el antetítulo blanco daba 1.3 de contraste y el trazo verde no es de esa paleta. Tinta encima del rosa neón da 5.96. */ .tema-fm .abiertas .kicker.largo{color:var(--tinta);text-shadow:none} .tema-fm .abiertas .grande::before{background:var(--acento2)} /* El sub-texto bajo el botón de la sección azul venía en gris: sobre el #3C2EEF daba 1.9 y no se leía. El lila da 5.38. */ .tema-fm .acento .btn-sub{color:#E7D4FC} /* El hero de Fashion Money pasa a mostrar el flyer completo. Antes eran dos piezas —el logo suelto encima del recorte de la modelo— y por eso la columna iba empujada 74px a la derecha y anclada abajo. Con una sola imagen, la columna vuelve a su sitio. */ .tema-fm .hero-img{ width:auto;margin-right:0;margin-left:auto; align-items:center;justify-content:center;padding-bottom:0; } /* El flyer es 720x1040. Con el 9/16 de lencería se recortaba y le cortaba la cabeza a la modelo: aquí se muestra entero. */ .foto-hero.flyer-fm{ width:auto;max-width:100%;height:auto; aspect-ratio:720/1040;max-height:min(1040px,88vh); object-fit:contain;display:block; border-radius:14px;box-shadow:0 26px 64px rgba(20,18,60,.34); } @media (max-width:900px){ .foto-hero.flyer-fm{max-width:360px;margin:0 auto} } /* En Fashion Money todos los botones oscuros pasan al rosa neón al pasar el mouse. Antes iban al azul oscuro, que sobre el azul de la página casi no se notaba. La tinta encima del rosa da 5.96. */ .tema-fm .btn-dark:hover{background:var(--acento2);color:var(--tinta)} /* El eyebrow del hero se perdía: 13px sobre el azul y "Cash your Dreams" quedaba en el aire. */ .tema-fm .hero .eyebrow{ font-size:clamp(13px,1.35vw,16px);letter-spacing:.14em;line-height:1.5; margin-bottom:20px; } /* Karla pidió que el flyer midiera exactamente lo mismo que la columna de texto, del eyebrow al botón. Estirando la columna, la imagen toma el alto de la fila —que lo define el texto— y calcula su ancho sola. */ .tema-fm .hero .wrap{align-items:stretch} .tema-fm .hero-img{align-self:stretch;align-items:flex-start} .tema-fm .foto-hero.flyer-fm{ height:100%;width:auto;max-width:100%;max-height:none; aspect-ratio:720/1040;object-fit:contain;margin-left:auto; /* Sobre el azul saturado la sombra grande no se lee como profundidad: se lee como una mancha sucia alrededor de la tarjeta. */ box-shadow:none; } @media (max-width:900px){ .tema-fm .hero .wrap{align-items:start} .tema-fm .foto-hero.flyer-fm{height:auto;max-width:360px;margin:0 auto} } /* El logo azul de la oferta competía con el titular. */ .tema-fm .oferta .logo-fm{width:min(360px,72vw)} /* La tira en zigzag: una sí y una no bajan, para que la hilera tenga movimiento en vez de leerse como una regla. */ .tema-fm .tira{align-items:flex-start} .tema-fm .tira img:nth-child(even){margin-top:46px} /* Las modelos del flyer vienen recortadas sobre el mismo #FAFAFF del papel: sobre la tira oscura se leían como ocho bloques claros. Con el fondo claro y sin costuras, la tira queda como una sola banda. */ .tema-fm .tira{background:var(--papel);gap:0} .tema-fm .tira img{filter:none} .tema-fm .tira img:hover{flex-grow:1.35} .abiertas .grande b{ font-family:var(--font-display);font-style:var(--display-italic);text-transform:uppercase; font-size:clamp(40px,8vw,90px);line-height:.96;color:var(--tinta);display:block; padding:.06em .14em; } .abiertas .btn{background:var(--papel);color:var(--tinta);font-weight:800} .abiertas .btn:hover{background:var(--tinta);color:var(--papel)} @media (max-width:900px){ .abiertas{grid-template-columns:1fr} .abiertas img{display:none} .abiertas .centro{padding:44px 20px} } /* ============================================================ SELLOS DORADOS DE GARANTÍA ============================================================ */ .sellos-oro{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:36px} .sello-oro{ width:132px;height:132px;border-radius:50%; background:radial-gradient(circle at 32% 26%, #FBEFC0 0%, #E3C455 38%, #B8942B 68%, #8A6A16 100%); border:3px solid #F2DC94; box-shadow:0 10px 26px rgba(0,0,0,.28), inset 0 0 0 6px rgba(255,255,255,.22); display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;color:#2E2405;padding:12px; } .sello-oro b{ font-family:var(--font-display);font-style:var(--display-italic); font-size:30px;line-height:1; } .sello-oro span{ font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; line-height:1.25;margin-top:5px; } /* ---------- vistazo a las clases ---------- */ .clases{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .clases figure:nth-child(n+5){grid-column:span 1} .clases figure{margin:0;border:2px solid var(--tinta);border-radius:10px;overflow:hidden;background:var(--papel)} .clases img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block} .clases figcaption{ padding:11px 13px;font-size:12.5px;font-weight:800;letter-spacing:.04em; background:var(--tinta);color:var(--acento); } .tema-lenceria .clases figcaption{color:var(--verde)} @media (max-width:900px){ .clases{grid-template-columns:1fr 1fr} } /* ---------- logo de marca ---------- */ .logo-bm{height:74px;width:auto;display:block} footer .logo-bm{margin-bottom:12px} .hero .logo-bm{height:84px;margin-bottom:22px} @media (max-width:900px){ .logo-bm{height:58px} } /* ---------- video en el hero ---------- */ /* Flyer en el hero de lencería: 1080x1920, se muestra completo en 9:16 sin recortar, con el mismo tope de alto que tenía el video. */ .foto-hero.flyer-hero{ width:auto;max-width:100%;height:auto; aspect-ratio:9/16; max-height:min(1180px,90vh); object-fit:cover;display:block; border-radius:14px;box-shadow:0 26px 64px rgba(26,18,38,.28); } @media (max-width:900px){ .foto-hero.flyer-hero{max-width:340px;margin:0 auto} } .video-hero{ width:auto;max-width:100%;height:auto;aspect-ratio:9/16; /* grande, pero acotado para que el botón no se salga de la pantalla */ max-height:min(1180px, 92vh); object-fit:cover;display:block;background:#000; border-radius:14px;box-shadow:0 26px 64px rgba(26,18,38,.32); } @media (max-width:900px){ .video-hero{max-width:340px;margin:0 auto} } /* Las notas internas van OCULTAS por defecto y solo aparecen con ?notas=1 en la URL. Antes era al revés —visibles salvo que la URL trajera ?limpio=1—, o sea que no se publicaran dependía de acordarse de un parámetro. Con la lógica invertida, publicar sin acordarse de nada es lo seguro. Se usa :not() en vez de un display:revert para que, al mostrarlas, cada nota conserve el display que le toca. */ /* Los huecos de datos de las páginas legales NO se esconden: si desaparecen, la frase queda coja ("que ofrece , con domicilio en ,"). Se quedan a la vista, marcados, hasta que Karla dé el dato. */ .pendiente{ background:rgba(255,8,232,.10);border-bottom:1px dotted currentColor; padding:0 3px;font-style:italic; } body:not(.notas) .todo, body:not(.notas) .nota-setup, body:not(.notas) .nota, body:not(.notas) .nota-int{display:none !important} /* El rosa neón de Fashion Money, que Karla quiso también aquí. Sobre la parte clara del degradado da 3.2:1 — pasa para texto grande, y mejora el 2.2 del rosa pastel que estuvo antes. */ .tema-lenceria .hero h1 em{color:#FF08E8} /* ============================================================ ANIMACIONES La clase .con-animacion la pone el JS en el . Si el JS no corre, nada se oculta y la página se ve completa: las animaciones nunca son requisito para leer el contenido. ============================================================ */ .con-animacion .revelar{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform; } .con-animacion .revelar.visible{opacity:1;transform:none} /* En listas y rejillas cada hijo entra un poco después que el anterior. El escalonado se corta a los 8 para que una lista larga no tarde una eternidad en terminar de aparecer. */ .con-animacion .revelar-hijos > *{ opacity:0;transform:translateY(18px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); } .con-animacion .revelar-hijos.visible > *{opacity:1;transform:none} .con-animacion .revelar-hijos.visible > *:nth-child(1){transition-delay:.00s} .con-animacion .revelar-hijos.visible > *:nth-child(2){transition-delay:.07s} .con-animacion .revelar-hijos.visible > *:nth-child(3){transition-delay:.14s} .con-animacion .revelar-hijos.visible > *:nth-child(4){transition-delay:.21s} .con-animacion .revelar-hijos.visible > *:nth-child(5){transition-delay:.28s} .con-animacion .revelar-hijos.visible > *:nth-child(6){transition-delay:.35s} .con-animacion .revelar-hijos.visible > *:nth-child(7){transition-delay:.42s} .con-animacion .revelar-hijos.visible > *:nth-child(n+8){transition-delay:.49s} /* La transición de entrada (.6s) también gobernaba el hover de las tarjetas y lo dejaba pesado. Al pasar el cursor manda la suya, más corta. */ .con-animacion .revelar-hijos > .bono:hover, .con-animacion .revelar-hijos > .perfil:hover, .con-animacion .revelar-hijos > .obj:hover, .con-animacion .revelar-hijos > figure:hover, .con-animacion .revelar-hijos > .otro:hover{ transition:transform .2s ease,box-shadow .2s ease,padding-left .2s ease,border-left-width .2s ease; transition-delay:0s; } /* Variantes de entrada. Antes todo subía 22px y se desvanecía igual: con una sola forma de aparecer, doce secciones seguidas se sienten planas. */ .con-animacion .revelar-zoom{ opacity:0;transform:scale(1.06); transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); } .con-animacion .revelar-izq{ opacity:0;transform:translateX(-34px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); } .con-animacion .revelar-der{ opacity:0;transform:translateX(34px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); transition-delay:.1s; } .con-animacion .revelar-zoom.visible, .con-animacion .revelar-izq.visible, .con-animacion .revelar-der.visible{opacity:1;transform:none} /* El certificado conserva su inclinación al terminar de entrar. */ .con-animacion .certificado-img img{transform:scale(1.06) rotate(-1.2deg)} .con-animacion .certificado-img img.visible{transform:rotate(-1.2deg)} /* El hero no espera al scroll —ya está en pantalla—: entra solo al cargar, escalonado, para que la página no aparezca de golpe y quieta. */ @keyframes entraArriba{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @keyframes entraFoto{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}} .con-animacion .hero-txt > *{opacity:0;animation:entraArriba .75s cubic-bezier(.22,.61,.36,1) forwards} .con-animacion .hero-txt > *:nth-child(1){animation-delay:.05s} .con-animacion .hero-txt > *:nth-child(2){animation-delay:.13s} .con-animacion .hero-txt > *:nth-child(3){animation-delay:.21s} .con-animacion .hero-txt > *:nth-child(4){animation-delay:.29s} .con-animacion .hero-txt > *:nth-child(5){animation-delay:.37s} .con-animacion .hero-txt > *:nth-child(n+6){animation-delay:.45s} .con-animacion .hero-img{opacity:0;animation:entraFoto 1s cubic-bezier(.22,.61,.36,1) .1s forwards} /* Parallax: la clase la pone el JS y el desplazamiento viaja en --par. Va sobre .visible a propósito: `.revelar-zoom.visible{transform:none}` tiene más peso que un selector de dos clases y se comía el parallax entero. Mientras la foto no ha entrado manda su animación de entrada. */ .con-parallax .foto-hero.hub, .con-parallax .resumen-img img.visible{ transform:translate3d(0,var(--par,0px),0); will-change:transform; } /* Los degradados grandes se mueven muy despacio: quietos se leen como un fondo plano de color. */ @keyframes deriva{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } .tema-lenceria .banner-marca, .tema-lenceria .certificado, .tema-lenceria .oferta-deg, .tema-lenceria .final-deg{ background-size:190% 190%; animation:deriva 26s ease-in-out infinite; } /* Quien pidió menos movimiento en su sistema no ve ninguna animación. */ @media (prefers-reduced-motion:reduce){ .con-animacion .revelar, .con-animacion .revelar-zoom, .con-animacion .revelar-izq, .con-animacion .revelar-der, .con-animacion .revelar-hijos > *{ opacity:1 !important;transform:none !important;transition:none !important; } .con-animacion .certificado-img img, .con-animacion .certificado-img img.visible{transform:rotate(-1.2deg) !important} .con-animacion .hero-txt > *, .con-animacion .hero-img{opacity:1 !important;animation:none !important;transform:none !important} .con-parallax .resumen-img img, .con-parallax .foto-hero.hub{transform:none !important} .tema-lenceria .banner-marca, .tema-lenceria .certificado, .tema-lenceria .oferta-deg, .tema-lenceria .final-deg{animation:none !important;background-size:auto !important} }