/* ========================================================= Precios (precios.css) — alineado a tu inicio.css Objetivo: - Mantener NAV/Logo tal cual (lo manda inicio.css) - Fondo + Hero + 3 cards + CTA inferior pixel-perfect al diseño Requisitos: - Cargar inicio.css primero y precios.css después - ========================================================= */ :root{ --prices-maxW: 1180px; --navH: 78px; /* offset del navbar de inicio.css */ } /* ========================= Fondo / Scroll ========================= */ body.page--precios{ overflow-x: hidden; overflow-y: auto; /* Si tienes el fondo exportado del diseño, ponlo aquí: */ background-color:#5c6bff; background-image: url("/assets/img/bg/precios.webp"), radial-gradient(1100px 520px at 50% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), linear-gradient(180deg, #4b66ff 0%, #6e7bff 18%, #9a9cff 52%, #e9e9ff 100%); background-position:center; background-size:cover; background-repeat:no-repeat; } /* Libera el layout fullscreen del home SOLO aquí */ .page--precios .artboard{ overflow: visible !important; min-height: 100svh !important; height: auto !important; } .page--precios .layer{ position: relative !important; inset: auto !important; overflow: visible !important; /* para sombras sin recortes */ } /* FIX recorte de sombras por overflow del nav (solo en esta página) */ .page--precios .nav{ overflow: visible !important; } /* Oculto nav right (pero existe para no romper inicio.js) */ .page--precios .nav__right--hidden{ display:none !important; } /* Contenedor */ .page--precios .pricesHero, .page--precios .pricesGrid, .page--precios .installCta{ width: min(var(--prices-maxW), calc(100% - 32px)); margin-left: auto; margin-right: auto; } /* ========================= Hero ========================= */ .pricesHero{ text-align:center; padding-top: calc(env(safe-area-inset-top, 0px) + var(--navH) + 62px); padding-bottom: 18px; color:#fff; text-shadow: 0 12px 26px rgba(0,0,0,.22); } .pricesHero__title{ margin: 0 0 10px; font-weight: 1000; font-size: clamp(46px, 6.0vw, 76px); letter-spacing: .3px; } .pricesHero__sub1{ margin: 0 0 10px; font-size: clamp(16px, 2.1vw, 24px); color: rgba(255,255,255,.95); } .pricesHero__sub2{ margin: 0; font-size: clamp(14px, 1.7vw, 19px); color: rgba(255,255,255,.88); } /* ========================= Grid de precios ========================= */ .pricesGrid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 16px 0 18px; align-items: stretch; } /* ========================= Cards ========================= */ .priceCard{ position:relative; border-radius: 22px; border: 1px solid rgba(255,255,255,.55); box-shadow: 0 18px 40px rgba(0,0,0,.20); overflow:hidden; padding: 20px 18px 18px; display:flex; flex-direction:column; /* Defaults (Base) */ --cardText: #0b3a78; --cardTextSoft: rgba(11,58,120,.82); --cardBtn1: #ff6a4d; --cardBtn2: #d83c2e; --cardCheck: #23c55e; background: radial-gradient(680px 280px at 50% -10%, rgba(255,255,255,.85), rgba(255,255,255,0) 62%), linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(205,228,255,.92) 45%, rgba(160,203,255,.88) 100%); } .priceCard::before{ content:""; position:absolute; inset:-2px; background: radial-gradient(420px 180px at 22% 18%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%), radial-gradient(520px 220px at 84% 18%, rgba(255,255,255,.35), rgba(255,255,255,0) 62%), radial-gradient(500px 260px at 50% 100%, rgba(255,255,255,.15), rgba(255,255,255,0) 55%); opacity:.75; pointer-events:none; } .priceCard::after{ content:""; position:absolute; inset:0; background: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%), radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%); opacity:.55; pointer-events:none; } .priceCard > *{ position:relative; z-index:1; } .priceCard__cycle{ text-align:center; font-weight: 900; font-size: 16px; color: rgba(255,255,255,.92); width: 100%; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.30); margin-bottom: 14px; text-shadow: 0 10px 18px rgba(0,0,0,.20); } /* Icono (SVG por máscara, sin assets) */ .priceCard__icon{ width: 48px; height: 48px; margin: 6px auto 6px; filter: drop-shadow(0 14px 18px rgba(0,0,0,.18)); background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.55)); border-radius: 14px; position: relative; overflow:hidden; } .priceCard__icon::after{ content:""; position:absolute; inset: 10px; background: linear-gradient(180deg, #ffdd77, #ff8a45); -webkit-mask: var(--mask) center/contain no-repeat; mask: var(--mask) center/contain no-repeat; } .priceCard__icon[data-ico="star"]{ --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E"); } .priceCard__icon[data-ico="bolt"]{ --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 21h-1l1-7H7l6-12h1l-1 7h4z'/%3E%3C/svg%3E"); } .priceCard__icon[data-ico="crown"]{ --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 16 3 7l5 4 4-6 4 6 5-4-2 9H5zm0 4v-2h14v2H5z'/%3E%3C/svg%3E"); } .priceCard__name{ margin: 6px 0 10px; text-align:center; font-weight: 1000; font-size: clamp(34px, 3.8vw, 54px); color: var(--cardText); text-shadow: 0 12px 22px rgba(0,0,0,.12); } .priceCard__money{ width: 100%; text-align:center; margin: 2px auto 14px; background: rgba(255,255,255,.30); border: 1px solid rgba(255,255,255,.40); border-radius: 16px; padding: 12px 12px 10px; box-shadow: 0 14px 22px rgba(0,0,0,.12); } .priceCard__currency{ font-weight: 1000; font-size: 22px; color: rgba(255,255,255,.95); vertical-align: top; margin-right: 2px; text-shadow: 0 10px 18px rgba(0,0,0,.18); } .priceCard__amount{ font-weight: 1000; font-size: clamp(40px, 4.2vw, 64px); color: rgba(255,255,255,.98); letter-spacing: .2px; text-shadow: 0 12px 20px rgba(0,0,0,.18); } .priceCard__per{ font-weight: 900; font-size: 16px; color: rgba(255,255,255,.92); margin-left: 6px; text-shadow: 0 10px 18px rgba(0,0,0,.18); } /* Lista */ .priceCard__list{ list-style:none; padding: 0; margin: 10px 0 16px; flex: 1 1 auto; } .priceCard__list li{ display:flex; gap: 10px; align-items:flex-start; padding: 8px 2px; line-height: 1.22; font-size: 15px; color: rgba(255,255,255,.92); text-shadow: 0 10px 18px rgba(0,0,0,.12); } .priceCard__list li::before{ content:""; width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; background: var(--cardCheck); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.0 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.0 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; filter: drop-shadow(0 10px 12px rgba(0,0,0,.18)); } /* Botón */ .priceCard__btn{ margin-top: auto; border:0; cursor:pointer; width: 100%; padding: 12px 16px; border-radius: 14px; font-weight: 1000; font-size: 16px; color: #ffffff; background: linear-gradient(180deg, var(--cardBtn1), var(--cardBtn2)); box-shadow: 0 16px 26px rgba(0,0,0,.22); } .priceCard__btn:active{ transform: translateY(1px); } /* ========================= Variantes de cards ========================= */ /* Base: más claro + texto azul en el título */ .priceCard--base{ --cardText: #1e57b8; --cardCheck: #22c55e; background: radial-gradient(680px 280px at 50% -10%, rgba(255,255,255,.90), rgba(255,255,255,0) 62%), linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(212,234,255,.92) 50%, rgba(170,210,255,.88) 100%); } /* Pro: azul intenso */ .priceCard--pro{ --cardText: #ffffff; --cardCheck: #22c55e; background: radial-gradient(700px 300px at 50% -10%, rgba(255,255,255,.18), rgba(255,255,255,0) 62%), linear-gradient(180deg, #2f79ff 0%, #1f63f0 50%, #2b56d8 100%); } /* Premium: morado */ .priceCard--premium{ --cardText: #ffffff; --cardCheck: #22c55e; background: radial-gradient(700px 300px at 50% -10%, rgba(255,255,255,.18), rgba(255,255,255,0) 62%), linear-gradient(180deg, #8a3cff 0%, #6e30ea 55%, #5a28d4 100%); } /* Destacado (Pro) */ .priceCard--featured{ transform: translateY(-10px); box-shadow: 0 26px 70px rgba(0,0,0,.30); } /* ========================= CTA instalación/capacitación ========================= */ .installCta{ margin-top: 14px; padding: 10px 0 26px; } .installCta__inner{ border-radius: 20px; overflow:hidden; border: 1px solid rgba(255,255,255,.55); box-shadow: 0 20px 52px rgba(0,0,0,.22); background: radial-gradient(900px 360px at 15% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(40,118,255,.36), rgba(255,255,255,.20)); display:grid; grid-template-columns: 1fr minmax(260px, 42%); align-items: stretch; } .installCta__left{ padding: 22px 22px 22px; display:flex; flex-direction:column; justify-content:center; gap: 14px; } .installCta__row{ display:flex; gap: 14px; align-items:flex-start; } .installCta__ico{ width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.20); border: 1px solid rgba(255,255,255,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 14px 22px rgba(0,0,0,.18); position:relative; overflow:hidden; flex: 0 0 auto; } .installCta__ico::after{ content:""; position:absolute; inset: 10px; background: linear-gradient(180deg, #aee4ff, #2f79ff); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M22 19v2H2v-2h20zM14.6 3l6.4 6.4-1.4 1.4-1.9-1.9-3.5 3.5 1.9 1.9-1.4 1.4L9 10.4 14.6 5 12.6 3H14.6zM6 3h4v2H6v14h4v2H6c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M22 19v2H2v-2h20zM14.6 3l6.4 6.4-1.4 1.4-1.9-1.9-3.5 3.5 1.9 1.9-1.4 1.4L9 10.4 14.6 5 12.6 3H14.6zM6 3h4v2H6v14h4v2H6c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; filter: drop-shadow(0 12px 16px rgba(0,0,0,.18)); } .installCta__title{ margin: 0 0 6px; color:#fff; font-weight: 1000; font-size: clamp(22px, 2.8vw, 34px); text-shadow: 0 12px 22px rgba(0,0,0,.18); } .installCta__sub{ margin: 0; color: rgba(255,255,255,.92); font-size: clamp(14px, 1.6vw, 18px); line-height: 1.25; text-shadow: 0 10px 18px rgba(0,0,0,.14); } .installCta__btn{ align-self:flex-start; border:0; cursor:pointer; padding: 12px 22px; border-radius: 14px; font-weight: 1000; font-size: 16px; color: #ffffff; background: linear-gradient(180deg, #ff6a4d, #d83c2e); box-shadow: 0 16px 26px rgba(0,0,0,.22); } .installCta__right{ display:flex; align-items:flex-end; justify-content:flex-end; padding: 10px 14px 0 0; } .installCta__img{ width: 100%; height: auto; max-width: 520px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.22)); } /* ========================= Responsive ========================= */ @media (max-width: 1020px){ .pricesGrid{ grid-template-columns: 1fr; } .priceCard--featured{ transform: none; } .installCta__inner{ grid-template-columns: 1fr; } .installCta__right{ justify-content:center; padding: 0 14px 14px; } .installCta__img{ max-width: 560px; } } @media (max-width: 560px){ .priceCard{ padding: 18px 16px 16px; } .priceCard__list li{ font-size: 16px; } .priceCard__cycle{ font-size: 15px; } .installCta__left{ padding: 18px 16px 18px; } } /* ========================================================= PATCH — Precios (Base negro + sin transparencias + iconos sin recuadro) Pegar al FINAL de precios.css ========================================================= */ /* 1) ICONOS: quitar recuadro y hacerlos “flotantes” */ .priceCard__icon{ width: 66px; height: 66px; margin: 12px auto 8px; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; /* sombra tipo “sticker” */ filter: drop-shadow(0 16px 18px rgba(0,0,0,.25)) !important; } /* el ícono ahora ocupa TODO el bloque (sin cajita) */ .priceCard__icon::after{ inset: 0 !important; border-radius: 0 !important; background: linear-gradient(180deg, var(--ico1), var(--ico2)) !important; } /* Colores de iconos por plan (más cercanos al diseño) */ .priceCard--base{ --ico1:#2fb7ff; --ico2:#1a55ff; } /* estrella azul */ .priceCard--pro{ --ico1:#ffe06b; --ico2:#ff8a2a; } /* rayo amarillo/naranja */ .priceCard--premium{ --ico1:#ffd86a; --ico2:#ffb02e; } /* corona dorada */ /* 2) PLAN BASE: letras negras + recuadros NO transparentes */ .priceCard--base .priceCard__name{ color: #111 !important; text-shadow: none !important; } .priceCard--base .priceCard__list li{ color: #111 !important; text-shadow: none !important; } /* “Mensual” (pill) sólido */ .priceCard--base .priceCard__cycle{ background: #ffffff !important; border: 1px solid rgba(10,20,40,.12) !important; color: #111 !important; text-shadow: none !important; } /* recuadro del precio sólido + texto negro */ .priceCard--base .priceCard__money{ background: #ffffff !important; border: 1px solid rgba(10,20,40,.12) !important; box-shadow: 0 14px 22px rgba(0,0,0,.10) !important; } .priceCard--base .priceCard__currency, .priceCard--base .priceCard__amount, .priceCard--base .priceCard__per{ color: #111 !important; text-shadow: none !important; } /* opcional: si el card Base aún “se ve transparente” por overlays, baja el brillo */ .priceCard--base::before, .priceCard--base::after{ opacity: .35 !important; } /* ========================================================= PATCH — Card BASE sin transparencia (card completa) ========================================================= */ .priceCard--base{ /* Fondo 100% opaco */ background-color: #ffffff !important; background-image: linear-gradient(180deg, #ffffff 0%, #f2f7ff 52%, #d9ecff 100% ) !important; /* borde un poco más “real” */ border: 1px solid rgba(10,20,40,.14) !important; } /* Quita los overlays que le daban look “transparente/bruma” */ .priceCard--base::before, .priceCard--base::after{ opacity: 0 !important; } /* ========================================================= PATCH — Mostrar CTA top en Precios y evitar choque Pegar al FINAL de precios.css ========================================================= */ /* Asegura que el bloque derecho del nav exista y se vea */ .page--precios .nav__right{ display: flex !important; align-items: center !important; gap: 10px !important; } /* Por si quedo una regla vieja ocultándolo */ .page--precios .nav__right--hidden{ display: flex !important; } /* CTA top: que no se recorte ni se vuelva loco */ .page--precios .ctaTop, .page--precios #btnStartFreeTop{ display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; min-width: 0 !important; padding: 10px 14px !important; font-weight: 900 !important; } /* En pantallas pequeñas, que el nav no explote */ @media (max-width: 520px){ .page--precios .nav{ flex-wrap: wrap !important; row-gap: 10px !important; } .page--precios .nav__right{ width: 100% !important; justify-content: center !important; } } .pricesHero__sub1, .pricesHero__sub2{ font-weight: 900; }