/* ══════════════════════════════════════════════════════════════════════════ Profile Reserve 360 — web de marketing, rediseño del 27-sep («la web me parece una mierda», Ruben). Va EN LÍNEA después de landing.css (que se queda con la base, los botones y la demo que se toca) en la portada, los sectores, la comparativa, los recintos y las legales. Qué cambia y por qué: - Familia PM360: lienzo lavanda con «aurora» (dos halos violeta/azul), tarjetas blancas con sombra violeta, rótulo-píldora encima de cada título. - El AVATAR hace la actividad de cada sector (golf, bolos, DJ, hamaca, coche…: marca/landing/escenas3.py). Sale en el héroe, en las tarjetas de sector, en un par de bloques clave y en el pie. Nunca tapa un dato ni la demo. - Capturas REALES grandes y enmarcadas (bento), no miniaturas en fila. - Movimiento: sólo transform, sólo si no se pide menos movimiento (publico.css · .pb-sube / .pb-flota), y nada que mueva la maquetación. Contraste: la letra va siempre en --tx/--md sobre claro o en blanco sobre índigo oscuro; los tonos de las tarjetas de sector son fondos claros. ══════════════════════════════════════════════════════════════════════════ */ :root{ --lav:#f6f5fd; --lav2:#efedfb; --aurora:radial-gradient(55% 60% at 8% 0%,rgba(145,72,251,.17),transparent 70%), radial-gradient(50% 55% at 95% 10%,rgba(40,66,233,.14),transparent 70%), radial-gradient(40% 45% at 60% 100%,rgba(101,100,244,.10),transparent 70%); --ease:cubic-bezier(.2,.8,.2,1); } .sec{padding:112px 0} .sec-lav{background:var(--lav);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)} .sec-gris{background:var(--lav)} h2{font-size:clamp(30px,3.8vw,50px);font-weight:600;letter-spacing:-.04em} .h2-centro{text-align:center;max-width:780px;margin:0 auto} .sec-cab{text-align:center;max-width:760px;margin:0 auto 56px;display:flex;flex-direction:column;align-items:center;gap:16px} .sec-cab .lead{max-width:600px} /* rótulo-píldora (el de publico.css, copiado aquí porque esta hoja va en línea) */ .pb-ceja{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 'Instrument Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);background:rgba(255,255,255,.8);border:1px solid var(--pr-b);border-radius:99px;padding:8px 14px} .pb-ceja i{width:7px;height:7px;border-radius:50%;background:var(--pr);box-shadow:0 0 0 4px rgba(101,100,244,.18)} .pb-ceja-osc{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)} .pb-ceja-osc i{background:#b7b0ff;box-shadow:0 0 0 4px rgba(183,176,255,.22)} .v-jd{color:var(--jd-t)} /* movimiento sutil (landing.js pone .pb-js en ) — sólo transform */ @media (prefers-reduced-motion:no-preference){ .pb-js .pb-sube{transform:translateY(28px);transition:transform .9s var(--ease)} .pb-js .pb-sube.visto{transform:none} .pb-flota{animation:pb-flota 6s ease-in-out infinite} .pb-flota.d2{animation-delay:-2s}.pb-flota.d3{animation-delay:-4s} } @keyframes pb-flota{50%{transform:translateY(-9px)}} /* ══ Cabecera: píldora de cristal que flota ══ */ .cab{position:sticky;top:0;z-index:50;padding:12px 16px 0;background:none;pointer-events:none} .cab-in{pointer-events:auto;max-width:1216px;margin:0 auto;height:62px;padding:0 10px 0 18px;display:flex;align-items:center;gap:22px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.95);border-radius:20px;box-shadow:0 1px 2px rgba(16,19,34,.04),0 10px 30px -12px rgba(50,40,150,.22);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px)} .marca{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--tx);flex-shrink:0} .marca span{display:flex;flex-direction:column;line-height:1.02} .marca b{font-size:17px;font-weight:600;letter-spacing:-.02em} .marca small{font-size:12.5px;font-weight:600;color:var(--tx)} .marca em{font-style:normal;background:linear-gradient(90deg,#9b3cf5,#5b4cf2 45%,#1fb2ff);-webkit-background-clip:text;background-clip:text;color:transparent} .cab-menu{display:flex;gap:2px;list-style:none;margin:0 auto;padding:0} .cab-menu a{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:10px;color:var(--md);text-decoration:none;font-size:15px;font-weight:500} .cab-menu a:hover{color:var(--tx);background:var(--lav)} .cab-acc{display:flex;align-items:center;gap:6px;margin-left:auto} .cab-menu+.cab-acc{margin-left:0} .cab-entrar{display:flex;align-items:center;min-height:40px;padding:0 12px;color:var(--tx);text-decoration:none;font-weight:600;font-size:15px;border-radius:10px} .cab-entrar:hover{background:var(--lav);color:var(--tx)} .cab-demo{border-radius:12px} .cab-mas{display:none;position:relative} .cab-mas summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;cursor:pointer;color:var(--tx)} .cab-mas summary::-webkit-details-marker{display:none} .cab-mas[open] summary{background:var(--lav)} .cab-hoja{position:absolute;right:0;top:54px;width:min(300px,calc(100vw - 32px));background:#fff;border:1px solid var(--ln);border-radius:20px;box-shadow:var(--sh2);padding:10px;display:flex;flex-direction:column;gap:8px} .cab-hoja ul{list-style:none;margin:0;padding:0} .cab-hoja a:not(.btn){display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:12px;color:var(--tx);text-decoration:none;font-weight:600} .cab-hoja a:not(.btn):hover{background:var(--lav)} .cab-hoja .btn{width:100%} /* ══ Héroe ══ */ .hx{position:relative;margin-top:-74px;padding:150px 0 80px;background:var(--aurora),linear-gradient(180deg,var(--lav) 0%,#fff 100%);overflow:hidden} .hx::after{content:'';position:absolute;left:-10%;right:-10%;bottom:-1px;height:120px;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0;pointer-events:none} .hx-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center} .hx-txt{display:flex;flex-direction:column;align-items:flex-start;gap:22px} .hx h1{font-size:clamp(42px,5.6vw,78px);font-weight:600;letter-spacing:-.05em;line-height:.98} .hx .lead{font-size:19px;max-width:540px} .hx .lead b{color:var(--tx);font-weight:600} .hero-cta{display:flex;gap:12px;flex-wrap:wrap} .hx-sellos{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0;padding:0;font-size:14.5px;color:var(--md)} .hx-sellos li{display:flex;align-items:center;gap:6px} .hx-sellos svg{color:var(--jd)} .hx-vis{position:relative;height:560px} .hx-halo{position:absolute;left:50%;top:52%;width:440px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 32% 28%,#c9bcff 0%,#8b78ff 45%,#5b4ce8 100%);box-shadow:0 40px 90px -30px rgba(70,50,200,.55),inset 0 -20px 60px rgba(40,20,140,.35)} .hx-halo::before{content:'';position:absolute;inset:-26px;border-radius:50%;border:1.5px dashed rgba(101,100,244,.35)} .hx-av{position:absolute;left:50%;bottom:0;width:340px;transform:translateX(-50%)} .hx-av img{width:100%;filter:drop-shadow(0 26px 30px rgba(40,32,120,.28))} .hx-t{position:absolute;z-index:2;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.9);border:1px solid #fff;border-radius:18px;padding:12px 16px;box-shadow:0 2px 4px rgba(16,19,34,.04),0 22px 44px -16px rgba(50,40,150,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13px;line-height:1.3} .hx-t small{display:block;color:var(--dm);font-size:12.5px} .hx-t b{display:block;font-size:15px;font-weight:600;color:var(--tx)} .hx-t em{display:block;font-style:normal;font-size:13px;color:var(--md)} .hx-num{font:500 24px/1.05 'IBM Plex Mono',monospace!important;letter-spacing:-.03em} .hx-num span{font:500 13px 'Instrument Sans',sans-serif;color:var(--dm)} .hx-ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex-shrink:0} .hx-ico-v{background:var(--jd-s);color:var(--jd-t)} .hx-ico-a{background:var(--pr-s);color:var(--acc)} .hx-t1{left:-4%;top:12%} .hx-t2{right:-2%;top:26%;flex-direction:column;align-items:flex-start;gap:4px;min-width:170px} .hx-t3{left:2%;bottom:18%} .hx-t4{right:4%;bottom:7%;flex-direction:column;align-items:flex-start;gap:2px} .hx-barra{display:block;width:100%;height:6px;border-radius:9px;background:var(--s3);overflow:hidden} .hx-barra i{display:block;width:76%;height:100%;border-radius:9px;background:linear-gradient(90deg,#34c77b,#0f9d63)} /* ══ Sección de la demo ══ */ .dm-sec{padding:40px 0 30px} .hero-cab{display:grid;grid-template-columns:minmax(0,auto) 164px minmax(0,380px);justify-content:space-between;gap:28px;align-items:end;margin-bottom:22px} .hero-h1{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:6px} .hero-h1 h2{font-size:clamp(28px,3.2vw,42px)} .hero-lado{font-size:17px;padding-bottom:8px} .hero-guia{position:relative;z-index:2;margin-bottom:-23px;align-self:end} .hero-guia img{width:164px;height:auto;filter:drop-shadow(0 10px 14px rgba(40,32,120,.14))} .hero-mas{margin-top:40px;text-align:center;font-size:15.5px} .hero-mas a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:99px;background:var(--lav);border:1px solid var(--pr-b);font-weight:600;text-decoration:none} .hero-mas a:hover{background:var(--pr-s)} /* ══ Marcos de capturas ══ */ .marco{margin:0;background:#fff;border:1px solid var(--ln);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(16,19,34,.05),0 24px 50px -22px rgba(50,40,150,.35)} .marco-barra{display:flex;gap:6px;padding:9px 12px;border-bottom:1px solid var(--ln2);background:#fbfbfe} .marco-barra i{width:9px;height:9px;border-radius:50%;background:#e1e0ee} .marco-barra i:nth-child(1){background:#ff8a80}.marco-barra i:nth-child(2){background:#ffd479}.marco-barra i:nth-child(3){background:#7fd6a0} .movil{margin:0;border:8px solid #0f1222;border-radius:40px;overflow:hidden;background:#0f1222;box-shadow:0 2px 0 1px #2a2d40,0 34px 60px -22px rgba(16,19,34,.55)} .movil img{border-radius:32px;width:100%} /* ══ Cómo funciona: tres tarjetas altas con su pantalla grande ══ */ .px{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:22px;counter-reset:px} .px li{position:relative;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--ln);box-shadow:var(--sh)} .px-vis{position:relative;height:340px;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding:34px 26px 0} .px-1 .px-vis{background:radial-gradient(90% 80% at 30% 0%,#ece8ff,transparent 70%),linear-gradient(160deg,#f4f2ff,#e4e0ff)} .px-2 .px-vis{background:radial-gradient(90% 80% at 70% 0%,#ffe9d6,transparent 70%),linear-gradient(160deg,#fff6ec,#ffe2c7)} .px-3 .px-vis{background:radial-gradient(90% 80% at 50% 0%,#dff6ea,transparent 70%),linear-gradient(160deg,#effbf5,#d2f1e1)} .px-1 .marco{width:100%;transform:rotate(-1.5deg) translateY(6px);transform-origin:bottom center} .px .movil{width:230px;flex-shrink:0} .px-txt{padding:24px 26px 28px;display:flex;flex-direction:column;gap:8px} .px-n{font:500 14px 'IBM Plex Mono',monospace;color:var(--acc);background:var(--pr-s);border-radius:99px;padding:4px 10px;align-self:flex-start} .px h3{font-size:22px;letter-spacing:-.025em} .px p{color:var(--md);font-size:15.5px} /* ══ Funciones: bento ══ */ .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px} .bt{position:relative;grid-column:span 2;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ln);border-radius:28px;overflow:hidden;box-shadow:var(--sh);isolation:isolate} .bt-grande{grid-column:span 4;grid-row:span 2} .bt-mitad{grid-column:span 3} .bt-ancho{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:end} .bt-ancho .bt-txt{align-self:center;padding:36px 36px 36px 40px} .bt-ancho .bt-img{padding-top:36px} .bt-grande .bt-img .marco{width:128%} .bt-txt{padding:26px 28px 18px;display:flex;flex-direction:column;gap:8px;position:relative;z-index:2} .bt-txt p{color:var(--md);font-size:15.5px;max-width:420px} .bt h3{font-size:21px;letter-spacing:-.025em} .bt-grande h3{font-size:28px} .bt-ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--pr-s);color:var(--acc);margin-bottom:4px} .bt-img{margin-top:auto;padding:0 0 0 28px} .bt-img .marco{border-radius:14px 0 0 0;border-right:0;border-bottom:0;box-shadow:0 -10px 40px -18px rgba(50,40,150,.3)} .bt-grande .bt-img{padding-left:36px} .bt-grande{background:radial-gradient(80% 60% at 100% 0%,#ece8ff,transparent 70%),#fff} .bt-avatar{position:absolute;right:14px;top:10px;width:118px;z-index:1;pointer-events:none} .bt-avatar img{filter:drop-shadow(0 12px 16px rgba(40,32,120,.2))} .bt-av .bt-txt{padding-right:130px} /* ══ Tarjetas de sector con el avatar ══ */ .sts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .st{position:relative;display:flex;flex-direction:column;height:100%;min-height:300px;border-radius:26px;overflow:hidden;text-decoration:none;color:var(--tx);background:radial-gradient(120% 80% at 100% 100%,var(--b),transparent 70%),linear-gradient(160deg,var(--a),var(--b));border:1px solid rgba(16,19,34,.05);box-shadow:0 1px 2px rgba(16,19,34,.04);transition:transform .35s var(--ease),box-shadow .35s var(--ease);isolation:isolate} .st:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(50,40,150,.45)} .st:focus-visible{outline:3px solid var(--acc);outline-offset:3px} .st-txt{position:relative;z-index:2;padding:22px 22px 0;display:flex;flex-direction:column;gap:4px} .st-txt h3,.st-txt h2{font-size:21px;letter-spacing:-.025em;font-weight:600} .st-txt>span{font-size:14.5px;color:#3d4357} .st-av{position:absolute;z-index:1;right:-6px;bottom:0;width:62%;max-height:78%;display:flex;align-items:flex-end;justify-content:flex-end;transition:transform .45s var(--ease)} .st-av img{max-height:220px;width:auto;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(40,32,120,.22))} .st-av-ancho{width:88%} .st-av-ancho img{max-height:none;width:100%} .st:hover .st-av{transform:translateY(-4px) scale(1.03)} .st-ir{position:absolute;z-index:2;left:22px;bottom:20px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);color:var(--tx);box-shadow:0 6px 16px -6px rgba(16,19,34,.3);transition:transform .3s var(--ease)} .st:hover .st-ir{transform:translateX(4px)} .st-osc{color:#fff;border-color:rgba(255,255,255,.08)} .st-osc .st-txt>span{color:#d8d4f5} .st-osc .st-ir{background:rgba(255,255,255,.14);color:#fff} .st-todos{grid-column:span 2} .st-grupo{position:absolute;right:14px;bottom:0;display:flex;align-items:flex-end;gap:0} .st-grupo picture img,.st-grupo img{height:150px;width:auto;margin-left:-26px;filter:drop-shadow(0 12px 14px rgba(40,32,120,.2))} /* ══ Apps: panel oscuro índigo ══ */ #apps{padding:40px 0 112px} .apps{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;padding:64px 64px 0;border-radius:36px;overflow:hidden;color:#fff;background:radial-gradient(70% 90% at 90% 0%,rgba(145,72,251,.55),transparent 65%),radial-gradient(60% 80% at 0% 100%,rgba(40,66,233,.5),transparent 60%),#16123a} .apps>*{min-width:0;position:relative} .apps-txt{padding-bottom:64px;display:flex;flex-direction:column;align-items:flex-start;gap:16px} .apps h2{color:#fff} .apps .lead{color:#d6d3f3} .apps-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;color:#e9e7fb;font-size:16px} .apps-lista li{display:flex;gap:10px;align-items:center} .apps-lista svg{color:#7ee2ad} .tiendas{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px} .tienda{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--tx);border-radius:14px;padding:10px 18px 10px 14px;font-weight:600;font-size:16px;line-height:1.1} .tienda small{display:block;font-size:11.5px;font-weight:500;color:var(--dm)} .apps .letra-peq{color:#b9b5dc;font-size:14px} .apps-vis{display:flex;gap:18px;justify-content:center;align-items:flex-start;align-self:end;height:460px;overflow:hidden;padding-top:10px} .apps-vis .movil{width:min(230px,31%);flex-shrink:1;min-width:0;margin-top:70px;box-shadow:0 -20px 60px -20px rgba(0,0,0,.6)} .apps-vis .movil:nth-child(2){margin-top:0} /* ══ Precios ══ */ .precio-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px} .precio-cab>div:first-child{padding-bottom:44px;display:flex;flex-direction:column;align-items:flex-start;gap:16px} .precio-avatar{width:190px;flex-shrink:0;margin-right:6%;margin-bottom:-26px;position:relative;z-index:0} .precio-avatar img{filter:drop-shadow(0 18px 20px rgba(40,32,120,.2))} .planes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;position:relative;z-index:1} .plan{position:relative;background:#fff;border:1px solid var(--ln);border-radius:26px;padding:30px 28px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh)} .plan.dest{border:0;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(140deg,#9148fb,#6564f4,#2842e9) border-box;border:2px solid transparent;box-shadow:0 30px 70px -28px rgba(70,50,200,.5)} .plan-sello{position:absolute;top:-14px;left:28px;background:var(--grad);color:#fff;font-size:12.5px;font-weight:600;border-radius:99px;padding:5px 12px;box-shadow:0 8px 18px -8px rgba(88,73,232,.8)} .plan h3{font-size:22px} .plan-para{color:var(--md);font-size:15px;min-height:2.9em} .plan-precio{display:flex;align-items:flex-end;gap:10px;margin:4px 0 6px} .plan-precio b{font-size:52px;font-weight:600;letter-spacing:-.05em;line-height:.95} .plan-precio span{font-size:13px;color:var(--dm);line-height:1.25} .plan .btn{width:100%} .plan ul{list-style:none;margin:8px 0 4px;padding:16px 0 0;border-top:1px solid var(--ln2);display:flex;flex-direction:column;gap:9px;font-size:15px;color:var(--md)} .plan li{display:flex;gap:9px;align-items:flex-start} .plan li svg{color:var(--jd);flex-shrink:0;margin-top:3px} .plan-alta{margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center;font-size:14.5px;font-weight:600;color:var(--acc);text-decoration:none} .plan-alta:hover{text-decoration:underline} /* ══ Preguntas ══ */ .faq2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start} .faq2-cab{position:sticky;top:110px;display:flex;flex-direction:column;align-items:flex-start;gap:16px} .faq2-av{width:200px;margin-top:10px} .faq2-av img{filter:drop-shadow(0 18px 20px rgba(40,32,120,.2))} .faq{max-width:none} .preg{background:#fff;border:1px solid var(--ln);border-radius:18px;margin-bottom:12px;transition:box-shadow .2s,border-color .2s} .preg[open]{border-color:var(--pr-b);box-shadow:var(--sh)} .preg summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 20px;min-height:60px;font-weight:600;font-size:17px;cursor:pointer} .preg summary::-webkit-details-marker{display:none} .preg summary span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--lav);color:var(--acc);transition:transform .25s var(--ease);flex-shrink:0} .preg[open] summary span{transform:rotate(45deg);background:var(--pr-s)} .preg p{padding:0 20px 20px;color:var(--md);font-size:16px} /* ══ Cierre + formulario ══ */ .cierre{background:var(--aurora),var(--lav);border-top:1px solid var(--ln);overflow:hidden} .cierre-in{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:stretch} .cierre-txt{display:flex;flex-direction:column;align-items:flex-start;gap:16px} .cierre-avatar{margin-top:auto;margin-bottom:-190px;padding-top:28px;width:260px;align-self:center} .cierre-avatar img{filter:drop-shadow(0 18px 22px rgba(40,32,120,.22))} .lista-ok{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;color:var(--md);font-size:16.5px} .lista-ok li{display:flex;gap:10px;align-items:center} .lista-ok svg{color:var(--jd);flex-shrink:0} .form-demo{background:#fff;border:1px solid #fff;border-radius:28px;padding:30px;box-shadow:0 2px 4px rgba(16,19,34,.04),0 40px 80px -30px rgba(50,40,150,.4)} .campos{display:grid;grid-template-columns:1fr 1fr;gap:14px} .campos label{display:flex;flex-direction:column;gap:7px;font-size:14.5px;font-weight:600;color:var(--tx)} .campos .ancho{grid-column:1/-1;display:block} .campos .ancho textarea{display:block;margin-top:7px} .campos .opc{font-weight:400;color:var(--dm)} .campos input,.campos select,.campos textarea{font:inherit;font-size:16px;font-weight:400;border:1px solid #d9d8ea;border-radius:13px;padding:12px 14px;background:#fff;color:var(--tx);min-height:50px;width:100%;transition:border-color .15s,box-shadow .15s} .campos input:focus,.campos select:focus,.campos textarea:focus{outline:none;border-color:var(--pr);box-shadow:0 0 0 4px rgba(101,100,244,.16)} .campos textarea{resize:vertical} .campos [aria-invalid=true]{border-color:var(--cr);box-shadow:0 0 0 4px rgba(224,69,59,.15)} .trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .rgpd{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--md);margin:16px 0 18px} .rgpd input{width:20px;height:20px;margin-top:1px;accent-color:var(--acc);flex-shrink:0} .demo-err{background:var(--cr-s);color:var(--cr-t);border-radius:12px;padding:10px 12px;font-size:14.5px;margin-bottom:12px} .form-demo .btn-l{width:100%} .demo-ya{margin-top:12px;text-align:center;font-size:14px;color:var(--dm)} .demo-ok{display:flex;gap:12px;align-items:flex-start;background:var(--jd-s);color:var(--jd-t);border-radius:16px;padding:16px;margin-bottom:14px} .demo-ok p{color:var(--md);margin-top:2px} /* ══ Pie ══ */ .pie{background:#0f0c2a;color:#c9c6e6;padding:0 0 30px;margin-top:0} .pie-cta{position:relative;z-index:3;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;margin:-86px 0 48px;padding:30px 36px;border-radius:30px;color:var(--tx);background:radial-gradient(70% 120% at 100% 0%,#e6e0ff,transparent 70%),#fff;box-shadow:0 40px 80px -30px rgba(15,12,42,.6)} .pie-cta h2{font-size:clamp(24px,2.6vw,34px)} .pie-cta p{color:var(--md);margin-top:6px} .pie-cta-ico{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--lav);box-shadow:inset 0 0 0 1px var(--pr-b)} .pie-cta-b{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end} .pie-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-top:20px} .pie .marca{color:#fff}.pie .marca small{color:#fff} .pie .marca svg path[stroke="#0b0f24"]{stroke:#fff} .pie-marca p{margin-top:14px;font-size:14.5px;line-height:1.55;max-width:320px;color:#aeaad2} .pie nav b{display:block;color:#fff;font-size:14px;font-weight:600;margin-bottom:10px} .pie nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .pie nav a{display:flex;align-items:center;min-height:34px;color:#c9c6e6;text-decoration:none;font-size:14.5px} .pie nav a:hover{color:#fff} .pie-legal{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:14px;color:#a6a2cc} .pie-legal a{color:#a6a2cc} .pie-legal span:last-child{margin-left:auto} .pie :focus-visible{outline-color:#b7b0ff} /* el cierre de antes del pie necesita aire para la tarjeta que se monta encima */ main>section:last-child{padding-bottom:180px} /* ══ Pantallas medianas ══ */ @media (max-width:1100px){ .cab-menu{display:none} .cab-mas{display:block} .hx-in{grid-template-columns:1fr 1fr} .hero-cab{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)} .hero-guia{display:none} .px{grid-template-columns:1fr 1fr} .px-1{grid-column:1/-1} .bento{grid-template-columns:repeat(2,1fr)} .bt,.bt-grande,.bt-mitad{grid-column:span 1;grid-row:auto} .bt-grande,.bt-ancho{grid-column:1/-1} .bt-grande .bt-img .marco{width:100%} .sts{grid-template-columns:repeat(3,1fr)} .st-todos{grid-column:span 3} .apps{padding:48px 40px 0} .pie-cols{grid-template-columns:1fr 1fr} .pie-cta{grid-template-columns:1fr;text-align:center;justify-items:center;padding:30px} .pie-cta-b{justify-content:center} } /* ══ Móvil ══ */ @media (max-width:860px){ .sec{padding:72px 0} h2{font-size:clamp(28px,7.6vw,38px)} .lead{font-size:17px} .sec-cab{margin-bottom:36px;gap:12px} .cab{padding:8px 10px 0} .cab-in{height:58px;padding:0 6px 0 14px;gap:8px;border-radius:18px} .cab-entrar{display:none} .hx{padding:110px 0 70px} .hx-in{grid-template-columns:1fr;gap:10px} .hx h1{font-size:clamp(40px,11vw,56px)} .hx .lead{font-size:17.5px} .hero-cta{width:100%} .hero-cta .btn{flex:1 1 100%} .hx-vis{height:430px;margin:10px -8px 0} .hx-halo{width:300px} .hx-av{width:280px} .hx-t{padding:9px 12px;border-radius:15px} .hx-t b{font-size:14px} .hx-num{font-size:20px!important} .hx-t1{left:0;top:4%} .hx-t2{right:0;top:30%;min-width:140px} .hx-t3{left:0;bottom:20%} .hx-t4{display:none} .dm-sec{padding:20px 0 20px} .hero-cab{grid-template-columns:1fr;gap:12px;margin-bottom:18px} .hero-mas{margin-top:16px} .px{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--gut));padding:4px var(--gut) 16px;scroll-padding:0 var(--gut);overscroll-behavior-x:contain} .px::-webkit-scrollbar{display:none} .px>li{flex:0 0 min(86%,360px);scroll-snap-align:start} .px-vis{height:280px;padding:26px 18px 0} .px .movil{width:190px} .bento{grid-template-columns:1fr;gap:16px} .bt,.bt-grande,.bt-ancho,.bt-mitad{grid-column:auto} .bt-ancho{display:flex} .bt-ancho .bt-txt{padding:22px 104px 16px 22px} .bt-ancho .bt-img{padding-top:0} .bt-grande h3{font-size:23px} .bt-txt{padding:22px 22px 16px} .bt-img{padding-left:22px} .bt-avatar{width:92px;right:8px;top:8px} .bt-av .bt-txt{padding-right:104px} .sts{grid-template-columns:1fr 1fr;gap:12px} .st{min-height:230px;border-radius:22px} .st-txt{padding:16px 16px 0} .st-txt h3,.st-txt h2{font-size:18px} .st-txt>span{font-size:13.5px} .st-av{width:74%} .st-av img{max-height:150px} .st-ir{left:14px;bottom:14px;width:38px;height:38px} .st-todos{grid-column:1/-1} .st-grupo img{height:110px;margin-left:-22px} #apps{padding:10px 0 72px} .apps{grid-template-columns:1fr;gap:28px;padding:40px 24px 0;border-radius:28px} .apps-txt{padding-bottom:0} .apps-vis{gap:10px} .apps-vis{height:300px} .apps-vis .movil{border-width:5px;border-radius:26px;margin-top:40px} .apps-vis .movil img{border-radius:21px} .apps-vis .movil:nth-child(2){margin-top:0} .precio-avatar{width:110px;margin-right:0;margin-bottom:-16px} .precio-cab>div:first-child{padding-bottom:24px} .planes{grid-template-columns:1fr} .plan-para{min-height:0} .faq2{grid-template-columns:1fr;gap:28px} .faq2-cab{position:static} .faq2-av{display:none} .cierre-in{grid-template-columns:1fr;gap:32px} .cierre-avatar{display:none} main>section:last-child{padding-bottom:150px} .pie-cta{padding:26px 20px;border-radius:24px;margin:-110px 0 40px} .pie-cta-b .btn{flex:1 1 100%} .pie-legal span:last-child{margin-left:0} } @media (max-width:560px){ .env{padding:0 16px} .cab-demo{padding:0 12px;font-size:14px} .marca b{font-size:15.5px}.marca small{font-size:11.5px} .hx-vis{height:400px} .hx-halo{width:270px} .hx-av{width:236px} .campos{grid-template-columns:1fr} .form-demo{padding:20px;border-radius:22px} .pie-cols{grid-template-columns:1fr 1fr;gap:24px} .pie-marca{grid-column:1/-1} } @media (max-width:380px){ .cab-demo{display:none} } /* ══ Páginas legales (privacidad, aviso legal): cabecera con aurora y el texto en una hoja blanca ══ */ .legal{background:var(--lav)} .legal-cab{margin-top:-74px;padding:120px 0 40px;background:var(--aurora),linear-gradient(180deg,var(--lav),#fff)} .legal-cab-in{display:flex;align-items:flex-end;justify-content:space-between;gap:24px} .legal-cab-in>div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:760px} .legal-cab h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.045em} .legal-av{width:150px;flex-shrink:0;margin-bottom:-40px} .legal-av img{filter:drop-shadow(0 16px 18px rgba(40,32,120,.2))} .legal .legal-in{max-width:860px;margin:0 auto 150px;padding:48px 56px 56px;background:#fff;border:1px solid var(--ln);border-radius:28px;box-shadow:var(--sh)} .legal .legal-in>h2:first-child{margin-top:0} @media (max-width:860px){ .legal-av{display:none} .legal-cab{padding:96px 0 28px} .legal .legal-in{padding:26px 20px 30px;border-radius:22px;margin:0 16px 130px} } /* ══════════════════════════════════════════════════════════════════════════ EL MÓVIL DE LA PORTADA, rehecho (27-sep noche · Ruben, en su iPhone: «la landing en móvil se ve muy fea»). Medido en un iPhone 17 de simulador antes de tocar: 21 pantallas de scroll, el avatar del héroe ocupando una pantalla entera con tarjetas encima de la cara, las funciones y los precios apilados en ocho y tres tarjetas altísimas, y el enlace de recintos partido en dos líneas. La regla: cada bloque cabe en UNA pantalla. Lo que es una colección (pasos, funciones, sectores, planes) va en carrusel con imán y sus puntos debajo; lo que es una historia (héroe, demo, preguntas, formulario) va en columna. El escritorio no cambia: todo va dentro de max-width:860px. ══════════════════════════════════════════════════════════════════════════ */ .puntos{display:none} .cta-fija{display:none} @media (max-width:860px){ :root{--gut:20px} .env{padding:0 var(--gut)} .sec{padding:60px 0} .sec-cab{margin-bottom:26px;gap:10px} .sec-cab .lead,.lead{font-size:16px} h2{font-size:clamp(28px,7.8vw,34px);line-height:1.06} .pb-ceja{font-size:12px;padding:7px 12px;letter-spacing:.1em} /* ── Cabecera: más baja, pegada arriba y respetando la muesca ── */ .cab{padding:max(8px,env(safe-area-inset-top)) 10px 0} .cab-in{height:54px;border-radius:17px;padding:0 5px 0 12px;gap:6px} .marca svg{width:28px;height:28px} .cab-demo{min-height:40px;padding:0 13px;font-size:14px;border-radius:11px} .cab-mas summary{width:44px;height:44px} /* la hoja del menú a lo ancho de la píldora (el backdrop-filter de .cab-in es su bloque contenedor) */ .cab-hoja{position:fixed;top:62px;left:0;right:0;width:auto;border-radius:22px;padding:8px;box-shadow:0 30px 60px -20px rgba(30,24,90,.45)} .cab-hoja ul{display:grid;grid-template-columns:1fr 1fr;gap:2px} .cab-hoja a:not(.btn){min-height:48px;font-size:15.5px} .cab-hoja .btn{min-height:52px} /* ── Héroe: texto y botones a la vista; debajo, un escenario compacto con el avatar asomado (recortado por abajo, nunca tapado en la cara) ── */ .hx{padding:calc(max(8px,env(safe-area-inset-top)) + 84px) 0 28px} .hx::after{height:36px} .hx-in{gap:22px} .hx-txt{gap:16px} .hx h1{font-size:clamp(38px,10.6vw,46px);line-height:1} .hx .lead{font-size:16.5px;line-height:1.5} .hero-cta{gap:10px;margin-top:4px} .hero-cta .btn-l{min-height:56px;border-radius:16px;font-size:17px} .hx-sellos{gap:6px 14px;font-size:13.5px} .hx-vis{height:clamp(236px,64vw,280px);margin:0;border-radius:28px;overflow:hidden;background:radial-gradient(80% 90% at 85% 100%,#cfc4ff,transparent 70%),linear-gradient(160deg,#f3f0ff,#e3ddff);border:1px solid #fff;box-shadow:0 1px 2px rgba(16,19,34,.04),0 24px 50px -26px rgba(50,40,150,.45)} .hx-halo{width:min(62vw,250px);left:auto;right:-4%;top:auto;bottom:-22%;transform:none} .hx-halo::before{inset:-18px} .hx-av{left:auto;right:1%;bottom:auto;top:16px;width:min(52vw,210px);transform:none} .hx-t{padding:10px 12px;border-radius:16px;gap:9px;max-width:60%} .hx-t small{font-size:12.5px} .hx-t b{font-size:14px;white-space:nowrap} .hx-t em{font-size:12.5px;white-space:nowrap} .hx-ico{width:30px;height:30px;border-radius:10px} .hx-t1{left:14px;top:18px;right:auto} .hx-t2{left:14px;top:auto;bottom:18px;right:auto;min-width:0;width:150px} .hx-t3,.hx-t4{display:none} /* ── La demo ── */ .dm-sec{padding:34px 0 10px} .hero-cab{gap:10px;margin-bottom:16px} .hero-h1 h2{font-size:clamp(28px,7.8vw,34px)} .hero-lado{font-size:16px;padding:0} #probar .ds-cab{margin-bottom:10px} #probar .ds-chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)} #probar .ds-lista{grid-auto-columns:134px;scroll-snap-type:x mandatory} #probar .ds-t{height:166px;border-radius:20px} #probar .ds-pie{font-size:13px;margin-top:0} #probar .da:not(.pantalla){height:clamp(340px,96vw,420px);min-height:0} .hero-mas{margin-top:14px;text-align:left} .hero-mas a{display:flex;justify-content:space-between;width:100%;min-height:58px;padding:0 18px;border-radius:18px;background:#fff;font-size:15px;box-shadow:var(--sh)} .hero-mas a svg{flex-shrink:0} /* ── Carruseles con imán (pasos, funciones, sectores, planes) ── */ .px,#funciones .bento,.sts[data-carrusel],.planes{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin:0 calc(-1 * var(--gut));padding:6px var(--gut) 14px;scroll-padding:0 var(--gut)} .px::-webkit-scrollbar,#funciones .bento::-webkit-scrollbar,.sts[data-carrusel]::-webkit-scrollbar,.planes::-webkit-scrollbar{display:none} .puntos{display:flex;justify-content:center;gap:7px;margin-top:4px;height:8px} .puntos i{width:7px;height:7px;border-radius:9px;background:#d4d2ea;transition:width .3s var(--ease),background .3s} .puntos i.si{width:22px;background:var(--acc)} /* pasos */ .px>li{flex:0 0 min(82%,340px);scroll-snap-align:start;border-radius:24px} .px-vis{height:200px;padding:22px 16px 0} .px-1 .marco{transform:none;width:100%} .px .movil{width:142px;border-width:6px;border-radius:30px} .px .movil img{border-radius:24px} .px-txt{padding:18px 20px 22px;gap:6px} .px h3{font-size:19px} .px p{font-size:15px} /* funciones: una tarjeta por pantalla, todas de la misma altura */ #funciones .bento>.bt{flex:0 0 min(84%,350px);scroll-snap-align:start;border-radius:24px;display:flex;flex-direction:column} #funciones .bt-txt,#funciones .bt-av .bt-txt,#funciones .bt-ancho .bt-txt{padding:20px 20px 14px;align-self:auto} #funciones .bt h3,#funciones .bt-grande h3{font-size:19px} #funciones .bt-txt p{font-size:15px} #funciones .bt-avatar{display:none} #funciones .bt-img,#funciones .bt-grande .bt-img,#funciones .bt-ancho .bt-img{padding:0 0 0 20px;margin-top:auto} #funciones .bt-img .marco,#funciones .bt-grande .bt-img .marco{width:auto} #funciones .bt-img .marco img{height:190px;width:auto;max-width:none;object-fit:cover;object-position:0 0} /* tarjetas de sector (portada y «También para»): dos filas que se deslizan */ .sts[data-carrusel]{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,200px);grid-template-columns:none;grid-auto-columns:min(44%,180px);gap:10px} .sts[data-carrusel]>li{scroll-snap-align:start;min-width:0} #sectores .st{min-height:0;height:100%;border-radius:22px} #sectores .st-av img{max-height:128px} .sts[data-carrusel] .st-todos{grid-row:span 2;grid-column:auto} .sts[data-carrusel] .st-todos .st-grupo{left:8px;right:8px;bottom:62px;display:grid;grid-template-columns:1fr 1fr;justify-items:center;gap:0} .sts[data-carrusel] .st-grupo picture img,.sts[data-carrusel] .st-grupo img{height:104px;margin:0} /* los beneficios de cada página de sector: uno por tarjeta, deslizando */ .benef[data-carrusel]{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin:0 calc(-1 * var(--gut));padding:6px var(--gut) 14px;scroll-padding:0 var(--gut)} .benef[data-carrusel]::-webkit-scrollbar{display:none} .benef[data-carrusel]>article{flex:0 0 min(78%,320px);scroll-snap-align:start;padding:22px 20px 24px} /* héroe de las páginas de sector: el mismo escenario compacto que la portada */ section.sx-hero{padding:calc(max(8px,env(safe-area-inset-top)) + 76px) 0 24px} .sx-hero .sx-cab h1{font-size:clamp(36px,10vw,44px);line-height:1.02} .sx-hero .sx-cab .lead{font-size:16.5px} .sx-hero .sx-txt{gap:16px} .sx-hero .sx-cta{width:100%;gap:10px} .sx-hero .sx-cta .btn-l{min-height:56px;border-radius:16px} .sx-hero .sx-sello{gap:6px 14px;font-size:13.5px} .sx-hero .sx-vis{height:clamp(236px,64vw,280px);margin-top:22px;border-radius:28px;overflow:hidden;background:radial-gradient(80% 90% at 85% 100%,var(--b),transparent 70%),linear-gradient(160deg,#fff,var(--a));border:1px solid #fff;box-shadow:0 24px 50px -26px rgba(50,40,150,.45)} .sx-hero.sx-osc .sx-vis{background:radial-gradient(80% 90% at 85% 100%,rgba(145,72,251,.55),transparent 70%),linear-gradient(160deg,#2a1d66,#140d33);border-color:rgba(255,255,255,.12)} .sx-hero .sx-disco{width:min(62vw,250px);left:auto;right:-4%;top:auto;bottom:-22%;transform:none} .sx-hero .sx-disco::before{inset:-18px} .sx-hero .sx-av{left:auto;right:2%;bottom:auto;top:16px;width:min(50vw,200px);transform:none} .sx-hero .sx-av img{max-height:none;width:100%} .sx-hero .sx-av-ancho{width:min(64vw,260px);top:auto;bottom:10px;right:-2%} .sx-hero .sx-t{max-width:56%;font-size:13.5px;padding:10px 12px;border-radius:15px} .sx-hero .sx-t1{left:14px;top:18px;right:auto} .sx-hero .sx-t2{left:14px;right:auto;bottom:18px;top:auto} /* índice /sectores/: tres avatares asomados en fila, del mismo alto */ .sx-hero .sx-mosaico .mz{top:18px;bottom:auto;height:auto;width:34%} .sx-hero .sx-mosaico .mz img{height:auto;width:100%} .sx-hero .sx-mosaico .mz1{left:0}.sx-hero .sx-mosaico .mz2{left:33%}.sx-hero .sx-mosaico .mz3{left:auto;right:0} /* apps */ #apps{padding:0 0 60px} .apps{gap:22px;padding:32px 22px 0;border-radius:28px} .apps-txt{gap:14px} .apps h2{font-size:clamp(27px,7.4vw,32px)} .apps-lista{font-size:15px;gap:8px} .tiendas{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px} .tienda{padding:9px 12px;font-size:15px;border-radius:13px} .apps .letra-peq{font-size:13.5px;margin-top:0} .apps-vis{height:236px;gap:10px;margin:0 -6px} .apps-vis .movil{margin-top:34px} /* precios: el avatar arriba a la derecha (no estrecha el texto) y los planes en carrusel */ .precio-cab{position:relative;display:block} .precio-cab>div:first-child{padding:0 0 18px;gap:12px} .precio-cab h2{padding-right:96px} .precio-avatar{position:absolute;right:-4px;top:-14px;width:96px;margin:0} .planes{padding-top:20px;align-items:stretch} .plan{flex:0 0 min(84%,340px);scroll-snap-align:center;padding:24px 22px 18px;border-radius:24px;gap:10px} .plan-sello{top:-12px;left:22px} .plan-precio b{font-size:46px} .plan ul{font-size:14.5px;gap:8px} /* preguntas */ .faq2{gap:22px} .preg{border-radius:16px;margin-bottom:10px} .preg summary{padding:14px 16px;min-height:58px;font-size:16px} .preg p{padding:0 16px 16px;font-size:15.5px} /* cierre y formulario */ .cierre-in{gap:24px} .cierre-txt{gap:12px} .lista-ok{font-size:15.5px;gap:8px} .form-demo{padding:20px 18px;border-radius:24px} .campos{grid-template-columns:minmax(0,1fr) 104px;gap:12px} .campos>label:not(:nth-child(3)):not(:nth-child(4)){grid-column:1/-1} .campos label{font-size:14px;gap:6px} .campos input,.campos select,.campos textarea{min-height:50px;border-radius:14px} .rgpd{margin:14px 0 16px;font-size:13.5px} .form-demo .btn-l{min-height:56px;border-radius:16px} /* pie */ .pie-cta{margin:-110px 0 36px;padding:24px 18px;gap:14px} .pie-cta-ico{width:56px;height:56px;border-radius:18px} .pie-cta h2{font-size:24px} .pie-cta-b{width:100%;gap:8px} .pie-cols{grid-template-columns:1fr 1fr;gap:22px 16px;padding-top:6px} .pie-marca{grid-column:1/-1} .pie-cols>nav:nth-of-type(2){grid-column:1/-1;order:3} .pie-cols>nav:nth-of-type(2) ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px} .pie nav a{min-height:40px} .pie-legal{margin-top:28px;gap:6px 18px;padding-bottom:calc(env(safe-area-inset-bottom) + 70px)} /* ── Botonera fija a mano del pulgar: sale al dejar atrás el héroe y se va al llegar al formulario o al pie (landing.js). Sin JS no aparece. ── */ .cta-fija{display:flex;gap:8px;position:fixed;z-index:40;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom) + 10px);padding:8px;border-radius:22px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95);box-shadow:0 1px 2px rgba(16,19,34,.06),0 20px 44px -14px rgba(30,24,90,.45);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);transform:translateY(calc(100% + 40px));visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s} .cta-fija.ver{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s} .cta-fija .btn{flex:1 1 0;min-height:50px;border-radius:15px;font-size:15.5px;padding:0 12px} .cta-fija .btn-p{flex-grow:1.4} html.demo-abierta .cta-fija{display:none} } @media (max-width:380px){ :root{--gut:16px} .hx h1{font-size:36px} .hx-t2{width:136px} .cta-fija .btn{font-size:14.5px} } /* ══ venta asistida (27-sep noche): «Hablemos de tu local» en lugar de los precios, la sección «Descubre Profile Manager 360» y su mención en el pie. Sin cifras. ══ */ .hab{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:1} .hab-p{background:#fff;border:1px solid var(--ln);border-radius:26px;padding:28px 26px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:10px} .hab-p h3{font-size:21px} .hab-p p{color:var(--md);font-size:15.5px;line-height:1.5} .hab-n{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--acc);background:var(--acc-s);border-radius:99px;padding:5px 11px;align-self:flex-start} .hab-dest{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(140deg,#9148fb,#6564f4,#2842e9) border-box;border:2px solid transparent;box-shadow:0 30px 70px -28px rgba(70,50,200,.5)} .hab-pie{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;margin-top:26px;background:#fff;border:1px solid var(--ln);border-radius:22px;padding:18px 22px;box-shadow:var(--sh)} .hab-incl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px;color:var(--md)} .hab-incl li{display:flex;gap:7px;align-items:center} .hab-incl svg{color:var(--jd);flex-shrink:0} .hab-acc{display:flex;gap:10px;flex-wrap:wrap} .pm3{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;background:linear-gradient(160deg,#fbfaff 0%,#f1efff 100%);border:1px solid var(--pr-b);border-radius:32px;padding:44px 48px;position:relative;overflow:hidden} .pm3-txt{display:flex;flex-direction:column;align-items:flex-start;gap:14px;position:relative;z-index:1} .pm3-logo{width:176px;height:auto} .pm3-lista{list-style:none;margin:4px 0 8px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px} .pm3-lista li{display:flex;gap:10px;align-items:flex-start} .pm3-lista svg{color:var(--jd);flex-shrink:0;margin-top:2px} .pm3-lista b{display:block;font-size:15.5px;color:var(--tx)} .pm3-lista span{display:block;font-size:14.5px;color:var(--md);line-height:1.45} .pm3-vis{position:relative;min-height:400px} .pm3-halo{position:absolute;left:50%;top:54%;width:330px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffe7a8 0%,#ffc34d 45%,#f59e0b 100%);opacity:.9;box-shadow:0 40px 90px -30px rgba(200,130,20,.5)} .pm3-av{position:absolute;left:50%;bottom:0;width:300px;transform:translateX(-50%)} .pm3-av img{width:100%;height:auto;filter:drop-shadow(0 26px 30px rgba(40,32,120,.28))} .pm3-t{position:absolute;z-index:2;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.93);border:1px solid #fff;border-radius:18px;padding:12px 16px;box-shadow:0 2px 4px rgba(16,19,34,.04),0 22px 44px -16px rgba(50,40,150,.35);font-size:13px;line-height:1.3} .pm3-t b{display:block;font-size:15px;font-weight:600;color:var(--tx)} .pm3-t small{display:block;color:var(--dm);font-size:12.5px} .pm3-t1{top:14px;left:0;flex-direction:column;align-items:flex-start;gap:2px} .pm3-t2{bottom:34px;right:0} .pm3-estrellas{color:#f5a300;letter-spacing:2px;font-size:16px} .pm3-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e3f8ee;color:var(--jd);flex-shrink:0} .pie-pm360{margin-left:auto} .pie-pm360 b{color:#fff;font-weight:600} @media (max-width:860px){ .hab{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--gut));padding:6px var(--gut) 14px;scroll-padding:0 var(--gut)} .hab::-webkit-scrollbar{display:none} .hab-p{flex:0 0 min(84%,340px);scroll-snap-align:center;padding:22px 20px} .hab-pie{padding:16px} .hab-acc,.hab-acc .btn{width:100%} .pm3{grid-template-columns:1fr;padding:28px 20px 0;gap:6px;border-radius:26px} .pm3-lista{grid-template-columns:1fr} .pm3-txt .btn{width:100%} .pm3-vis{min-height:330px} .pm3-halo{width:250px} .pm3-av{width:230px} .pm3-t1{left:-4px;top:8px} .pm3-t2{right:-4px;bottom:26px} .pie-pm360{margin-left:0} /* «Hablemos»: el avatar arriba a la derecha no debe pisar la entradilla */ .hab-cab .precio-avatar{width:74px;top:-8px} .hab-cab h2{padding-right:84px} .hab-cab .lead{margin-top:6px} } /* el logo original en el pie oscuro (pp_logo claro) y el isotipo de la llamada del pie */ .pie-marca .marca img{display:block;height:40px;width:auto} .pie-cta-ico img{display:block;width:44px;height:44px} /* ══ Avatares de MEDIA FIGURA (27-sep noche, Ruben: «cortan en plano y queda fatal»). Regla: el corte recto de la imagen nunca queda flotando. O cae justo en el borde de un contenedor con overflow:hidden, o la figura SALE de un disco (máscara: por encima del centro del disco se ve entera; por debajo, sólo lo que cae dentro del círculo, así que el corte queda en el punto más bajo del círculo y no se ve), o se usa el retrato (lp_busto). `--rc` = radio del disco; el elemento enmascarado va centrado en el disco y con su borde inferior en el del disco. lp_av marca estas imágenes con `.av-cortado`. ══ */ .av-disco{-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--rc)) no-repeat,radial-gradient(circle var(--rc) at 50% calc(100% - var(--rc)),#000 calc(100% - .5px),transparent 100%) no-repeat; mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--rc)) no-repeat,radial-gradient(circle var(--rc) at 50% calc(100% - var(--rc)),#000 calc(100% - .5px),transparent 100%) no-repeat} /* héroe de la portada: el disco baja hasta los pies del camarero y lo recorta */ @media (min-width:861px){ .hx-halo{top:auto;bottom:30px;transform:translateX(-50%)} .hx-av{bottom:30px;width:330px;--rc:220px;-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--rc)) no-repeat,radial-gradient(circle var(--rc) at 50% calc(100% - var(--rc)),#000 calc(100% - .5px),transparent 100%) no-repeat;mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--rc)) no-repeat,radial-gradient(circle var(--rc) at 50% calc(100% - var(--rc)),#000 calc(100% - .5px),transparent 100%) no-repeat} .hx-av img{filter:none} } @media (min-width:861px) and (max-width:1100px){.hx-av{width:290px;--rc:150px}} /* ≤ 860 px: la tarjeta del héroe recorta (overflow:hidden) y la figura se apoya en su borde de abajo */ @media (max-width:860px){.hx-av{top:auto;bottom:-2px}} /* bento: el retrato en un círculo, en la esquina de la tarjeta */ .bt-busto{width:88px;height:88px;top:14px;right:14px;border-radius:50%;overflow:hidden;background:linear-gradient(160deg,#eceeff,#c2c8ff);border:3px solid #fff;box-shadow:0 12px 26px -12px rgba(40,32,120,.45)} .bt-busto img{display:block;width:100%;height:100%;filter:none} @media (max-width:860px){.bt-busto{width:70px;height:70px}} /* «Hablemos»: en escritorio la figura se esconde detrás de las tarjetas; en el móvil, retrato */ .precio-busto{display:none} @media (max-width:860px){ .hab-cab .precio-avatar{display:none} .hab-cab .precio-busto{display:block;position:absolute;right:0;top:-6px;width:76px;height:76px;border-radius:50%;overflow:hidden;background:linear-gradient(160deg,#eceeff,#c2c8ff);border:3px solid #fff;box-shadow:0 12px 26px -12px rgba(40,32,120,.45)} .hab-cab .precio-busto img{display:block;width:100%;height:100%} .hab-cab h2{padding-right:86px} } /* preguntas: el karaoke sale de un disco lavanda */ .faq2-av{position:relative;width:220px;--rc:110px} .faq2-av::before{content:'';position:absolute;left:0;bottom:0;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0%,#e4defe 40%,#c9bdff 100%)} .faq2-av picture{position:relative;display:block;-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--rc)) no-repeat,radial-gradient(circle var(--rc) at 50% calc(100% - var(--rc)),#000 calc(100% - .5px),transparent 100%) no-repeat;mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--rc)) no-repeat,radial-gradient(circle var(--rc) at 50% calc(100% - var(--rc)),#000 calc(100% - .5px),transparent 100%) no-repeat} .faq2-av img{display:block;width:100%;height:auto;filter:none} /* la tarjeta «Y hasta N sectores»: cuatro retratos en fila, sin cortes */ .st-bustos{right:16px;bottom:18px;gap:0} .st-bustos img{width:72px!important;height:72px!important;margin-left:-14px!important;border-radius:50%;border:3px solid #fff;background:linear-gradient(160deg,#eceeff,#c2c8ff);filter:none!important;box-shadow:0 10px 20px -12px rgba(40,32,120,.5)} .st-bustos img:first-child{margin-left:0!important} @media (max-width:860px){.st-bustos img{width:58px!important;height:58px!important}} /* las tarjetas de sector: la figura cortada se apoya en el borde de abajo; al pasar por encima crece desde ese borde (nada de subirla, que dejaría ver el corte) */ .st-av:has(.av-cortado){transform-origin:50% 100%} .st:hover .st-av:has(.av-cortado){transform:scale(1.03)} /* legales: el médico va en retrato (la franja de arriba se funde con el blanco: el corte se vería) */ .legal-av .av-busto{display:block;width:150px;height:150px;border-radius:50%;background:linear-gradient(160deg,#eceeff,#c2c8ff);border:4px solid #fff;box-shadow:0 16px 30px -14px rgba(40,32,120,.45)} .legal-av{margin-bottom:0}