/* ============================================================ promo-tec.css — Estilos del bloque "Conoce la plataforma" que va tras Conversemos en páginas que NO son Tecnología. GENERADO desde tecnologia.css re-scopeando body.pg-tec/.pg-tec → .promo-tec, para que los teasers y el demo se vean igual dentro de un aunque el de la página sea otro (pg-linea, etc.). ► Si el diseñador cambia tecnologia.css, regenerar: sed -e 's/body\.pg-tec/.promo-tec/g' -e 's/\.pg-tec/.promo-tec/g' \ tecnologia.css > promo-tec.css (y volver a pegar el bloque de más abajo) ============================================================ */ .promo-tec { margin: 0; font-family: 'Poppins', system-ui, sans-serif; color: #101a24; background: var(--navy); -webkit-font-smoothing: antialiased; } /* SIN regla propia de .wrap a propósito (en tecnologia.css sí la hay: width: min(1180px, 92vw)). El bloque se inserta dentro del de otra página —pg-linea, pg-home, etc.—, que ya define su .wrap. Si le imponemos el nuestro, la columna del bloque no coincide con la del resto de la página: en un viewport de 1000px el nuestro daba 920px y el de linea.css 1000px, y el texto quedaba desalineado con todas las demás secciones. ► Al regenerar con el sed, borrar de nuevo la línea '.promo-tec .wrap {…}'. */ .promo-tec section { position: relative; } /* Header sobre navy: variante clara */ .promo-tec .site-header { background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.08); } .promo-tec .site-nav a { color: #e7ebef; } .promo-tec .site-nav a:hover, .promo-tec .site-nav a[aria-current="page"] { color: #f3b53c; opacity: 1; } /* ── HERO ─────────────────────────────────────────────────── */ .promo-tec .thero { background: radial-gradient(1100px 620px at 78% -8%, rgba(31,111,235,.32), transparent 60%), radial-gradient(760px 520px at 8% 8%, rgba(243,181,60,.10), transparent 62%), var(--navy); padding: clamp(2.4rem, 5vw, 4.2rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; } /* ── HERO (foto + mensaje) ────────────────────────────────── */ .promo-tec .thero { background: linear-gradient(90deg, rgba(8,15,23,.9) 0%, rgba(8,15,23,.66) 46%, rgba(8,15,23,.28) 100%), url('../img/tec/hero.jpg'); background-size: cover; background-position: center right; padding: clamp(3.4rem, 10vh, 7rem) 0 clamp(3rem, 7vh, 5.5rem); min-height: calc(100vh - 100px); display: flex; align-items: center; overflow: hidden; } .promo-tec .thero__inner { max-width: 44rem; } .promo-tec .thero__grid { display: grid; grid-template-columns: 1.02fr 1.18fr; gap: clamp(2rem, 4vw, 3.6rem); align-items: center; } .promo-tec .thero__kicker { display: inline-flex; align-items: center; gap: 9px; color: #f3b53c; font-size: .82rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1.2rem; } .promo-tec .thero__kicker::before { content:""; width: 26px; height: 2px; background: #f3b53c; } .promo-tec .thero__title { color: #fff; font-weight: 700; letter-spacing: -.025em; line-height: 1.03; font-size: clamp(2.5rem, 5.4vw, 4.15rem); margin: 0 0 1.4rem; } .promo-tec .thero__title em { font-style: normal; color: #f3b53c; } .promo-tec .thero__sub { color: #b9c2cc; font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.62; max-width: 34rem; margin: 0 0 2rem; } .promo-tec .thero__cta { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; } .promo-tec .btn-amber { background: #f3b53c; color: #101a24; border: none; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 1rem; padding: .95rem 1.6rem; border-radius: 10px; text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; transition: transform .15s, box-shadow .15s; box-shadow: 0 14px 30px -12px rgba(243,181,60,.6); } .promo-tec .btn-amber:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -12px rgba(243,181,60,.7); } .promo-tec .btn-ghost { color: #e7ebef; text-decoration: none; font-weight: 500; font-size: .98rem; display: inline-flex; align-items: center; gap: .5rem; padding: .95rem .4rem; border-bottom: 1px solid transparent; transition: border-color .2s; } .promo-tec .btn-ghost:hover { border-color: rgba(255,255,255,.4); } .promo-tec .thero__note { color: #8a95a1; font-size: .82rem; margin: 1.2rem 0 0; } /* KPIs bajo el hero */ .promo-tec .thero__stats { display: flex; gap: clamp(1.4rem, 3vw, 3rem); flex-wrap: wrap; margin-top: clamp(2.4rem, 4vw, 3.4rem); padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.09); } .promo-tec .thero__stat b { display: block; color: #fff; font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; } .promo-tec .thero__stat span { color: #94a0ac; font-size: .82rem; } /* ── Marco de navegador / escritorio (mockups) ────────────── */ .promo-tec .frame { border-radius: 13px; overflow: hidden; background: #f4f6fa; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); } .promo-tec .frame--float { transform: perspective(1600px) rotateY(-8deg) rotateX(2deg); } .promo-tec .frame__bar { display: flex; align-items: center; gap: 7px; background: #dfe3ea; padding: 9px 13px; } .promo-tec .frame__bar i { width: 10px; height: 10px; border-radius: 50%; display: block; } .promo-tec .frame__url { margin-left: 10px; flex: 1; background: #fff; border-radius: 6px; padding: 5px 12px; font-size: 11.5px; color: #8a939c; max-width: 360px; } .promo-tec .frame__url b { color: #1f2933; font-weight: 500; } .promo-tec .frame__img { display: block; width: 100%; height: auto; background: #f4f6fa; } .promo-tec .frame__crop { max-height: 430px; overflow: hidden; background: #f4f6fa; } .promo-tec .frame__crop .frame__img { width: 100%; } /* ── App interna simulada (paleta REAL del producto) ──────── */ .promo-tec .ui { --nvy:#030d63; --blu:#0085db; --grn:#4bd08b; --ind:#303f9f; --wrn:#fb8c00; --uline:#e6e9f2; --umut:#6b7492; --ubg:#f4f6fa; display: flex; background: var(--ubg); font-size: 12px; color: #1f2743; } .promo-tec .ui__side { width: 62px; background: #fff; border-right: 1px solid var(--uline); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 5px; flex-shrink: 0; } .promo-tec .ui__logo { width: 30px; height: 30px; border-radius: 8px; margin-bottom: 10px; background: linear-gradient(135deg, var(--nvy), var(--blu)); color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; } .promo-tec .ui__ico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; } .promo-tec .ui__ico svg { width: 17px; height: 17px; } .promo-tec .ui__main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .promo-tec .ui__top { height: 44px; background: #fff; border-bottom: 1px solid var(--uline); display: flex; align-items: center; gap: 10px; padding: 0 16px; } .promo-tec .ui__crumb { color: var(--umut); font-size: 11px; } .promo-tec .ui__crumb b { color: var(--nvy); } .promo-tec .ui__body { padding: 16px; overflow: hidden; } .promo-tec .ui h4 { margin: 0; color: var(--nvy); font-size: 15px; } .promo-tec .ui .umut { color: var(--umut); } .promo-tec .ucard { background: #fff; border: 1px solid var(--uline); border-radius: 11px; box-shadow: 0 6px 16px rgba(16,24,64,.05); } .promo-tec .uchip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; } .promo-tec .uchip--ok { background: #e7f6ec; color: #2e7d32; } .promo-tec .uchip--info { background: #e7f0fb; color: #1976d2; } .promo-tec .uchip--warn { background: #fff2e0; color: #b26a00; } .promo-tec .ubar { height: 6px; border-radius: 4px; background: #eef1f4; overflow: hidden; } .promo-tec .ubar > i { display: block; height: 100%; border-radius: 4px; background: var(--blu); } /* ── Secciones claras / oscuras de la landing ─────────────── */ .promo-tec .band { padding: clamp(3.4rem, 6vw, 6rem) 0; } .promo-tec .band--navy { background: var(--navy); } .promo-tec .band--deep { background: #071019; } .promo-tec .band--light { background: #f4f6f8; color: #101a24; } .promo-tec .eyebrow2 { color: #1f6feb; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 1rem; } .promo-tec .band--navy .eyebrow2, .promo-tec .band--deep .eyebrow2 { color: #f3b53c; } .promo-tec .band__title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 1rem; color: inherit; } .promo-tec .band--navy .band__title, .promo-tec .band--deep .band__title { color: #fff; } .promo-tec .band__intro { font-size: 1.08rem; line-height: 1.6; max-width: 44rem; margin: 0; } .promo-tec .band--light .band__intro { color: #4a5661; } .promo-tec .band--navy .band__intro, .promo-tec .band--deep .band__intro { color: #b9c2cc; } .promo-tec .band__head { max-width: 52rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); } /* ── Vista showcase estilo login del app (fondo verde + 6 cards + panel demo) ── */ .promo-tec .schero { background: #0b1f4d; } .promo-tec .schero__bar { background: #0b1f4d; display: flex; align-items: center; gap: 14px; padding: 16px clamp(1.4rem, 4vw, 3.4rem); border-bottom: 1px solid rgba(255,255,255,.06); } .promo-tec .schero__bar img { height: 30px; width: auto; } .promo-tec .schero__bar b { color: #fff; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; } .promo-tec .schero__stage { position: relative; background: radial-gradient(1100px 560px at 18% 0%, #1f6347, transparent 62%), radial-gradient(1000px 680px at 92% 108%, #0d3627, transparent 60%), linear-gradient(158deg, #17543c 0%, #0c2c21 100%); padding: clamp(1.8rem, 3.5vw, 3.4rem); } .promo-tec .schero__grid { position: relative; display: grid; grid-template-columns: 2fr 1fr; gap: clamp(1.4rem, 2.5vw, 2.2rem); max-width: 1400px; margin: 0 auto; align-items: start; } .promo-tec .sccards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 1.8vw, 1.5rem); } .promo-tec .sccard { background: #fff; border-radius: 18px; padding: 1.5rem 1.5rem 1.6rem; box-shadow: 0 18px 40px -22px rgba(4,13,50,.55); position: relative; } .promo-tec .sccard__ic { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; } .promo-tec .sccard__ic svg { width: 26px; height: 26px; } .promo-tec .sccard__tag { position: absolute; top: 1.5rem; right: 1.5rem; font-family: 'Poppins', monospace; font-size: .72rem; font-weight: 600; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; } .promo-tec .sccard h3 { margin: 0 0 .55rem; font-size: 1.28rem; font-weight: 600; color: #101a3a; letter-spacing: -.01em; } .promo-tec .sccard p { margin: 0; font-size: .95rem; line-height: 1.55; color: #4a5570; } .promo-tec .tag-blue { background: #e9ecfb; color: #3a53c5; } .promo-tec .tag-green { background: #e0f4ea; color: #1a9457; } .promo-tec .ic-blue { background: #e9ecfb; color: #3a53c5; } .promo-tec .ic-green { background: #e0f4ea; color: #1a9457; } /* Panel derecho: CTA con 3 pasos (reemplaza el login) */ .promo-tec .scpanel { background: #0e2450; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: clamp(1.7rem, 2.5vw, 2.3rem); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); } .promo-tec .scpanel__eye { font-family: 'Poppins', monospace; font-size: .72rem; font-weight: 600; letter-spacing: .18em; color: #7fb2ff; margin: 0 0 .8rem; } .promo-tec .scpanel__h { color: #fff; font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 .6rem; } .promo-tec .scpanel__sub { color: #aeb9d6; font-size: .98rem; line-height: 1.5; margin: 0 0 1.6rem; } .promo-tec .scstep { display: flex; gap: .9rem; padding: .1rem 0 1.3rem; position: relative; } .promo-tec .scstep:last-of-type { padding-bottom: 1.5rem; } .promo-tec .scstep__n { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: rgba(47,95,224,.18); color: #7fb2ff; border: 1px solid rgba(127,178,255,.4); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; } .promo-tec .scstep__b { color: #fff; font-size: 1.02rem; font-weight: 600; margin: 4px 0 3px; } .promo-tec .scstep__t { color: #9fabca; font-size: .9rem; line-height: 1.45; margin: 0; } .promo-tec .scpanel .btn-amber { width: 100%; justify-content: center; } .promo-tec .scpanel__foot { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.1); color: #aab6dd; font-size: .84rem; text-align: center; } @media (max-width: 980px) { .promo-tec .schero__grid { grid-template-columns: 1fr; } .promo-tec .scpanel { order: -1; } } @media (max-width: 620px) { .promo-tec .sccards { grid-template-columns: 1fr; } } /* ── Showcase 6 módulos (estilo home/login del app) ───────── */.promo-tec .modgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: clamp(2.6rem, 5vw, 4.4rem); } .promo-tec .modgrid__card { background: #101d34; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 1.3rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; transition: transform .15s, border-color .15s, background .15s; text-decoration: none; } .promo-tec .modgrid__card:hover { transform: translateY(-3px); border-color: rgba(243,181,60,.4); background: #13233f; } .promo-tec .modgrid__top { display: flex; align-items: center; gap: .7rem; } .promo-tec .modgrid__ic { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .promo-tec .modgrid__ic svg { width: 20px; height: 20px; } .promo-tec .modgrid__n { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: #5f6c7e; } .promo-tec .modgrid__name { color: #fff; font-size: 1.08rem; font-weight: 600; margin: 0; } .promo-tec .modgrid__desc { color: #9aa6b2; font-size: .9rem; line-height: 1.5; margin: 0; } @media (max-width: 900px) { .promo-tec .modgrid { grid-template-columns: 1fr; } } /* ── Módulos ──────────────────────────────────────────────── */ .promo-tec .mods { display: flex; flex-direction: column; gap: clamp(2.6rem, 5vw, 5rem); } .promo-tec .mod { display: grid; grid-template-columns: 1fr 1.28fr; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; } .promo-tec .mod:nth-child(even) .mod__txt { order: 2; } .promo-tec .mod__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(31,111,235,.14); color: #6ea8ff; font-weight: 700; font-size: 15px; margin-bottom: 1.1rem; } .promo-tec .mod__name { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -.01em; margin: 0 0 .8rem; } .promo-tec .mod__desc { color: #aeb8c2; font-size: 1.02rem; line-height: 1.62; margin: 0 0 1.2rem; } .promo-tec .mod__feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; } .promo-tec .mod__feats li { color: #cfd6de; font-size: .95rem; display: flex; align-items: flex-start; gap: .6rem; } .promo-tec .mod__feats svg { width: 17px; height: 17px; color: #4bd08b; flex-shrink: 0; margin-top: 2px; } .promo-tec .mod__tag { display:inline-block; margin-top:1.1rem; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:#7c8794; } /* ── Gancho (Kanban) ──────────────────────────────────────── */ .promo-tec .hook { display: grid; grid-template-columns: .92fr 1.25fr; gap: clamp(2rem,4vw,3.6rem); align-items: center; } .promo-tec .kan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; background: #eef1f7; } .promo-tec .kan__col { background: #f7f9fc; border: 1px solid #e2e7f0; border-radius: 10px; padding: 10px; } .promo-tec .kan__h { font-size: 11px; font-weight: 700; color: #303f9f; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; } .promo-tec .kan__h span { background: #e3e8f7; color: #5560a8; border-radius: 999px; padding: 1px 7px; font-size: 10px; } .promo-tec .kan__card { background: #fff; border: 1px solid #e6e9f2; border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(16,24,64,.05); } .promo-tec .kan__card:last-child { margin-bottom: 0; } .promo-tec .kan__ttl { font-size: 12px; color: #1f2743; font-weight: 500; line-height: 1.3; } .promo-tec .kan__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .promo-tec .kan__ava { width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* ── White-label ──────────────────────────────────────────── */ .promo-tec .wl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } .promo-tec .wl__card { background: #fff; border: 1px solid #e6e9ee; border-radius: 14px; padding: 1.7rem 1.6rem; transition: transform .15s, box-shadow .15s; } .promo-tec .wl__card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(16,26,36,.35); } .promo-tec .wl__ic { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 1.1rem; background: #101a24; color: #f3b53c; display: flex; align-items: center; justify-content: center; } .promo-tec .wl__ic svg { width: 23px; height: 23px; } .promo-tec .wl__card h3 { margin: 0 0 .5rem; font-size: 1.15rem; color: #101a24; font-weight: 600; } .promo-tec .wl__card p { margin: 0; color: #55616c; font-size: .96rem; line-height: 1.55; } /* ── Cómo funciona ────────────────────────────────────────── */ .promo-tec .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); } .promo-tec .step { position: relative; } .promo-tec .step__n { font-size: 3rem; font-weight: 700; letter-spacing: -.03em; color: rgba(255,255,255,.14); line-height: 1; margin-bottom: .6rem; } .promo-tec .step h3 { color: #fff; font-size: 1.2rem; font-weight: 600; margin: 0 0 .5rem; } .promo-tec .step p { color: #aeb8c2; font-size: .96rem; line-height: 1.55; margin: 0; } /* ── Formulario de calificación (el corazón) ──────────────── */ .promo-tec .lead { background: radial-gradient(700px 380px at 88% 0%, rgba(31,111,235,.3), transparent 62%), var(--navy); padding: clamp(3.4rem, 6vw, 6rem) 0; } .promo-tec .lead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; } .promo-tec .lead__q { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.14; margin: 0 0 1.1rem; } .promo-tec .lead__q em { font-style: normal; color: #f3b53c; } .promo-tec .lead__p { color: #b9c2cc; font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.6rem; } .promo-tec .lead__perks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; } .promo-tec .lead__perks li { color: #cfd6de; font-size: .96rem; display: flex; align-items: center; gap: .7rem; } .promo-tec .lead__perks svg { width: 18px; height: 18px; color: #4bd08b; flex-shrink: 0; } .promo-tec .form { background: #fff; border-radius: 18px; padding: clamp(1.8rem, 3vw, 2.6rem); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); } .promo-tec .form h3 { margin: 0 0 .3rem; font-size: 1.3rem; color: #101a24; font-weight: 700; } .promo-tec .form__hint { margin: 0 0 1.5rem; color: #6b7480; font-size: .9rem; } .promo-tec .field { margin-bottom: 1rem; } .promo-tec .field label { display: block; font-size: .82rem; font-weight: 600; color: #3a4550; margin-bottom: .4rem; } .promo-tec .field input, .promo-tec .field select { width: 100%; box-sizing: border-box; font-family: inherit; font-size: .96rem; padding: .8rem .9rem; border: 1px solid #d7dce2; border-radius: 10px; color: #101a24; background: #fbfcfd; transition: border-color .15s, box-shadow .15s; } .promo-tec .field input:focus, .promo-tec .field select:focus { outline: none; border-color: #1f6feb; box-shadow: 0 0 0 3px rgba(31,111,235,.14); background: #fff; } .promo-tec .field--row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; } .promo-tec .form .btn-amber { width: 100%; justify-content: center; margin-top: .6rem; font-size: 1.02rem; padding: 1rem; } .promo-tec .form__legal { margin: 1rem 0 0; font-size: .76rem; color: #97a0aa; line-height: 1.5; text-align: center; } /* ── Banda "Plataforma de Gestión Comunitaria" (frase 2/3 + mockup 1/3) ── */ .promo-tec .scband { background: radial-gradient(1100px 560px at 82% 0%, rgba(31,111,235,.28), transparent 60%), var(--navy); padding: clamp(3.2rem, 6vw, 5.5rem) 0; } .promo-tec .scband__grid { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .promo-tec .scband__eye { color: #f3b53c; font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1.1rem; } .promo-tec .scband__phrase { color: #fff; font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.04; margin: 0; } .promo-tec .scband__sub { color: #b9c2cc; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.6; max-width: 34rem; margin: 1.3rem 0 0; } @media (max-width: 820px) { .promo-tec .scband__grid { grid-template-columns: 1fr; } } /* ── Mockup laptop (pantalla sobre objeto) ────────────────── */ .promo-tec .laptop { width: 100%; max-width: 560px; margin: 0 auto; } .promo-tec .laptop__lid { background: #0f131b; border: 1px solid #262c38; border-radius: 15px 15px 6px 6px; padding: 12px 12px 14px; box-shadow: 0 34px 66px -30px rgba(0,0,0,.75); } .promo-tec .laptop__cam { width: 5px; height: 5px; border-radius: 50%; background: #39414f; margin: 1px auto 8px; } .promo-tec .laptop__lid img { display: block; width: 100%; height: auto; border-radius: 4px; background: #f4f6fa; } .promo-tec .laptop__deck { position: relative; width: 118%; margin: -1px 0 0 -9%; height: 15px; background: linear-gradient(180deg, #d3d8e0, #a7aeba); border-radius: 2px 2px 12px 12px; } .promo-tec .laptop__deck::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20%; height: 5px; background: #8b93a3; border-radius: 0 0 7px 7px; } /* ── Acordeón de módulos (cerrado por defecto, fondo blanco) ── */ .promo-tec .macc { display: flex; flex-direction: column; gap: 1rem; } .promo-tec .macc__item { border: 1px solid #e6e9ee; border-radius: 15px; background: #fff; overflow: hidden; transition: border-color .2s, box-shadow .2s; box-shadow: 0 10px 28px -22px rgba(16,26,36,.4); } .promo-tec .macc__item[open] { border-color: #cdd4dd; box-shadow: 0 18px 40px -24px rgba(16,26,36,.5); } .promo-tec .macc__sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.6rem; } .promo-tec .macc__sum::-webkit-details-marker { display: none; } .promo-tec .macc__n { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: #aab2bb; flex-shrink: 0; } .promo-tec .macc__ic { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .promo-tec .macc__ic svg { width: 22px; height: 22px; } .promo-tec .macc__name { color: #101a24; font-size: 1.2rem; font-weight: 600; flex: 1; letter-spacing: -.01em; } .promo-tec .macc__tag { font-family: 'Poppins', monospace; font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; } .promo-tec .macc__chev { color: #98a1ab; flex-shrink: 0; transition: transform .2s; } .promo-tec .macc__item[open] .macc__chev { transform: rotate(180deg); } .promo-tec .macc__body { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 3vw, 2.6rem); align-items: center; padding: .2rem 1.6rem 1.9rem; } .promo-tec .macc__desc { color: #55616c; font-size: 1.02rem; line-height: 1.6; margin: 0 0 1.1rem; } .promo-tec .macc__feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; } .promo-tec .macc__feats li { color: #3a4550; font-size: .95rem; display: flex; align-items: flex-start; gap: .6rem; } .promo-tec .macc__feats svg { width: 17px; height: 17px; color: #1f8a5b; flex-shrink: 0; margin-top: 2px; } .promo-tec .macc__body .laptop__lid { background: #eef1f5; border-color: #dde2e9; } .promo-tec .macc__body .laptop__deck { background: linear-gradient(180deg, #dbe0e8, #b3bac6); } @media (max-width: 820px) { .promo-tec .macc__body { grid-template-columns: 1fr; } } /* ── Banda azul "orquesta datos" (texto + mockup) ─────────── */ .promo-tec .qband { background: radial-gradient(900px 460px at 90% 0%, rgba(31,111,235,.4), transparent 60%), linear-gradient(135deg, #123a86 0%, #0d224f 100%); padding: clamp(3.2rem, 6vw, 5.5rem) 0; } .promo-tec .qband__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .promo-tec .qband__eye { color: #f3b53c; font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1.1rem; } .promo-tec .qband__txt { color: #eaeff7; font-size: clamp(1.12rem, 1.9vw, 1.45rem); line-height: 1.58; margin: 0; font-weight: 400; } .promo-tec .qband__txt b { color: #fff; font-weight: 600; } .promo-tec .qband .laptop__lid { background: #0a1a3c; border-color: #21356b; } .promo-tec .qband .laptop__deck { background: linear-gradient(180deg, #b8c1d6, #8b96b2); } @media (max-width: 820px) { .promo-tec .qband__grid { grid-template-columns: 1fr; } } /* ── Domo 180° · arquitectura de plataforma ───────────────── */ .promo-tec .dome { width: min(1150px, 100vw); margin: clamp(1.4rem,3.5vw,2.6rem) auto 0; } .promo-tec .dome__svg { width: 100%; height: auto; display: block; } /* ── Arquitectura circular · Core de Impacto + 6 módulos ──── */ .promo-tec .arch { position: relative; width: min(680px, 94vw); aspect-ratio: 1; margin: clamp(1rem,3vw,2rem) auto 0; } .promo-tec .arch__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .promo-tec .arch__node { position: absolute; transform: translate(-50%, -50%); width: 25%; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; } .promo-tec .arch__ic { width: clamp(48px, 8vw, 62px); height: clamp(48px, 8vw, 62px); border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e2e7ee; box-shadow: 0 12px 26px -14px rgba(16,26,54,.4); } .promo-tec .arch__ic svg { width: 46%; height: 46%; } .promo-tec .arch__lbl { font-size: clamp(.72rem, 1.3vw, .86rem); font-weight: 600; color: #1f2a3a; line-height: 1.25; letter-spacing: -.01em; } .promo-tec .arch__n { font-size: .62rem; font-weight: 700; letter-spacing: .14em; color: #9aa3b0; } .promo-tec .arch__core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 31%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #1f4fb0, #0c1f4a 78%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; color: #fff; text-align: center; padding: 4%; box-shadow: 0 24px 54px -18px rgba(12,31,74,.7), 0 0 0 10px rgba(255,255,255,.55), 0 0 0 11px #e4e9f0; } .promo-tec .arch__core-ic { width: clamp(30px,5vw,40px); height: clamp(30px,5vw,40px); color: #f3b53c; } .promo-tec .arch__core-ic svg { width: 100%; height: 100%; } .promo-tec .arch__core b { font-size: clamp(.92rem, 1.9vw, 1.28rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; } .promo-tec .arch__core span { font-size: clamp(.6rem, 1.1vw, .72rem); color: #aebde0; letter-spacing: .12em; text-transform: uppercase; } @media (max-width: 560px) { .promo-tec .arch__lbl { font-size: .66rem; } .promo-tec .arch__node { width: 30%; } } /* ── Grilla de 6 módulos (2 col × 3, estilo home del app) ──── */ .promo-tec .hgrid__card { background: #fff; border: 1px solid #e6e9ee; border-radius: 15px; padding: 1.5rem 1.6rem; display: flex; gap: 1.1rem; align-items: flex-start; box-shadow: 0 10px 28px -22px rgba(16,26,36,.4); transition: transform .15s, border-color .15s, box-shadow .15s; } .promo-tec .hgrid__card:hover { transform: translateY(-3px); border-color: #cdd4dd; box-shadow: 0 18px 40px -24px rgba(16,26,36,.5); } .promo-tec .hgrid__ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .promo-tec .hgrid__ic svg { width: 23px; height: 23px; } .promo-tec .hgrid__n { font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: #aab2bb; } .promo-tec .hgrid__name { color: #101a24; font-size: 1.12rem; font-weight: 600; margin: .15rem 0 .45rem; letter-spacing: -.01em; } .promo-tec .hgrid__desc { color: #55616c; font-size: .93rem; line-height: 1.5; margin: 0; } @media (max-width: 720px) { .promo-tec .hgrid { grid-template-columns: 1fr; } } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 900px) { .promo-tec .thero__grid, .promo-tec .mod, .promo-tec .hook, .promo-tec .lead__grid { grid-template-columns: 1fr; } .promo-tec .mod:nth-child(even) .mod__txt { order: 0; } .promo-tec .frame--float { transform: none; } .promo-tec .wl, .promo-tec .steps { grid-template-columns: 1fr; } .promo-tec .field--row { grid-template-columns: 1fr; } } /* ==== Sistema de mockups + dome/lightbox — portado de preview inline ==== */ /* ── Sistema de mockups aprobado (navegador + callouts + tilt + mapa + flujo) ── */ .promo-tec .mk-stack{position:relative} .promo-tec .mk-browser{background:#fff;border-radius:13px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)} .promo-tec .mk-bar{display:flex;align-items:center;gap:12px;padding:11px 15px;background:#f3f5f9;border-bottom:1px solid #e6eaf1} .promo-tec .mk-dots{display:flex;gap:7px} .promo-tec .mk-dots i{width:11px;height:11px;border-radius:50%;display:block} .promo-tec .mk-dots i:nth-child(1){background:#ff5f57}.promo-tec .mk-dots i:nth-child(2){background:#febc2e}.promo-tec .mk-dots i:nth-child(3){background:#28c840} .promo-tec .mk-url{flex:1;background:#fff;border:1px solid #e2e6ee;border-radius:8px;padding:6px 13px;font-size:.78rem;color:#7480a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .promo-tec .mk-browser img{display:block;width:100%;height:auto} .promo-tec .mk-callout{position:absolute;background:#fff;border-radius:13px;box-shadow:0 20px 44px -14px rgba(11,19,28,.45);padding:11px 15px;color:#0b1f4d;z-index:5} .promo-tec .mk-lab{font-size:.66rem;color:#8a93c2;font-weight:600;margin-bottom:3px;letter-spacing:.02em} .promo-tec .mk-big{font-size:1.4rem;font-weight:700;line-height:1} .promo-tec .mk-chip{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;padding:6px 13px;border-radius:20px} .promo-tec .mk-chip i{width:9px;height:9px;border-radius:50%;display:block} .promo-tec .mk-tilt{transform:perspective(1900px) rotateY(-12deg) rotateX(4deg);transform-origin:right center} .promo-tec .mk-tilt.left{transform:perspective(1900px) rotateY(12deg) rotateX(4deg);transform-origin:left center} .promo-tec .scband__grid--trio{grid-template-columns:.72fr 1.7fr} .promo-tec .scband__grid--trio .scband__txt{padding-top:1rem} .promo-tec .mk-cluster{position:relative;display:flex;align-items:center} .promo-tec .mk-cluster .c-main{width:58%;flex:none;z-index:3} .promo-tec .mk-side{width:48%;margin-left:-6%;display:flex;flex-direction:column;gap:18px;z-index:2} .promo-tec .mk-side .mk-browser{width:100%} .promo-tec .mk-cluster .mk-callout{position:absolute;bottom:9%;left:-4%;z-index:5} @media(max-width:820px){.promo-tec .scband__grid--trio{grid-template-columns:1fr}.promo-tec .mk-cluster{flex-direction:column}.promo-tec .mk-cluster .c-main,.promo-tec .mk-side{width:100%}.promo-tec .mk-side{margin-left:0;margin-top:18px}.promo-tec .mk-cluster .mk-callout{position:static;display:inline-block;margin-top:14px}} .promo-tec .mk-mapwrap{position:relative;line-height:0} .promo-tec .mk-pin{position:absolute;transform:translate(-50%,-50%);min-width:26px;height:26px;padding:0 6px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#20301a;box-shadow:0 3px 8px rgba(0,0,0,.35);border:2px solid #fff;z-index:2} .promo-tec .mk-pin.g{background:#8fd14f}.promo-tec .mk-pin.a{background:#f3c34a} .promo-tec .mk-flowband{background:linear-gradient(160deg,#eef1f5,#dbe1e9);padding:clamp(2.6rem,6vw,5rem) 0} .promo-tec .mk-flow-scene{position:relative;height:min(560px,64vw);overflow:hidden;border-radius:16px;background:linear-gradient(160deg,#e9edf2,#d6dce4);max-width:1200px;margin:2.2rem auto 0} .promo-tec .mk-flow{position:absolute;top:50%;left:50%;display:flex;gap:24px;transform:translate(-50%,-50%) rotate(-30deg) scale(1.55);transform-origin:center} .promo-tec .mk-flow .col{display:flex;flex-direction:column;gap:24px;width:300px} .promo-tec .mk-flow .col:nth-child(1){margin-top:-40px}.promo-tec .mk-flow .col:nth-child(2){margin-top:-220px}.promo-tec .mk-flow .col:nth-child(3){margin-top:-90px}.promo-tec .mk-flow .col:nth-child(4){margin-top:-300px} .promo-tec .mk-pscreen{border-radius:8px;overflow:hidden;box-shadow:22px 26px 40px -20px rgba(20,30,50,.5);border:1px solid rgba(255,255,255,.6);background:#fff} .promo-tec .mk-pscreen img{display:block;width:100%} @media(max-width:900px){.promo-tec .mk-tilt,.promo-tec .mk-tilt.left{transform:none}} .promo-tec .btn-white{background:#fff;color:var(--navy);text-decoration:none;font-weight:600;font-size:.98rem;display:inline-flex;align-items:center;gap:.55rem;padding:.95rem 1.5rem;border-radius:10px;box-shadow:0 12px 28px -12px rgba(0,0,0,.5);transition:transform .2s,box-shadow .2s} .promo-tec .btn-white:hover{transform:translateY(-2px);box-shadow:0 20px 38px -12px rgba(0,0,0,.55)} .promo-tec .dome{width:min(862px,75vw)} .promo-tec .dome{width:min(667px,57vw);position:relative;cursor:zoom-in} .promo-tec .wlc{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem 2.6rem;background:#fff;border:1px solid #e6e9ee;border-radius:18px;padding:1rem 2rem} .promo-tec .wlc__row{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:baseline;padding:1.4rem 0;border-bottom:1px solid #e2e6ec} .promo-tec .wlc__n{font-size:2.4rem;font-weight:700;line-height:1;color:var(--ac);opacity:.9} .promo-tec .wlc__row h3{margin:0 0 .4rem;font-size:1.12rem;color:#101a24;font-weight:600} .promo-tec .wlc__row p{margin:0;color:#55616c;font-size:.94rem;line-height:1.55} @media(max-width:720px){.promo-tec .wlc{grid-template-columns:1fr;gap:0}} .promo-tec .qmk{display:grid;grid-template-columns:1.55fr 1fr;gap:1.4rem;align-items:center;margin-top:clamp(1.6rem,3.5vw,2.6rem)} .promo-tec .qmk__side{display:flex;flex-direction:column;gap:1.4rem} @media(max-width:820px){.promo-tec .qmk{grid-template-columns:1fr}} .promo-tec .dome__zoom{position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #d9e2ee;color:#14356a;font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:20px;box-shadow:0 6px 16px -8px rgba(20,53,106,.4);z-index:2} .promo-tec .dome-lb{position:fixed;inset:0;background:rgba(7,16,25,.9);display:none;align-items:center;justify-content:center;z-index:1000;padding:3vw} .promo-tec .dome-lb.open{display:flex} .promo-tec .dome-lb__inner{width:min(1400px,96vw);max-height:92vh} .promo-tec .dome-lb__inner svg{width:100%;height:auto;max-height:92vh} .promo-tec .dome-lb__close{position:absolute;top:20px;right:26px;width:44px;height:44px;border-radius:50%;background:#fff;border:0;color:var(--navy);font-size:1.5rem;cursor:pointer;display:grid;place-items:center;line-height:1} /* ============================================================ AÑADIDO A MANO (no viene de tecnologia.css): encabezado del bloque promo. Si regeneras el archivo con el sed de arriba, vuelve a pegar esto al final. ============================================================ */ /* Alineado a la izquierda, con aire respecto al borde: el bloque no se pega al canto de la pantalla, sobre todo en móvil, donde .wrap solo deja 4vw. Los +30px arriba y abajo separan el bloque entero de lo que viene antes y después; el espacio ENTRE eyebrow, título y botón no se toca aquí. */ /* OJO con el selector: el elemento es