/** * Email Marketing - /email-marketing/ * * ESTA HOJA NO SE ESCRIBE A MANO. Es page-eweb.css con el ambito cambiado: * .aiden-page-eweb -> .aiden-page-mkt. Nada mas. Ni una regla propia, ni un * renombrado de clases. * * Por que, con dos motivos medidos el 21-sep-2026: * * 1. Las clases ew-card* NO son el prefijo de una pagina: son el contrato del * componente compartido includes/parts/_tarjeta-detalle.php, que escribe su * propio CSS contra .ew-card, .ew-card::after, .ew-card > .ew-card-nombre y * .atd-tapado.ew-card--banner. Al renombrarlas a mk-card se quedaron fuera * el boton de «mas», la tapa de la tarjeta y las transiciones del nombre. * * 2. Portar «solo lo que hace falta» corto trece comentarios por la mitad y * dejo trece «*\/» huerfanos en la hoja. Un cierre de comentario sin abrir * convierte el selector siguiente en basura y el navegador tira la regla * entera EN SILENCIO: se perdieron .mk-card, .mk-card h3 y once mas, que es * por lo que la seccion salia con otra tipografia y otro tamano. * * Regla de Alex del 21-sep-2026: /eweb/ es la referencia de toda pagina nueva * y tiene que quedar EXACTAMENTE igual; lo unico que cambia es el contenido. * Si cambia la geometria en /eweb/, se regenera esta hoja. La prueba * tests/i18n-sv/test-mkt-canon-css.php lo comprueba en CI byte a byte. */ /* ═══════════════════════════════════════════════════════════ Creamos tu web (eweb) · Timeline + Plans + Sticky Compare + FAQ Brand pattern: Vision OS pill sticky + liquid glass ═══════════════════════════════════════════════════════════ */ /* ═══ HERO · centered, no visual, with trust row ═══ */ .aiden-page-mkt .eweb-hero{position:relative;overflow:hidden;padding:var(--sp-section-lg) 0 80px;background:#FFFFFF} .aiden-page-mkt .eweb-hero > .orb,.aiden-page-mkt .eweb-hero .orb-1,.aiden-page-mkt .eweb-hero .orb-2{display:none} .aiden-page-mkt .eweb-hero .orb-1{width:700px;height:700px;top:-20%;left:-15%} .aiden-page-mkt .eweb-hero .orb-2{width:500px;height:500px;bottom:-10%;right:-10%} .aiden-page-mkt .eweb-hero-inner{position:relative;z-index:2;text-align:center;max-width:820px;margin:0 auto} /* Hero a 2 columnas cuando lleva demo */ .aiden-page-mkt .eweb-hero-inner--split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;text-align:left;max-width:1180px} .aiden-page-mkt .eweb-hero-inner--split .eweb-hero-h, .aiden-page-mkt .eweb-hero-inner--split .eweb-hero-trust{justify-content:flex-start} .aiden-page-mkt .eweb-hero-inner--split .eweb-hero-ctas{justify-content:flex-start} .aiden-page-mkt .eweb-hero-col--demo{position:relative;z-index:2} @media (max-width:900px){ .aiden-page-mkt .eweb-hero-inner--split{grid-template-columns:1fr;gap:36px;text-align:center} .aiden-page-mkt .eweb-hero-inner--split .eweb-hero-ctas, .aiden-page-mkt .eweb-hero-inner--split .eweb-hero-trust{justify-content:center} .aiden-page-mkt .eweb-hero-col--demo{order:-1} } .aiden-page-mkt .eweb-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:var(--r-pill);background:rgba(255,255,255,.7);backdrop-filter:var(--glass-strong);-webkit-backdrop-filter:var(--glass-strong);border:1px solid rgba(255,255,255,.6);box-shadow:0 2px 8px rgba(0,0,0,.03),inset 0 1px 0 rgba(255,255,255,.85);font-size:12px;font-weight:600;color:var(--t600);margin-bottom:24px;opacity:0;animation:aidenUp .9s var(--ease) .1s forwards;width:fit-content} .aiden-page-mkt .eweb-hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--t500);animation:aidenPulse 2.4s ease-in-out infinite} .aiden-page-mkt .eweb-hero-h{font-family:var(--fd);font-weight:800;font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.045em;color:var(--n950);margin-bottom:24px;opacity:0;transform:translateY(20px);animation:aidenUp 1s var(--ease) .25s forwards} .aiden-page-mkt .eweb-hero-h em{font-style:normal;color:var(--t600)} .aiden-page-mkt .eweb-hero-sub{font-size:17px;line-height:1.6;color:var(--n500);max-width:620px;margin:0 auto 32px;opacity:0;transform:translateY(20px);animation:aidenUp 1s var(--ease) .4s forwards} .aiden-page-mkt .eweb-hero-ctas{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:40px;opacity:0;transform:translateY(20px);animation:aidenUp 1s var(--ease) .55s forwards} .aiden-page-mkt .eweb-hero-trust{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;opacity:0;transform:translateY(20px);animation:aidenUp 1s var(--ease) .7s forwards} .aiden-page-mkt .eweb-hero-trust-item{display:inline-flex;align-items:center;gap:8px;font-family:var(--fb);font-size:13px;font-weight:500;color:var(--n500)} .aiden-page-mkt .eweb-hero-trust-item svg{width:15px;height:15px;color:var(--t500)} /* ═══ TIMELINE 3 PASOS ═══ */ .aiden-page-mkt .eweb-steps{padding:var(--sp-section-lg) 0;position:relative;overflow:hidden;background:var(--n25)} .aiden-page-mkt .eweb-steps .orb-1{width:500px;height:500px;top:20%;right:-10%} .aiden-page-mkt .eweb-steps-line{display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px;position:relative;margin-top:56px;--progress:0%;max-width:1080px;margin-left:auto;margin-right:auto} /* Línea punteada · va del centro del dot 1 al centro del dot 3 */ .aiden-page-mkt .eweb-steps-line::before{content:'';position:absolute;top:28px;left:16.666%;right:16.666%;height:2px;background:repeating-linear-gradient(to right,var(--n200) 0,var(--n200) 4px,transparent 4px,transparent 10px);z-index:0} /* Progress · crece desde el centro del dot 1 hasta porcentaje (0% = 0, 100% = llega al dot 3) */ .aiden-page-mkt .eweb-steps-line::after{content:'';position:absolute;top:28px;left:16.666%;width:calc(var(--progress) * 0.6667);height:2px;background:linear-gradient(90deg,var(--t400),var(--t500) 50%,var(--t600));box-shadow:0 0 12px rgba(19,150,126,.4);z-index:1;transition:width .6s cubic-bezier(.16,1,.3,1)} .aiden-page-mkt .eweb-step{position:relative;z-index:2;text-align:center;padding:0 8px} .aiden-page-mkt .eweb-step-num{font-family:var(--fd);font-size:15px;font-weight:700;color:var(--t600);background:var(--n0);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;letter-spacing:-.01em;border:1.5px solid var(--t200);box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(19,150,126,.08);margin:0 auto 20px;transition:all .4s cubic-bezier(.16,1,.3,1)} .aiden-page-mkt .eweb-step--active .eweb-step-num,.aiden-page-mkt .eweb-step.is-active .eweb-step-num{background:linear-gradient(160deg,var(--t500) 0%,var(--t600) 100%);color:#fff;border-color:var(--t500);box-shadow:0 2px 4px rgba(0,0,0,.08),0 8px 24px rgba(19,150,126,.35);transform:scale(1.06)} .aiden-page-mkt .eweb-step-body{max-width:300px;margin:0 auto} .aiden-page-mkt .eweb-step-body h3{font-family:var(--fd);font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--n950);margin-bottom:10px;line-height:1.2} .aiden-page-mkt .eweb-step-body p{font-size:14.5px;line-height:1.6;color:var(--n500)} /* ═══ FEATURE HIGHLIGHTS alternating ═══ */ .aiden-page-mkt .eweb-feat{padding:var(--sp-section-lg) 0;position:relative;overflow:hidden} .aiden-page-mkt .eweb-feat-row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;margin-bottom:80px;max-width:1180px;margin-left:auto;margin-right:auto} .aiden-page-mkt .eweb-feat-row:last-child{margin-bottom:0} .aiden-page-mkt .eweb-feat-row--reverse .eweb-feat-visual{order:-1} .aiden-page-mkt .eweb-feat-text h3{font-family:var(--fd);font-weight:800;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.032em;color:var(--n950);margin-bottom:14px} .aiden-page-mkt .eweb-feat-text p{font-size:15.5px;line-height:1.6;color:var(--n500);margin-bottom:20px} .aiden-page-mkt .eweb-feat-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px} .aiden-page-mkt .eweb-feat-list li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--n700);font-weight:500} .aiden-page-mkt .eweb-feat-tick{width:20px;height:20px;border-radius:50%;background:var(--t500);position:relative;flex-shrink:0} .aiden-page-mkt .eweb-feat-tick::before{content:'';position:absolute;top:50%;left:50%;width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translate(-50%,-60%) rotate(-45deg)} .aiden-page-mkt .eweb-feat-visual{aspect-ratio:10/9;border-radius:24px;overflow:hidden;background:var(--n25);box-shadow:0 8px 40px rgba(0,0,0,.08)} .aiden-page-mkt .eweb-feat-visual img, .aiden-page-mkt .eweb-feat-visual .ph{width:100%;height:100%;border-radius:24px} .aiden-page-mkt .eweb-feat-visual--demo{aspect-ratio:auto;overflow:visible;background:transparent;box-shadow:none;border-radius:0} /* ═══ PANEL USUARIO · 4 small cards ═══ */ .aiden-page-mkt .eweb-panel{padding:var(--sp-section-lg) 0;position:relative;overflow:hidden;background:linear-gradient(170deg,var(--n25) 0%,#F2FAF8 50%,var(--n25) 100%)} .aiden-page-mkt .eweb-panel .orb-1{width:600px;height:600px;top:-15%;right:-10%} .aiden-page-mkt .eweb-panel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;z-index:2;max-width:1180px;margin:0 auto} .aiden-page-mkt .eweb-panel-card{background:rgba(255,255,255,.7);backdrop-filter:var(--glass-strong);-webkit-backdrop-filter:var(--glass-strong);border:1px solid rgba(255,255,255,.6);border-radius:18px;padding:28px 26px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.85);transition:transform .3s var(--ease)} .aiden-page-mkt .eweb-panel-card:hover{transform:translateY(-2px)} .aiden-page-mkt .eweb-panel-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px} .aiden-page-mkt .eweb-panel-ico svg{width:20px;height:20px} .aiden-page-mkt .eweb-panel-card h3{font-family:var(--fd);font-size:16px;font-weight:700;letter-spacing:-.022em;color:var(--n950);margin-bottom:8px;line-height:1.25} .aiden-page-mkt .eweb-panel-card p{font-size:13.5px;line-height:1.55;color:var(--n500)} /* ═══ PLANS ═══ */ .aiden-page-mkt .eweb-plans{padding:var(--sp-section-lg) 0;position:relative;overflow:hidden} .aiden-page-mkt .eweb-plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1180px;margin:0 auto} .aiden-page-mkt .eweb-plan{position:relative;background:rgba(255,255,255,.75);backdrop-filter:var(--glass-strong);-webkit-backdrop-filter:var(--glass-strong);border:1px solid rgba(255,255,255,.6);border-radius:22px;padding:36px 32px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.85);transition:transform .3s var(--ease);display:flex;flex-direction:column} .aiden-page-mkt .eweb-plan:hover{transform:translateY(-3px)} .aiden-page-mkt .eweb-plan--featured{background:linear-gradient(160deg,var(--n950) 0%,#0F1F1A 100%);color:#fff;border:1px solid var(--n950);box-shadow:0 2px 8px rgba(0,0,0,.08),0 20px 48px rgba(0,0,0,.18);transform:translateY(-12px)} .aiden-page-mkt .eweb-plan--featured:hover{transform:translateY(-16px)} .aiden-page-mkt .eweb-plan-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:5px 14px;border-radius:var(--r-pill);background:linear-gradient(110deg,var(--t500),#1BB896);color:#fff;font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 14px rgba(19,150,126,.35)} .aiden-page-mkt .eweb-plan-head{margin-bottom:20px} .aiden-page-mkt .eweb-plan-ico{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:18px} .aiden-page-mkt .eweb-plan-ico svg{width:22px;height:22px} .aiden-page-mkt .eweb-plan-name{font-family:var(--fd);font-size:20px;font-weight:700;letter-spacing:-.025em;color:var(--n950);margin-bottom:6px} .aiden-page-mkt .eweb-plan--featured .eweb-plan-name{color:#fff} .aiden-page-mkt .eweb-plan-tag{font-size:13.5px;line-height:1.4;color:var(--n500)} .aiden-page-mkt .eweb-plan--featured .eweb-plan-tag{color:rgba(255,255,255,.65)} .aiden-page-mkt .eweb-plan-price{display:flex;align-items:baseline;gap:4px;margin-bottom:6px} .aiden-page-mkt .eweb-plan-setup{font-size:13.5px;font-weight:600;color:var(--t600);margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--n75)} .aiden-page-mkt .eweb-plan--featured .eweb-plan-setup{color:#7FE0C6;border-bottom-color:rgba(255,255,255,.15)} .aiden-page-mkt .eweb-plan-amt{font-family:var(--fd);font-weight:800;font-size:40px;line-height:1;letter-spacing:-.045em;color:var(--n950);color:var(--t600)} .aiden-page-mkt .eweb-plan--featured .eweb-plan-amt{color:var(--t600)} .aiden-page-mkt .eweb-plan-per{font-size:14px;color:var(--n400);font-weight:500} .aiden-page-mkt .eweb-plan--featured .eweb-plan-per{color:rgba(255,255,255,.5)} .aiden-page-mkt .eweb-plan-cta{width:100%;justify-content:center;margin-bottom:24px} .aiden-page-mkt .eweb-plan-klarna{display:flex;align-items:center;gap:8px;margin:-12px 0 22px;padding:10px 12px;background:rgba(255,179,199,.14);border:1px solid rgba(255,179,199,.5);border-radius:12px} .aiden-page-mkt .eweb-klarna-logo{width:48px;height:auto;flex-shrink:0} .aiden-page-mkt .eweb-klarna-txt{font-size:12px;color:var(--n500);line-height:1.3} .aiden-page-mkt .eweb-klarna-txt strong{color:var(--n800);font-weight:800} .aiden-page-mkt .eweb-plan--featured .eweb-klarna-txt{color:rgba(255,255,255,.85)} .aiden-page-mkt .eweb-plan--featured .eweb-klarna-txt strong{color:#fff} .aiden-page-mkt .eweb-plan--featured .eweb-plan-klarna{background:rgba(255,179,199,.18);border-color:rgba(255,179,199,.45)} .aiden-page-mkt .eweb-plan--featured .eweb-plan-cta{background:#fff;color:var(--n950)} .aiden-page-mkt .eweb-plan--featured .eweb-plan-cta:hover{background:var(--t50)} .aiden-page-mkt .eweb-plan-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px} .aiden-page-mkt .eweb-plan-list li{position:relative;padding-left:26px;font-size:14px;color:var(--n700);line-height:1.5} .aiden-page-mkt .eweb-plan--featured .eweb-plan-list li{color:rgba(255,255,255,.8)} .aiden-page-mkt .eweb-plan-list li::before{content:'';position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--t50);background-image:linear-gradient(135deg,var(--t50),var(--t100))} .aiden-page-mkt .eweb-plan-list li::after{content:'';position:absolute;left:5px;top:8px;width:8px;height:5px;border-left:1.8px solid var(--t500);border-bottom:1.8px solid var(--t500);transform:rotate(-45deg)} .aiden-page-mkt .eweb-plan--featured .eweb-plan-list li::before{background:rgba(27,184,150,.15)} .aiden-page-mkt .eweb-plan--featured .eweb-plan-list li::after{border-color:#5BD4B6} /* ═══ COMPARE TABLE STICKY (Vision OS pill · brand standard) ═══ */ .aiden-page-mkt .eweb-compare{padding:var(--sp-section-lg) 0;position:relative} /* Blanco sólido, sin desenfoque ni filete. La caja se define por la sombra. */ /* SIN overflow:hidden. Lo puse al quitar el filete, para recortar las esquinas redondeadas, y con eso maté el `position:sticky` de la cabecera de la tabla: un ancestro con overflow distinto de visible convierte al elemento pegajoso en un elemento normal, y la fila de Estándar/Plus/Business dejaba de seguir al hacer scroll. Las esquinas ya las redondean las propias celdas (thead th:first-child / :last-child), así que no hace falta recortar. */ .aiden-page-mkt .eweb-compare-wrap{background:#fff;border:0;border-radius:24px;box-shadow:0 1px 2px rgba(19,32,28,.04),0 18px 48px rgba(19,32,28,.07)} .aiden-page-mkt .eweb-compare-wrap.is-stuck{box-shadow:0 1px 2px rgba(0,0,0,.04),0 20px 56px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.85)} .aiden-page-mkt .eweb-compare-table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--fb)} .aiden-page-mkt .eweb-compare-table th, .aiden-page-mkt .eweb-compare-table td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--n75);font-size:13.5px} /* Los 80 px eran fijos: no contaban la barra de servicio pegajosa que hay encima ni se enteraban de que el banner promocional se cerrara. Ahora la cabecera se pega justo debajo de esa barra, midiendo dónde acaba de verdad (--absv-top + --absv-alto, que publica _barra-servicio.php). */ .aiden-page-mkt .eweb-compare-table thead th{background:rgba(245,245,244,.96);backdrop-filter:var(--glass-medium);-webkit-backdrop-filter:var(--glass-medium);padding:24px 16px 22px;border-bottom:1px solid var(--n100);vertical-align:top;position:sticky;top:calc(var(--absv-top,0px) + var(--absv-alto,0px) + 10px);z-index:20;transition:padding .45s cubic-bezier(.16,1,.3,1),background .45s cubic-bezier(.16,1,.3,1),backdrop-filter .45s cubic-bezier(.16,1,.3,1),-webkit-backdrop-filter .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1),border-color .45s cubic-bezier(.16,1,.3,1)} .aiden-page-mkt .eweb-compare-table thead th:first-child{border-top-left-radius:24px} .aiden-page-mkt .eweb-compare-table thead th:last-child{border-top-right-radius:24px} /* STUCK STATE — Vision OS pill */ .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-table thead th{padding:10px 16px!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:none!important;border-radius:0!important;box-shadow:none!important;position:sticky;position:-webkit-sticky;top:calc(var(--absv-top,0px) + var(--absv-alto,0px) + 10px)} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-table thead th::before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(255,255,255,.55);backdrop-filter:blur(48px) saturate(2);-webkit-backdrop-filter:blur(48px) saturate(2);border-top:1px solid rgba(255,255,255,.7);z-index:-1;pointer-events:none} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-table thead th:first-child::before{left:16px;border-radius:9999px 0 0 9999px;border-left:1px solid rgba(255,255,255,.7);box-shadow:-6px 6px 24px rgba(0,0,0,.08)} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-table thead th:last-child::before{right:16px;border-radius:0 9999px 9999px 0;border-right:1px solid rgba(255,255,255,.7);box-shadow:6px 6px 24px rgba(0,0,0,.08)} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-table thead th:not(:first-child):not(:last-child)::before{border-radius:0;box-shadow:0 6px 24px rgba(0,0,0,.08)} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-table thead th > *{position:relative;z-index:1} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-head{flex-direction:row!important;gap:8px!important;align-items:center!important;justify-content:center!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-head .ico{width:22px!important;height:22px!important;border-radius:7px!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-head .ico svg{width:11px!important;height:11px!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-name{font-size:12px!important;font-weight:600!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-price{font-size:13px!important;font-weight:700!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-price span{font-size:10px!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-cta{display:none!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-table tbody tr:first-child td{padding-top:24px!important;transition:padding-top .45s cubic-bezier(.16,1,.3,1)} /* BASE styles */ .aiden-page-mkt .eweb-compare-th-head{display:flex;flex-direction:column;align-items:center;gap:10px;transition:gap .45s cubic-bezier(.16,1,.3,1),flex-direction 0s} .aiden-page-mkt .eweb-compare-th-head .ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:all .45s cubic-bezier(.16,1,.3,1)} .aiden-page-mkt .eweb-compare-th-head .ico svg{width:20px;height:20px;transition:all .45s cubic-bezier(.16,1,.3,1)} .aiden-page-mkt .eweb-compare-th-name{font-family:var(--fd);font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--n950);line-height:1.2;transition:font-size .45s cubic-bezier(.16,1,.3,1),font-weight .45s cubic-bezier(.16,1,.3,1)} .aiden-page-mkt .eweb-compare-th-price{font-family:var(--fd);font-size:18px;font-weight:700;color:var(--n950);letter-spacing:-.015em;transition:font-size .45s cubic-bezier(.16,1,.3,1)} /* El «/mes» de cada columna iba en --n400: 3,53:1 sobre la cabecera gris, por debajo del mínimo. Es texto de precio, así que sube a --n500 (5,7:1). Fallo anterior a esta limpieza, aprovecho que estoy en la regla. */ .aiden-page-mkt .eweb-compare-th-price span{font-family:var(--fb);font-size:12px;font-weight:500;color:var(--n500);transition:font-size .45s cubic-bezier(.16,1,.3,1)} .aiden-page-mkt .eweb-compare-th-cta{margin-top:8px;padding:7px 14px;font-size:12px} .aiden-page-mkt .eweb-compare-blank{width:28%;min-width:180px} .aiden-page-mkt .eweb-compare-feat{text-align:left;font-weight:500;color:var(--n700);padding-left:24px;background:rgba(250,250,250,.5)} .aiden-page-mkt .eweb-compare-table tbody tr:hover{background:rgba(240,247,245,.4)} .aiden-page-mkt .eweb-check.yes{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--t50);color:var(--t600)} .aiden-page-mkt .eweb-check.yes svg{width:14px;height:14px} .aiden-page-mkt .eweb-check.no{color:var(--n300);font-size:16px} /* ═══ FAQ ACCORDION (reusa clases dtw- que están definidas en page-disena-tu-web.css) ═══ */ .aiden-page-mkt .eweb-faq{padding:var(--sp-section-lg) 0} .aiden-page-mkt .eweb-faq-list{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:10px} /* item, trigger, wrap, body, plus — usan las clases dtw- que ya están en page-disena-tu-web.css Para evitar duplicar, inyectamos aquí solo los selectores prefijados con page-eweb */ .aiden-page-mkt .dtw-faq-item{background:#fff;border:0;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.03),inset 0 1px 0 rgba(255,255,255,.85);overflow:hidden;transition:background .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1);} .aiden-page-mkt .dtw-faq-item[data-open="1"]{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.04),0 12px 32px rgba(19,150,126,.08),inset 0 1px 0 rgba(255,255,255,.9);} .aiden-page-mkt .dtw-faq-trigger{all:unset;width:100%;box-sizing:border-box;cursor:pointer;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--fd);font-size:16px;font-weight:600;color:var(--n950);letter-spacing:-.015em;line-height:1.35;user-select:none;transition:padding .3s cubic-bezier(.16,1,.3,1)} .aiden-page-mkt .dtw-faq-trigger:focus-visible{outline:2px solid var(--t500);outline-offset:-2px;border-radius:16px} .aiden-page-mkt .dtw-faq-plus{width:30px;height:30px;border-radius:50%;background:var(--n25);position:relative;flex-shrink:0;transition:all .35s cubic-bezier(.16,1,.3,1)} .aiden-page-mkt .dtw-faq-plus::before, .aiden-page-mkt .dtw-faq-plus::after{content:'';position:absolute;top:50%;left:50%;background:var(--n700);transition:transform .35s cubic-bezier(.16,1,.3,1),background .35s cubic-bezier(.16,1,.3,1),opacity .35s cubic-bezier(.16,1,.3,1)} .aiden-page-mkt .dtw-faq-plus::before{width:12px;height:1.8px;transform:translate(-50%,-50%)} .aiden-page-mkt .dtw-faq-plus::after{width:1.8px;height:12px;transform:translate(-50%,-50%)} .aiden-page-mkt .dtw-faq-item[data-open="1"] .dtw-faq-plus{background:var(--t500);transform:rotate(180deg)} .aiden-page-mkt .dtw-faq-item[data-open="1"] .dtw-faq-plus::before{background:#fff} .aiden-page-mkt .dtw-faq-item[data-open="1"] .dtw-faq-plus::after{background:#fff;transform:translate(-50%,-50%) rotate(90deg);opacity:0} .aiden-page-mkt .dtw-faq-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1),opacity .3s cubic-bezier(.16,1,.3,1);opacity:0} .aiden-page-mkt .dtw-faq-item[data-open="1"] .dtw-faq-wrap{grid-template-rows:1fr;opacity:1} .aiden-page-mkt .dtw-faq-body{min-height:0;overflow:hidden;padding:0 24px 20px;font-size:14.5px;line-height:1.6;color:var(--n500);transform:translateY(-4px);transition:transform .45s cubic-bezier(.16,1,.3,1)} .aiden-page-mkt .dtw-faq-item[data-open="1"] .dtw-faq-body{transform:translateY(0)} /* ═══ RESPONSIVE ═══ */ @media(max-width:1024px){ .aiden-page-mkt .eweb-hero{padding:100px 0 60px} .aiden-page-mkt .eweb-steps, .aiden-page-mkt .eweb-feat, .aiden-page-mkt .eweb-panel, .aiden-page-mkt .eweb-plans, .aiden-page-mkt .eweb-compare, .aiden-page-mkt .eweb-faq{padding:var(--sp-section) 0} .aiden-page-mkt .eweb-plans-grid{grid-template-columns:1fr;gap:14px} .aiden-page-mkt .eweb-plan--featured{transform:none} .aiden-page-mkt .eweb-plan--featured:hover{transform:translateY(-3px)} .aiden-page-mkt .eweb-feat-row{grid-template-columns:1fr;gap:40px;margin-bottom:64px} .aiden-page-mkt .eweb-feat-row--reverse .eweb-feat-visual{order:1} .aiden-page-mkt .eweb-panel-grid{grid-template-columns:repeat(2,1fr)} .aiden-page-mkt .eweb-steps-line{grid-template-columns:repeat(3,1fr);gap:32px 12px} .aiden-page-mkt .eweb-steps-line::before, .aiden-page-mkt .eweb-steps-line::after{display:none} .aiden-page-mkt .eweb-compare-blank{min-width:120px} } @media(max-width:768px){ .aiden-page-mkt .eweb-hero{padding:var(--sp-section) 0 48px} .aiden-page-mkt .eweb-hero-h{font-size:clamp(1.8rem,8vw,2.8rem);letter-spacing:-.035em} .aiden-page-mkt .eweb-hero-sub{font-size:15px} .aiden-page-mkt .eweb-hero-trust{gap:18px} .aiden-page-mkt .eweb-hero-trust-item{font-size:12px} .aiden-page-mkt .eweb-steps, .aiden-page-mkt .eweb-feat, .aiden-page-mkt .eweb-panel, .aiden-page-mkt .eweb-plans, .aiden-page-mkt .eweb-compare, .aiden-page-mkt .eweb-faq{padding:60px 0} .aiden-page-mkt .eweb-steps-line{grid-template-columns:1fr;gap:24px} .aiden-page-mkt .eweb-step-body h3{font-size:17px} .aiden-page-mkt .eweb-plan{padding:24px 22px;border-radius:var(--r-lg)} .aiden-page-mkt .eweb-plan-amt{font-size:34px} .aiden-page-mkt .eweb-feat-row{gap:32px;margin-bottom:48px} .aiden-page-mkt .eweb-feat-text h3{font-size:clamp(1.3rem,5vw,1.7rem)} .aiden-page-mkt .eweb-panel-grid{grid-template-columns:repeat(2,1fr);gap:10px} .aiden-page-mkt .eweb-panel-card{padding:22px 20px} /* Compare tabla — fit en 768 */ .aiden-page-mkt .eweb-compare-wrap{border-radius:18px} .aiden-page-mkt .eweb-compare-table thead th:first-child{border-top-left-radius:18px} .aiden-page-mkt .eweb-compare-table thead th:last-child{border-top-right-radius:18px} .aiden-page-mkt .eweb-compare-table th, .aiden-page-mkt .eweb-compare-table td{padding:10px 6px;font-size:11.5px} .aiden-page-mkt .eweb-compare-table thead th{padding:18px 8px 16px} .aiden-page-mkt .eweb-compare-blank{min-width:90px;width:24%} .aiden-page-mkt .eweb-compare-feat{padding-left:10px!important;font-size:11.5px} .aiden-page-mkt .eweb-compare-th-head{gap:6px} .aiden-page-mkt .eweb-compare-th-head .ico{width:30px;height:30px;border-radius:9px} .aiden-page-mkt .eweb-compare-th-head .ico svg{width:15px;height:15px} .aiden-page-mkt .eweb-compare-th-name{font-size:12px} .aiden-page-mkt .eweb-compare-th-price{font-size:15px} .aiden-page-mkt .eweb-compare-th-price span{font-size:10px} .aiden-page-mkt .eweb-compare-th-cta{display:none} .aiden-page-mkt .eweb-check.yes{width:20px;height:20px} .aiden-page-mkt .eweb-check.yes svg{width:11px;height:11px} /* STUCK mobile */ .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-table thead th{padding:7px 8px!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-table thead th:first-child::before{left:8px} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-table thead th:last-child::before{right:8px} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-head{gap:5px} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-head .ico{width:18px!important;height:18px!important;border-radius:5px!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-head .ico svg{width:9px!important;height:9px!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-name{font-size:10.5px!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-price{font-size:11.5px!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-price span{font-size:8.5px!important} .aiden-page-mkt .dtw-faq-trigger{padding:18px 20px;font-size:14.5px} .aiden-page-mkt .dtw-faq-body{padding:0 20px 18px;font-size:13.5px} } @media(max-width:480px){ .aiden-page-mkt .eweb-hero-badge{font-size:11px;padding:6px 14px} .aiden-page-mkt .eweb-hero-h{font-size:clamp(1.6rem,9vw,2.2rem)} .aiden-page-mkt .eweb-hero-sub{font-size:14px;margin-bottom:24px} .aiden-page-mkt .eweb-hero-ctas{gap:8px;flex-direction:column;align-items:stretch;margin-bottom:28px} .aiden-page-mkt .eweb-hero-ctas .b{justify-content:center} .aiden-page-mkt .eweb-hero-trust{gap:14px} .aiden-page-mkt .eweb-hero-trust-item{font-size:11.5px} .aiden-page-mkt .eweb-panel-grid{grid-template-columns:1fr;gap:10px} .aiden-page-mkt .eweb-panel-card{padding:20px 18px} .aiden-page-mkt .eweb-plan{padding:22px 20px} .aiden-page-mkt .eweb-plan-amt{font-size:30px} /* Compare 480px ultra compacto */ .aiden-page-mkt .eweb-compare-wrap{border-radius:var(--r-md)} .aiden-page-mkt .eweb-compare-table thead th:first-child{border-top-left-radius:14px} .aiden-page-mkt .eweb-compare-table thead th:last-child{border-top-right-radius:14px} .aiden-page-mkt .eweb-compare-table th, .aiden-page-mkt .eweb-compare-table td{padding:8px 4px;font-size:10.5px} .aiden-page-mkt .eweb-compare-table thead th{padding:14px 6px 12px} .aiden-page-mkt .eweb-compare-blank{min-width:78px;width:22%} .aiden-page-mkt .eweb-compare-feat{padding-left:8px!important;font-size:10.5px;line-height:1.3} .aiden-page-mkt .eweb-compare-th-head{gap:4px} .aiden-page-mkt .eweb-compare-th-head .ico{width:26px;height:26px;border-radius:7px} .aiden-page-mkt .eweb-compare-th-head .ico svg{width:13px;height:13px} .aiden-page-mkt .eweb-compare-th-name{font-size:11px} .aiden-page-mkt .eweb-compare-th-price{font-size:13px} .aiden-page-mkt .eweb-compare-th-price span{font-size:9px} .aiden-page-mkt .eweb-check.yes{width:18px;height:18px} .aiden-page-mkt .eweb-check.yes svg{width:10px;height:10px} /* STUCK 480px */ .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-table thead th{padding:6px 6px!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-table thead th:first-child::before{left:6px} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-table thead th:last-child::before{right:6px} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-head{gap:3px;flex-wrap:wrap} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-head .ico{width:16px!important;height:16px!important;border-radius:4px!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-head .ico svg{width:8px!important;height:8px!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-name{font-size:9.5px!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-price{font-size:10.5px!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-th-price span{font-size:8px!important} .aiden-page-mkt .eweb-compare-wrap.is-stuck .eweb-compare-table tbody tr:first-child td{padding-top:16px!important} } /* ═══════════════════════════════════════════════════════════ TARJETAS CON MOCKUP · sistema de Aiden One, paleta "Niebla" Sustituye a las 3 features alternas con demos animadas (jul 2026). Se copia aquí en vez de reutilizar page-aiden-one.css a propósito: ese fichero está scopeado a .aiden-page-aiden-one y traerlo entero a /eweb arrastraría hero, banda premium y carrusel. Aquí sólo vive el sistema de tarjetas, con prefijo .ew- para que no choque con nada. ═══════════════════════════════════════════════════════════ */ /* Blancas y despegadas del fondo por la sombra, no por el color. La sombra va en tres capas —contacto, cuerpo y difusa— que es lo que hace que se lea como un objeto apoyado y no como un recuadro con un borrón debajo. */ .aiden-page-mkt{--ew-card:#fff;--ew-sombra:0 1px 2px rgba(19,32,28,.05),0 8px 20px -6px rgba(19,32,28,.09),0 28px 60px -24px rgba(19,32,28,.16)} .aiden-page-mkt .eweb-cards-sec{padding:var(--sp-section) 0} .aiden-page-mkt .ew-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px} /* Las dos tarjetas de móvil se emparejan arriba (mismo tipo de contenido, misma altura) y las bandas anchas van debajo. Antes "Diseño a medida" abarcaba dos filas y quedaba obligada a medir lo que las otras dos juntas: 1793px de alto con el 81% vacío (medido el 5 ago). */ .aiden-page-mkt .ew-card--wide, .aiden-page-mkt .ew-card--banner{grid-column:1 / -1} /* Sin filete: la tarjeta se define por el gris del fondo contra el blanco de la página. Un borde de 1 px al 6 % no separaba nada que el fondo no separase ya; solo añadía una línea. */ /* Relleno de 44 px por los cuatro lados, como estaba: subirlo a 74 abajo para hacerle sitio al «+» despegaba del borde las capturas de móvil, que están pensadas para tocarlo. El botón no necesita relleno: flota encima. */ .aiden-page-mkt .ew-card{position:relative;overflow:hidden;background:var(--ew-card); border:0;border-radius:32px;padding:44px;box-shadow:var(--ew-sombra); display:flex;flex-direction:column} /* flex-basis AUTO, no 0: con basis 0 las tarjetas se reparten la altura a partes iguales aunque el contenido no quepa y el overflow:hidden se come lo de abajo (bug del 28 jul). */ .aiden-page-mkt .ew-card--grow{flex:1 1 auto;min-height:max-content} /* ─── BANDA ANCHA con captura: texto a la izquierda, media a la derecha ─── Va después de .ew-card a propósito: si se declara antes, el padding:44px de .ew-card gana por orden de cascada y la captura no llega a sangrar. */ .aiden-page-mkt .ew-card--banner{flex-direction:row;align-items:center;gap:40px; padding:40px 40px 40px 44px} .aiden-page-mkt .ew-banner-body{flex:0 1 38%;display:flex;flex-direction:column; justify-content:center;padding:0} /* La captura manda en esta banda: se lleva el 62% y se ve entera, con sus esquinas redondeadas (no sangra por el borde como en las tarjetas de móvil). El tope de altura evita que una captura cuadrada estire la banda sin control — con una de prueba de 1046x1046 se fue a 1515px de alto. */ .aiden-page-mkt .ew-card--banner .ew-shot{flex:1 1 62%;margin:0;padding:0; max-height:460px;overflow:visible;align-items:center;justify-content:flex-end; align-self:center} .aiden-page-mkt .ew-card--banner .ew-shot--pc{margin-right:0} .aiden-page-mkt .ew-card--banner .ew-shot--pc img, .aiden-page-mkt .ew-card--banner .ew-shot--pc video{border-radius:22px; box-shadow:0 30px 60px -28px rgba(31,31,31,.45),0 4px 12px rgba(31,31,31,.06)} .aiden-page-mkt .ew-card--banner .ew-shot--mob{margin-right:44px} .aiden-page-mkt .ew-card--banner .ew-shot--mob img, .aiden-page-mkt .ew-card--banner .ew-shot--mob video{max-width:250px} /* ══ PROPORCIÓN DE APPLE ══ Medida sobre apple.com/es/iphone/more/ el 29 ago 2026: nombre 17 px peso 600, MISMO color que el título, 7 px de hueco título 28 px peso 600, interlínea 32 (1,14) y NINGÚN párrafo de cuerpo a la vista: todo lo que explica algo vive detrás del «+». El nombre no es un antetítulo decorativo de los que hemos ido quitando: es el NOMBRE del servicio, y el título de debajo es la promesa. Por eso va del color del título y no en gris pequeño. */ /* En la tarjeta ancha el nombre queda FUERA de .ew-wide-head y el título dentro, así que los márgenes se anulaban entre sí y salían pegados: 0 px donde en las demás hay 7. Se fija el hueco desde el propio nombre. */ .aiden-page-mkt .ew-card--wide .ew-card-nombre{margin-bottom:9px} .aiden-page-mkt .ew-wide-head > h3{margin-top:0} .aiden-page-mkt .ew-card-nombre{ font-family:var(--fd);font-weight:700;font-size:17px;line-height:1.24; letter-spacing:-.01em;color:var(--n950);margin:0 0 7px} /* Peso 700, la negrita de la casa. De Apple se copian los TAMAÑOS y las proporciones, no el peso: en `iphone/more` usan 600, pero en `apple-card` los titulares van en 700, así que ni ellos son coherentes. Manda Aiden. */ .aiden-page-mkt .ew-card h3{font-family:var(--fd);font-weight:700; font-size:clamp(23px,1.95vw,28px);line-height:1.14;letter-spacing:.007em; color:var(--n950);margin:0;max-width:19ch;text-wrap:balance} /* El párrafo ya no vive a la vista: solo dentro del panel del «+». */ /* El estilo del párrafo lo pone ahora el propio componente, para que viaje con él al resto de páginas. */ .aiden-page-mkt .ew-card .atd-detalle p:last-child{margin-bottom:0} .aiden-page-mkt .ew-list{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:11px} .aiden-page-mkt .ew-list li{display:flex;align-items:flex-start;gap:11px; font-size:15px;line-height:1.5;color:var(--n800)} .aiden-page-mkt .ew-tick{flex-shrink:0;width:19px;height:19px;margin-top:1px; border-radius:50%;background:var(--t50);position:relative} .aiden-page-mkt .ew-tick::after{content:"";position:absolute;left:6px;top:5px; width:5px;height:9px;border:solid var(--t600);border-width:0 2px 2px 0; transform:rotate(45deg)} /* ── Huecos de captura ── */ /* El helper aiden_img() imprime width/height/object-fit EN LÍNEA, así que aquí hace falta !important para que un mockup no salga recortado ni deformado. */ .aiden-page-mkt .ew-shot img, .aiden-page-mkt .ew-shot video{height:auto!important;object-fit:contain!important;display:block} /* Las capturas de móvil se recortan con el radio del propio aparato. La de correo viene compuesta sobre el gris de la tarjeta antigua, y ahora que la tarjeta es blanca ese gris asomaba por las cuatro esquinas redondeadas —solo ahí: medido, los márgenes laterales son de 0 y 2 px—. Con el recorte desaparece sin tocar el vídeo. 13,5 % del ancho / 8,2 % del alto = 60 px exactos en un lienzo de 444×734, o sea una esquina circular de verdad a cualquier escala. */ /* SOLO las esquinas de ARRIBA. Redondeando las cuatro, el móvil salía con las esquinas de abajo curvadas flotando dentro de la tarjeta, en vez de cortarse a ras del borde inferior como tiene que hacer. Abajo va recto: ahí no hay esquina que tapar porque la tarjeta ya recorta. */ .aiden-page-mkt .ew-shot--mob img, .aiden-page-mkt .ew-shot--mob video{border-radius:13.5% 13.5% 0 0 / 8.2% 8.2% 0 0} /* Ordenador: se pega al borde derecho y sangra fuera de la tarjeta */ .aiden-page-mkt .ew-shot--pc{margin-top:auto;padding-top:30px;margin-right:-44px; display:flex;justify-content:flex-end;align-items:flex-end;overflow:hidden} .aiden-page-mkt .ew-shot--pc img, .aiden-page-mkt .ew-shot--pc video{width:100%!important;border-radius:16px 0 0 0; box-shadow:0 24px 50px -26px rgba(31,31,31,.4)} /* Móvil: centrado y recortado por abajo */ .aiden-page-mkt .ew-shot--mob{margin-top:auto;padding-top:26px;margin-bottom:-44px; display:flex;justify-content:center;align-items:flex-end;overflow:hidden} .aiden-page-mkt .ew-shot--mob img, .aiden-page-mkt .ew-shot--mob video{width:100%!important;max-width:232px} /* MEDIA ARRIBA: el móvil baja desde el borde SUPERIOR y el texto queda debajo. Invierte los tres márgenes del bloque de abajo: pega la media al borde de arriba (el -44px cancela el padding de la tarjeta), la separa del texto y deja de empujarla hacia el fondo. */ .aiden-page-mkt .ew-shot--mob.ew-shot--top, .aiden-page-mkt .ew-shot--pc.ew-shot--top{margin-top:-44px;margin-bottom:26px; padding-top:0;align-items:flex-start} /* Sin el auto de arriba, el texto es quien empuja: se pega al fondo de la tarjeta */ .aiden-page-mkt .ew-card--mediatop{justify-content:flex-end} /* Placeholders (mientras no haya captura subida) */ .aiden-page-mkt .ew-shot .ph{display:flex;flex-direction:column;align-items:center; justify-content:center;gap:10px;text-align:center;color:var(--n400); background:repeating-linear-gradient(135deg,#FAFAFA,#FAFAFA 11px,#F0F0EE 11px,#F0F0EE 22px); border:1.5px dashed #C9CCD1} .aiden-page-mkt .ew-shot .ph-txt{font-size:12px;font-weight:600;line-height:1.5; color:var(--n500);padding:0 14px} .aiden-page-mkt .ew-shot .ph-ico svg{width:22px;height:22px} .aiden-page-mkt .ew-shot--pc .ph{width:100%;height:240px;border-radius:16px 0 0 0;border-right:0;border-bottom:0} .aiden-page-mkt .ew-shot--mob .ph{width:240px;height:280px;border-radius:24px 24px 0 0;border-bottom:0} /* Tarjeta ancha "Tú no tienes que hacer nada": cabecera + 3 pruebas concretas */ .aiden-page-mkt .ew-card--wide{display:flex;flex-direction:column;gap:34px} .aiden-page-mkt .ew-wide-head{max-width:640px} .aiden-page-mkt .ew-wide-head h3{margin-bottom:12px;max-width:none} .aiden-page-mkt .ew-wide-head p{margin-bottom:0;max-width:600px} .aiden-page-mkt .ew-wide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .aiden-page-mkt .ew-mini{display:flex;flex-direction:column;gap:9px} .aiden-page-mkt .ew-mini-ico{width:40px;height:40px;border-radius:12px;background:#fff; border:0;display:flex;align-items:center;justify-content:center; color:var(--t600);margin-bottom:3px} .aiden-page-mkt .ew-mini-ico svg{width:20px;height:20px} .aiden-page-mkt .ew-mini h4{font-family:var(--fd);font-weight:700;font-size:16.5px; line-height:1.3;letter-spacing:-.01em;color:var(--n950);margin:0} .aiden-page-mkt .ew-mini p{font-size:14.5px;line-height:1.55;color:var(--n600);margin:0;max-width:none} @media(max-width:900px){ .aiden-page-mkt .ew-cards{grid-template-columns:1fr;gap:18px;margin-top:32px} .aiden-page-mkt .ew-card--wide, .aiden-page-mkt .ew-card--banner{grid-column:1;grid-row:auto} .aiden-page-mkt .ew-card--banner{flex-direction:column;gap:0;padding:32px 26px 0} .aiden-page-mkt .ew-banner-body{padding:0} .aiden-page-mkt .ew-card--banner .ew-shot{margin:26px 0 0;align-self:center} .aiden-page-mkt .ew-card--banner .ew-shot--mob{margin-right:0} .aiden-page-mkt .ew-card{padding:32px 26px;border-radius:26px} .aiden-page-mkt .ew-card--grow{min-height:0} .aiden-page-mkt .ew-shot--pc{margin-right:-26px} .aiden-page-mkt .ew-shot--mob{margin-bottom:-32px} .aiden-page-mkt .ew-shot--mob.ew-shot--top, .aiden-page-mkt .ew-shot--pc.ew-shot--top{margin-top:-32px;margin-bottom:22px} .aiden-page-mkt .ew-card--wide{gap:26px} .aiden-page-mkt .ew-wide-grid{grid-template-columns:1fr;gap:22px} } /* ═════════ HERO CENTRADO (1.101.0) ═════════ Título grande, dos botones y la captura del móvil cortada por abajo, al estilo de la portada de Apple Card pero con la paleta de Aiden. */ /* La cabecera ya NO flota: los 120px de `.eweb-hero` existían para librarla y ahora solo dejan un vacío. Se anulan y el título sube junto a la barra. */ .aiden-page-mkt .eweb-hero{padding-top:0; padding-bottom:0} .aiden-page-mkt .eweb-hero-inner--centro{ text-align:center; max-width:none; display:block; padding-top:clamp(26px,4vw,46px); } .aiden-page-mkt .ewh-eyebrow{ display:inline-flex; align-items:center; font-size:13px; font-weight:600; color:var(--t700,#0A5F50); background:rgba(19,150,126,.10); border:1px solid rgba(19,150,126,.20); padding:6px 14px; border-radius:999px; margin-bottom:22px; } .aiden-page-mkt .ewh-h1{ font-family:var(--fd,'Sora',sans-serif); font-weight:800; font-size:clamp(2.4rem,6.4vw,4.5rem); line-height:1.03; letter-spacing:-.042em; color:var(--ink,#13201C); margin:0 0 20px; text-wrap:balance; } .aiden-page-mkt .ewh-h1 em{font-style:normal; color:var(--t600,#0E7A67)} .aiden-page-mkt .ewh-sub{ font-size:clamp(1rem,2.2vw,1.2rem); line-height:1.55; color:var(--muted,#5F706A); max-width:44ch; margin:0 auto 30px; } .aiden-page-mkt .ewh-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:24px} .aiden-page-mkt .ewh-trust{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; font-size:13.5px; color:var(--muted,#5F706A); } .aiden-page-mkt .ewh-trust span{display:inline-flex; align-items:center; gap:7px} .aiden-page-mkt .ewh-trust span::before{ content:''; width:15px; height:15px; flex:none; border-radius:50%; background:rgba(19,150,126,.16); box-shadow:inset 0 0 0 2px var(--t500,#13967E); } /* La caja recorta por abajo: la imagen entra entera y se corta sola. */ .aiden-page-mkt .ewh-shot{ position:relative; width:min(90vw,900px); margin:clamp(34px,6vw,60px) auto 0; height:clamp(230px,40vw,430px); overflow:hidden; } .aiden-page-mkt .ewh-shot img, .aiden-page-mkt .ewh-shot video{ display:block; width:min(74vw,330px); height:auto; margin:0 auto; background:none; /* nada que la web añada por detrás */ } /* Sin degradado de desvanecido: sobre un PNG que ya trae su propia sombra se veía como una mancha. El corte lo da la banda de «Cómo trabajamos», que se monta encima — así el móvil parece salir de su borde y no queda hueco. */ .aiden-page-mkt .ewh-shot{margin-bottom:0; background:none} .aiden-page-mkt .eweb-steps{position:relative; z-index:2} .aiden-page-mkt .ewh-hueco{ width:min(74vw,330px); height:700px; margin:0 auto; border:2px dashed var(--line2,rgba(19,32,28,.16)); border-radius:42px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:110px 24px 0; gap:8px; text-align:center; color:var(--faint,#8B9A94); font-size:14px; line-height:1.5; background:repeating-linear-gradient(45deg,rgba(19,32,28,.02) 0 12px,transparent 12px 24px); } .aiden-page-mkt .ewh-hueco small{font-size:12px; opacity:.85} /* La palabra clave de cada banner, en verde de marca (1.101.3) */ .aiden-page-mkt .ew-card h3 em{font-style:normal; color:var(--t600,#0E7A67)} /* ═════════ El móvil del hero aparece con el scroll ═════════ Entra desde abajo con un punto de escala, no de golpe. La animación la gobierna el scroll (animation-timeline) donde el navegador lo soporta; en los demás se queda el estado final, que es lo correcto: nunca invisible. */ .aiden-page-mkt .ewh-shot img, .aiden-page-mkt .ewh-shot video{ transform-origin:50% 100%; will-change:transform, opacity; } @supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){ .aiden-page-mkt .ewh-shot img, .aiden-page-mkt .ewh-shot video{ animation:ewhEntra linear both; animation-timeline:view(); /* Empieza cuando asoma por abajo y termina cuando ya está encuadrado. */ animation-range:entry 0% cover 34%; } } } @keyframes ewhEntra{ from{opacity:0; transform:translateY(46px) scale(.965)} to {opacity:1; transform:translateY(0) scale(1)} }