.cia26.cia26{box-sizing:border-box;font-family:var(--body);font-size:17px;line-height:1.7;color:var(--tinta);background:var(--blanco);-webkit-font-smoothing:antialiased} .cia26.cia26{--navy:#0F415C; --navy-deep:#072A3D; --navy-night:#04121C; --rosa:#C1145C; --rosa-deep:#5E0A2D; --agua:#57B6B4; --agua-suave:#E9F5F4; --azul-claro:#DFF1F6; --blanco:#FFFFFF; --tinta:#1A2A33; --gris:#5C7080; --gris-suave:#F6F9FA; --linea:#D8E0E6; --display:'Plein','Arial Black','Helvetica Neue',sans-serif; --body:'Nunito','Open Sans',system-ui,sans-serif; --h1:46px; --h2:33px; --h3:22px; --cuerpo:17px; --legal:11.5px; --ancho:1400px; --ancho-texto:840px; --radio:14px;} .cia26.cia26 *{box-sizing:border-box} .cia26.cia26{scroll-behavior:smooth} .cia26.cia26{margin:0;background:var(--blanco);color:var(--tinta); font-family:var(--body);font-size:var(--cuerpo);line-height:1.7;-webkit-font-smoothing:antialiased} /* El tema declara h1..h4{color} y a{font-size;line-height;...} con selectores de un solo elemento. Su especificidad es mínima, pero cualquier declaración directa gana a la herencia, así que aquí se restaura lo que el prototipo obtenía heredando. */ .cia26.cia26 h1, .cia26.cia26 h2, .cia26.cia26 h3, .cia26.cia26 h4{font-family:var(--display);font-weight:700;margin:0;color:inherit} .cia26.cia26 h1{font-size:clamp(2rem,4vw,var(--h1));line-height:1.1;letter-spacing:-.01em} .cia26.cia26 h2{font-size:clamp(1.6rem,3.2vw,var(--h2));line-height:1.15;letter-spacing:-.01em;color:var(--navy)} /* Un H2 mide lo mismo en toda la página: no hay excepciones por titular. Nota: a 33 px, «Gobernanza y Cumplimiento Normativo de la Inteligencia Artificial en tu empresa» necesita ~1230 px y la columna mide 1140, así que ese entra en dos líneas. */ .cia26.cia26 h3{font-size:var(--h3);line-height:1.2;letter-spacing:.04em;color:var(--navy)} .cia26.cia26 h4, .cia26.cia26 .plazo h3, .cia26.cia26 .crono__c h3{font-size:17px;line-height:1.3;letter-spacing:-.01em;color:var(--navy)} /* 8-sep-2026: las fichas de plazos y cronograma pasaron de h4 a h3 (orden de encabezados) y conservan el estilo */ .cia26.cia26 p{margin:0} .cia26.cia26 a{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;text-decoration:underline} .cia26.cia26 a.btn{line-height:1.7} .cia26.cia26 .env{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto} .cia26.cia26 .seccion{padding-block:clamp(3.4rem,6vw,5rem) clamp(3.8rem,6.6vw,5.6rem)} .cia26.cia26 .suave{background:var(--gris-suave)} .cia26.cia26 .eyebrow{font-family:var(--body);font-weight:800;font-size:18px;letter-spacing:.14em; text-transform:uppercase;color:var(--rosa);margin:0 0 .9rem} .cia26.cia26 .eyebrow--agua{color:var(--agua)} .cia26.cia26 .lead{font-size:var(--cuerpo);color:var(--gris);margin-top:1rem} .cia26.cia26 .oscura .lead{color:#B4C8D4} .cia26.cia26 .oscura h2, .cia26.cia26 .oscura h3, .cia26.cia26 .oscura h4{color:var(--blanco)} .cia26.cia26 :focus-visible{outline:3px solid var(--rosa);outline-offset:3px} .cia26.cia26 .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97); backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)} @media(max-width:900px){.cia26.cia26 .menu{display:none}} .cia26.cia26 .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-weight:800;font-size:15px;padding:.85rem 1.7rem;border:2px solid transparent; border-radius:999px;text-decoration:none;cursor:pointer; transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease} .cia26.cia26 .btn:hover{transform:translateY(-2px)} .cia26.cia26 .btn:active{transform:translateY(1px)} .cia26.cia26 .btn--rosa{background:var(--rosa);color:var(--blanco);box-shadow:0 8px 20px rgba(193,20,92,.22)} .cia26.cia26 .btn--rosa:hover{background:var(--rosa-deep)} .cia26.cia26 .btn--verde{background:#57B6B4;color:#04121C} .cia26.cia26 .btn--verde:hover{background:#48A2A0;color:#04121C} .cia26.cia26 .btn--linea{border-color:var(--navy);color:var(--navy)} .cia26.cia26 .btn--linea:hover{background:var(--navy);color:var(--blanco)} .cia26.cia26 .hero .btn--linea, .cia26.cia26 .oscura .btn--linea{border-color:var(--blanco);color:var(--blanco)} .cia26.cia26 .hero .btn--linea:hover, .cia26.cia26 .oscura .btn--linea:hover{background:var(--blanco);color:var(--navy)} .cia26.cia26 .btn--ancho{width:100%} /* El bloque del menú del sitio flota sobre el hero de cada página con un margin-bottom negativo (-152px, y -90px por debajo de 1024px, definido en el CSS de Gutenverse para .guten-u2OfSN). El hero reserva ese mismo espacio arriba para que el menú no lo pise. Si estos dos valores cambian en el bloque del menú, hay que cambiarlos también aquí. */ .cia26.cia26{--menu-solape:152px} @media only screen and (max-width:1024px){.cia26.cia26{--menu-solape:90px}} /* La foto va como capa de fondo, debajo de los dos degradados, que pasan a ser semitransparentes para que se intuya la textura sin competir con el texto. Es la misma imagen que usaba el hero de la /compliance-ia/ anterior, pero volteada: en el original la mujer está a la derecha y con `cover` su cara caía siempre entre 960 y 1175 px, es decir, detrás de la tarjeta del formulario (760-1290 px). Espejada, queda del lado del texto y además mira hacia el formulario. El fichero volteado viaja con el mu-plugin. (2-sept-26: el volteo REAL llegó hoy — el fichero servido hasta ahora era el original sin espejar y la cara quedaba oculta tras la tarjeta, justo lo que este comentario decía evitar. De paso, degradados ~0.08-0.10 más opacos por pedido de Javier, y ?v=2 en las fotos para saltar la caché de estáticos. Solo afecta a /compliance-ia/: la landing redefine su background completo.) */ .cia26.cia26 .hero{color:var(--blanco); padding-block:calc(clamp(2.4rem,4.5vw,3.8rem) + var(--menu-solape,152px)) clamp(2.4rem,4.5vw,3.8rem); background:linear-gradient(96deg,rgba(4,18,28,.66) 0%,rgba(7,42,61,.82) 45%,rgba(15,65,92,.80) 100%), radial-gradient(78% 120% at 80% 28%,rgba(30,110,140,.85) 0%,rgba(11,46,66,.86) 55%,rgba(4,18,28,.78) 100%), url("hero.webp?v=2") right center/cover no-repeat, #04121C} .cia26.cia26 .hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4vw,3.6rem);align-items:center} @media(max-width:960px){.cia26.cia26 .hero__grid{grid-template-columns:1fr;gap:2.2rem}} .cia26.cia26 .hero .eyebrow{display:flex;align-items:center;gap:.8rem;color:var(--blanco);opacity:.9} .cia26.cia26 .hero .eyebrow::before{content:"";width:30px;height:2px;background:var(--blanco);flex:none} .cia26.cia26 .hero h1 em{color:var(--agua);font-style:italic} .cia26.cia26 .hero__sub{margin-top:1.1rem;color:#C7DAE3} .cia26.cia26 .hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem} .cia26.cia26 .hero__sellos{display:flex;gap:1.5rem;margin-top:1.9rem;flex-wrap:wrap; font-weight:800;font-size:14px;opacity:.95} .cia26.cia26 .miga{font-size:12px;color:#8FA9B8} .cia26.cia26 .miga a{text-decoration:none} .cia26.cia26 .miga a:hover{color:var(--agua)} .cia26.cia26 .miga--top{margin-bottom:1rem} .cia26.cia26 .miga--top span{color:var(--agua)} .cia26.cia26 .tarjeta{background:var(--blanco);color:var(--tinta);border-radius:18px; padding:clamp(1.4rem,2.4vw,2rem);box-shadow:0 24px 60px rgba(4,18,28,.35)} .cia26.cia26 .tarjeta h2{font-family:var(--body);font-weight:800;font-size:22px;color:var(--navy);line-height:1.3} .cia26.cia26 .tarjeta__sub{font-size:14px;color:var(--gris);margin-top:.3rem;line-height:1.5} .cia26.cia26 .tarjeta form{margin-top:1.2rem;margin-bottom:1em} .cia26.cia26 .campos{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} @media(max-width:560px){.cia26.cia26 .campos{grid-template-columns:1fr}} .cia26.cia26 .campo{display:flex;flex-direction:column} .cia26.cia26 .campo--full{grid-column:1/-1} .cia26.cia26 input, .cia26.cia26 select, .cia26.cia26 textarea{font-family:var(--body);font-size:16px;padding:.78rem .85rem; background:#F1F5F8;border:1px solid #E3EAEF;border-radius:9px;color:var(--tinta);width:100%} .cia26.cia26 input::placeholder, .cia26.cia26 textarea::placeholder{color:#8496A3} .cia26.cia26 select:invalid{color:#8496A3} .cia26.cia26 input:focus, .cia26.cia26 select:focus, .cia26.cia26 textarea:focus{border-color:var(--rosa);background:var(--blanco)} .cia26.cia26 textarea{resize:vertical;min-height:74px} .cia26.cia26 .check{display:grid;grid-template-columns:auto 1fr;gap:.55rem;align-items:start; font-size:14px;color:var(--gris);line-height:1.5} .cia26.cia26 .check input{width:16px;height:16px;margin-top:.2rem;accent-color:var(--rosa)} .cia26.cia26 .check a{color:var(--navy);font-weight:700} /* Ajustes solo para táctil, sin tocar el diseño de escritorio (QA móvil 23-ago-26): 1) Safari iOS hace zoom automático al enfocar un campo de menos de 16px, y descoloca la página entera en mitad del formulario que trae los leads. 16px lo evita. 2) La casilla del RGPD se marca tocando su etiqueta, pero el área medía 22px de alto; 44px es el mínimo cómodo para el dedo y es la casilla obligatoria. 3) Las referencias de las tarjetas de «Qué te llevas» quedaban en 9,6px, ilegibles. */ @media(max-width:1024px){ .cia26.cia26 input, .cia26.cia26 select, .cia26.cia26 textarea{font-size:16px} .cia26.cia26 .check{min-height:44px;align-items:center} .cia26.cia26 .check input{width:22px;height:22px;margin-top:0} } .cia26.cia26 .legal{font-size:var(--legal);color:var(--gris);line-height:1.45} .cia26.cia26 .legal b{color:var(--navy)} .cia26.cia26 .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap;border:0} .cia26.cia26 .intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,3.6vw,3.2rem);margin-top:1.8rem} @media(max-width:860px){.cia26.cia26 .intro{grid-template-columns:1fr}} .cia26.cia26 .intro p+p{margin-top:1rem} .cia26.cia26 .intro .dest{color:var(--rosa);font-weight:700} .cia26.cia26 .cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:2.6rem; padding-top:.6rem} @media(max-width:860px){.cia26.cia26 .cifras{grid-template-columns:repeat(2,1fr);gap:22px}} @media(max-width:480px){.cia26.cia26 .cifras{grid-template-columns:1fr}} .cia26.cia26 .cifra{display:flex;flex-direction:column;gap:.35rem} .cia26.cia26 .cifra b{font-family:var(--display);font-weight:700;font-size:2.2rem;color:var(--navy); line-height:1;font-variant-numeric:tabular-nums} .cia26.cia26 .cifra span{font-size:14px;color:var(--gris);line-height:1.4} .cia26.cia26 .plazos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:2.2rem} .cia26.cia26 .plazo{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio); padding:1.35rem 1.4rem;transition:border-color .2s ease,transform .2s ease} .cia26.cia26 .plazo:hover{transform:translateY(-3px);border-color:#BBCBD5} .cia26.cia26 .plazo--ya{border-color:rgba(193,20,92,.35);background:linear-gradient(180deg,#FFF7FA 0%,var(--blanco) 60%)} .cia26.cia26 .est{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; padding:.26rem .62rem;border-radius:6px;background:var(--blanco);color:var(--navy); border:1px solid rgba(15,65,92,.22);margin-bottom:.85rem} .cia26.cia26 .plazo--ya .est{background:var(--blanco);color:var(--rosa);border-color:rgba(193,20,92,.32)} .cia26.cia26 .plazo h4, .cia26.cia26 .plazo h3{margin-bottom:.4rem} .cia26.cia26 .plazo p{font-size:14px;color:var(--gris);line-height:1.6} .cia26.cia26 .plazo__f{display:block;margin-top:.75rem;font-size:12px;font-weight:800;color:var(--navy); font-variant-numeric:tabular-nums} .cia26.cia26 .servicios{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:2.4rem;align-items:stretch} @media(max-width:940px){.cia26.cia26 .servicios{grid-template-columns:1fr}} .cia26.cia26 .plan{border:1px solid var(--linea);border-radius:var(--radio);padding:2rem 1.85rem; background:var(--blanco);display:flex;flex-direction:column;position:relative} .cia26.cia26 .plan__cab{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem} .cia26.cia26 .plan__meta{text-align:right;flex:none;max-width:44%} .cia26.cia26 .plan__meta b{display:block;font-family:var(--display);font-weight:700;font-size:1.45rem; color:var(--rosa);line-height:1.15;letter-spacing:-.01em} .cia26.cia26 .plan__meta span{display:block;font-size:12px;color:var(--gris);line-height:1.4;margin-top:.15rem} .cia26.cia26 .plan--ancla .plan__meta b{color:var(--agua);font-size:17px} .cia26.cia26 .plan--ancla .plan__meta span{color:#9FB8C6} .cia26.cia26 .plan--ancla{background:linear-gradient(152deg,var(--navy) 0%,var(--navy-night) 100%); color:var(--blanco);border-color:transparent;position:relative;overflow:hidden} .cia26.cia26 .plan--ancla h3, .cia26.cia26 .plan--ancla h4{color:var(--blanco)} .cia26.cia26 .plan__tag{align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:.1em; text-transform:uppercase;padding:.3rem .65rem;border-radius:6px; background:var(--blanco);color:var(--rosa);border:1px solid rgba(193,20,92,.28); margin-bottom:1rem} .cia26.cia26 .plan--ancla .plan__tag{background:transparent;color:var(--agua);border-color:var(--agua)} .cia26.cia26 .plan--ancla .plan__num{font-size:1.4rem;color:var(--agua)} .cia26.cia26 .plan--ancla .plan__u{color:#9FB8C6} .cia26.cia26 .plan__para{margin-top:.95rem;font-size:17px;color:var(--gris);line-height:1.6} .cia26.cia26 .plan__para b{color:var(--navy);font-weight:800} .cia26.cia26 .plan--ancla .plan__para b{color:var(--agua)} .cia26.cia26 .plan--ancla .plan__para{color:#C1D5DF} .cia26.cia26 .plan__lista{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.65rem} .cia26.cia26 .plan__lista li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;font-size:14px; align-items:start;line-height:1.55} .cia26.cia26 .tick{color:var(--rosa);font-weight:800} .cia26.cia26 .plan--ancla .tick{color:var(--agua)} .cia26.cia26 .plan__cta{margin-top:auto;padding-top:1.6rem} .cia26.cia26 .plan__pie{margin-top:.85rem;font-size:12px;color:var(--gris);min-height:3.4rem} .cia26.cia26 .plan--ancla .plan__pie{color:#8FA9B8} .cia26.cia26 .mosaico{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:2.4rem} @media(max-width:1050px){.cia26.cia26 .mosaico{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.cia26.cia26 .mosaico{grid-template-columns:1fr}} .cia26.cia26 .mcard{position:relative;border-radius:20px;overflow:hidden;min-height:269px; display:flex;flex-direction:column;justify-content:flex-end;padding:24px;isolation:isolate; transition:transform .25s ease,box-shadow .25s ease} .cia26.cia26 .mcard:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(4,18,28,.28)} .cia26.cia26 .mcard__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover; transition:transform .45s ease} .cia26.cia26 .mcard:hover .mcard__bg{transform:scale(1.06)} .cia26.cia26 .mcard::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(4,18,28,.50) 0%,rgba(4,18,28,.86) 46%,rgba(4,18,28,.985) 100%)} .cia26.cia26 .mcard__i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22); margin-bottom:auto;font-family:var(--display);font-weight:700;font-size:16px; color:var(--blanco);font-variant-numeric:tabular-nums} .cia26.cia26 .mcard h3{letter-spacing:0;color:var(--blanco);margin-top:1.2rem} .cia26.cia26 .mcard p{font-size:14px;color:rgba(255,255,255,.82);line-height:1.55;margin-top:.5rem} .cia26.cia26 .mcard__ref{display:inline-block;margin-top:.85rem;font-size:12px;font-weight:800; letter-spacing:.05em;text-transform:uppercase;color:var(--navy); background:var(--blanco);border-radius:999px;padding:.15rem .5rem;align-self:flex-start} .cia26.cia26 .opcion{border-top:2px dashed var(--linea);margin-top:3.2rem;padding-top:1.4rem} .cia26.cia26 .opcion:first-of-type{border-top:0;margin-top:2.4rem;padding-top:0} .cia26.cia26 .oscura .opcion{border-color:rgba(255,255,255,.16)} .cia26.cia26 .oscura .opcion__t{color:var(--navy-night);background:var(--agua)} .cia26.cia26 .crono{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:0; margin-top:3.6rem;padding-block:7rem} .cia26.cia26 .crono::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px; transform:translateY(-50%);border-radius:2px;background:rgba(255,255,255,.3)} .cia26.cia26 .crono::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px; transform:translateY(-50%);border-radius:2px;pointer-events:none; background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.35) 35%,#fff 50%, rgba(255,255,255,.35) 65%,transparent 100%); background-size:26% 100%;background-repeat:no-repeat; animation:recorrido 5s linear infinite} @keyframes recorrido{ 0%{background-position:-30% 0;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{background-position:130% 0;opacity:0}} .cia26.cia26 .crono__h{position:relative;padding-inline:.55rem;text-align:center} .cia26.cia26 .crono__p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:15px;height:15px;border-radius:50%;background:var(--navy-night); border:2.5px solid rgba(255,255,255,.85);z-index:2; box-shadow:0 0 0 0 rgba(255,255,255,.25);transition:transform .2s ease,box-shadow .3s ease} .cia26.cia26 .crono__h:last-child .crono__p{border-color:var(--rosa); box-shadow:0 0 0 0 rgba(193,20,92,.35);animation:latido 3.4s ease-in-out infinite} @keyframes latido{ 0%,100%{box-shadow:0 0 0 0 rgba(193,20,92,.45)} 55%{box-shadow:0 0 0 9px rgba(193,20,92,0)}} .cia26.cia26 .crono__h:hover .crono__p{transform:translate(-50%,-50%) scale(1.35)} .cia26.cia26 .crono__p::after{content:"";position:absolute;inset:-3px;border-radius:50%; border:.5px solid rgba(255,255,255,.85);opacity:0;pointer-events:none; animation:onda 5s linear infinite} .cia26.cia26 .crono__h:last-child .crono__p::after{border-color:var(--rosa)} @keyframes onda{ 0%{opacity:0;transform:scale(1)} 3%{opacity:.9;transform:scale(1)} 17%{opacity:0;transform:scale(2.9)} 100%{opacity:0;transform:scale(2.9)}} .cia26.cia26 .crono__h:nth-child(1) .crono__p::after{animation-delay:1.16s} .cia26.cia26 .crono__h:nth-child(2) .crono__p::after{animation-delay:1.61s} .cia26.cia26 .crono__h:nth-child(3) .crono__p::after{animation-delay:2.05s} .cia26.cia26 .crono__h:nth-child(4) .crono__p::after{animation-delay:2.50s} .cia26.cia26 .crono__h:nth-child(5) .crono__p::after{animation-delay:2.95s} .cia26.cia26 .crono__h:nth-child(6) .crono__p::after{animation-delay:3.39s} .cia26.cia26 .crono__h:nth-child(7) .crono__p::after{animation-delay:3.84s} .cia26.cia26 .crono__c{position:absolute;left:50%;transform:translateX(-50%);width:calc(100% - 1.1rem)} .cia26.cia26 .crono__h:nth-child(odd) .crono__c{bottom:calc(50% + 2.1rem)} .cia26.cia26 .crono__h:nth-child(even) .crono__c{top:calc(50% + 2.1rem)} .cia26.cia26 .crono__n{font-family:var(--display);font-weight:700;font-size:16px;color:rgba(255,255,255,.75); letter-spacing:.1em;display:block;margin-bottom:.2rem} .cia26.cia26 .crono__c h4, .cia26.cia26 .crono__c h3{color:var(--blanco);letter-spacing:0} .cia26.cia26 .crono__c p{font-size:14px;color:#A9C2CF;line-height:1.45;margin-top:.25rem} @media(max-width:900px){.cia26.cia26 .crono{grid-template-columns:1fr;padding-block:0;gap:1.1rem}.cia26.cia26 .crono::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto;transform:none; background:rgba(255,255,255,.3)}.cia26.cia26 .crono::after{display:none}.cia26.cia26 .crono__p::after{display:none}.cia26.cia26 .crono__h{text-align:left;padding-left:2.2rem;padding-inline-end:0}.cia26.cia26 .crono__p{left:7px;top:.8rem;transform:translate(-50%,0)}.cia26.cia26 .crono__h:hover .crono__p{transform:translate(-50%,0) scale(1.3)}.cia26.cia26 .crono__c{position:static;transform:none;width:auto}} @media(max-width:900px){.cia26.cia26 .rueda{grid-template-columns:1fr}.cia26.cia26 .rueda__svg{max-width:300px;margin-inline:auto}} .cia26.cia26 .panel{flex:1;min-width:0;position:relative;overflow:hidden;cursor:pointer;text-align:left; border:1px solid rgba(87,182,180,.28);border-radius:16px;background:rgba(87,182,180,.07); padding:1.6rem 1.2rem;display:flex;flex-direction:column;gap:.7rem;color:inherit;font:inherit; transition:flex .45s cubic-bezier(.4,0,.2,1),background .35s ease,border-color .35s ease} .cia26.cia26 .panel:hover{background:rgba(87,182,180,.14)} .cia26.cia26 .panel.abierto{flex:3.4;background:linear-gradient(155deg,rgba(87,182,180,.22) 0%,rgba(4,18,28,.5) 100%); border-color:rgba(87,182,180,.6)} .cia26.cia26 .panel.abierto .panel__t{writing-mode:horizontal-tb;transform:none;font-size:22px;margin-top:auto} .cia26.cia26 .panel.abierto .panel__d{opacity:1;max-height:200px} .cia26.cia26 .panel:focus-visible{outline:3px solid var(--rosa);outline-offset:3px} @media(max-width:900px){.cia26.cia26 .paneles{flex-direction:column;min-height:0}.cia26.cia26 .panel, .cia26.cia26 .panel.abierto{flex:none}.cia26.cia26 .panel__t, .cia26.cia26 .panel.abierto .panel__t{writing-mode:horizontal-tb;transform:none;font-size:1.05rem;margin-top:0}.cia26.cia26 .panel__d{opacity:1;max-height:none}} .cia26.cia26 .pest{display:grid;grid-template-columns:300px 1fr;gap:1.6rem;margin-top:2rem;align-items:start} @media(max-width:860px){.cia26.cia26 .pest{grid-template-columns:1fr}} .cia26.cia26 .pest__nav{display:grid;gap:4px} .cia26.cia26 .pest__b{display:grid;grid-template-columns:34px 1fr;gap:.9rem;align-items:baseline;text-align:left; padding:.85rem 1rem;border:0;border-radius:11px;background:transparent;cursor:pointer; font:inherit;color:#A9C2CF;transition:background .22s ease,color .22s ease} .cia26.cia26 .pest__b b{font-family:var(--display);font-weight:700;font-size:14px;color:#6E93A3; font-variant-numeric:tabular-nums;transition:color .22s ease} .cia26.cia26 .pest__b span{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.25} .cia26.cia26 .pest__b:hover{background:rgba(87,182,180,.1);color:#fff} .cia26.cia26 .pest__b.act{background:rgba(87,182,180,.18);color:#fff} .cia26.cia26 .pest__b.act b{color:var(--agua)} .cia26.cia26 .pest__b:focus-visible{outline:3px solid var(--rosa);outline-offset:2px} .cia26.cia26 .pest__c h4{font-size:1.6rem;color:#fff;letter-spacing:-.01em;line-height:1.2} .cia26.cia26 .pest__c p{font-size:17px;color:#B6CEDA;line-height:1.65;margin-top:.8rem} .cia26.cia26 .pest__c[hidden]{display:none} @media(max-width:1000px){.cia26.cia26 .ico-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.cia26.cia26 .ico-grid{grid-template-columns:1fr}} .cia26.cia26 .ico{border:1px solid rgba(87,182,180,.24);border-radius:16px;padding:1.5rem 1.4rem; background:rgba(87,182,180,.05);display:flex;flex-direction:column;gap:.5rem;position:relative; transition:transform .25s ease,background .25s ease,border-color .25s ease} .cia26.cia26 .ico:hover{transform:translateY(-4px);background:rgba(87,182,180,.12);border-color:rgba(87,182,180,.5)} .cia26.cia26 .ico h4{font-size:17px;color:#fff;letter-spacing:0} .cia26.cia26 .ico p{font-size:14px;color:#A9C2CF;line-height:1.5} @media(max-width:820px){.cia26.cia26 .zigf, .cia26.cia26 .zigf--inv{grid-template-columns:1fr}.cia26.cia26 .zigf--inv .zigf__img{order:0}} .cia26.cia26 .lt{position:relative;margin-top:2.2rem;padding-block:.5rem} .cia26.cia26 .lt::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%); background:linear-gradient(180deg,var(--agua) 0%,var(--rosa) 100%)} @media(max-width:820px){.cia26.cia26 .lt::before{left:7px;transform:none}.cia26.cia26 .lt__i, .cia26.cia26 .lt__i--der{width:100%;margin-left:0;padding-left:2.2rem;padding-right:0}.cia26.cia26 .lt__p, .cia26.cia26 .lt__i--der .lt__p{left:0;right:auto}} @keyframes trazoMetro{to{stroke-dashoffset:0}} .cia26.cia26 .meses{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2rem} @media(max-width:860px){.cia26.cia26 .meses{grid-template-columns:1fr}} .cia26.cia26 .mes{border:1px solid rgba(87,182,180,.26);border-radius:16px;overflow:hidden; background:rgba(87,182,180,.05)} @media(max-width:960px){.cia26.cia26 .rail{grid-template-columns:repeat(2,1fr);padding-top:0;margin-top:2rem}.cia26.cia26 .rail::before{display:none}.cia26.cia26 .rail__c::before, .cia26.cia26 .rail__p{display:none}} @media(max-width:560px){.cia26.cia26 .rail{grid-template-columns:1fr}} @media(max-width:960px){.cia26.cia26 .track__barra, .cia26.cia26 .track__labels{grid-template-columns:repeat(4,1fr)}.cia26.cia26 .track__s::after{display:none}} @media(max-width:560px){.cia26.cia26 .track__barra, .cia26.cia26 .track__labels{grid-template-columns:repeat(2,1fr)}} .cia26.cia26 .auto{background:var(--agua-suave);border-block:1px solid rgba(87,182,180,.5)} .cia26.cia26 .auto__in{display:grid;grid-template-columns:1.25fr auto;gap:2.2rem;align-items:center} @media(max-width:820px){.cia26.cia26 .auto__in{grid-template-columns:1fr;gap:1.6rem}} .cia26.cia26 .auto h2{color:var(--navy)} .cia26.cia26 .auto p{margin-top:.8rem;color:#3F5C68} .cia26.cia26 .auto{background:var(--agua-suave);border-block:1px solid rgba(87,182,180,.45); background-image:radial-gradient(700px 320px at 88% 10%,rgba(87,182,180,.28),transparent 65%)} .cia26.cia26 .auto__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.4rem);align-items:center} @media(max-width:900px){.cia26.cia26 .auto__in{grid-template-columns:1fr;gap:2rem}} .cia26.cia26 .auto__badge{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--rosa);background:var(--blanco); border:1px solid rgba(193,20,92,.3);border-radius:999px; padding:.35rem .85rem;margin-bottom:1rem} .cia26.cia26 .auto h2{color:var(--navy)} .cia26.cia26 .auto p{margin-top:.9rem;color:#3D5966} .cia26.cia26 .auto p b{color:var(--navy)} .cia26.cia26 .auto__cta{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:1.7rem} .cia26.cia26 .auto__nota{font-size:14px;font-weight:700;color:#41707A} .cia26.cia26 .mock{background:#fff;border-radius:18px;border:1px solid rgba(15,65,92,.1); box-shadow:0 22px 50px rgba(5,36,52,.14);padding:1.5rem 1.6rem;transform:rotate(-1.1deg); transition:transform .3s ease} .cia26.cia26 .mock:hover{transform:rotate(0deg)} .cia26.cia26 .mock__top{display:flex;justify-content:space-between;align-items:center; padding-bottom:.9rem;border-bottom:1px solid var(--linea)} .cia26.cia26 .mock__t{font-family:var(--display);font-weight:700;font-size:14px;color:var(--navy)} .cia26.cia26 .mock__f{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:#5f6b76;background:#F1F5F8;border-radius:6px;padding:.22rem .5rem} .cia26.cia26 .mock__tit{display:flex;align-items:center;gap:1rem;padding:1.2rem 0} .cia26.cia26 .mock__tit b{font-family:var(--display);font-weight:700;font-size:3.2rem;color:var(--rosa);line-height:1} .cia26.cia26 .mock__tit span{font-size:14px;color:var(--gris);line-height:1.4} .cia26.cia26 .mock__filas{display:grid;gap:.55rem} .cia26.cia26 .mock__fila{display:flex;justify-content:space-between;align-items:center;gap:1rem; font-size:14px;color:var(--navy);background:#F7FAFB;border-radius:9px;padding:.6rem .8rem} .cia26.cia26 .sem{width:11px;height:11px;border-radius:50%;flex:none} .cia26.cia26 .sem--rojo{background:#D64560} .cia26.cia26 .sem--ambar{background:#E6A33C} .cia26.cia26 .sem--verde{background:#57B6B4} .cia26.cia26 .mock__pie{margin-top:1.1rem;font-size:12px;color:#5f6b76;text-align:center} .cia26.cia26 .plan__para{min-height:8.4rem} .cia26.cia26 .plan__lista{min-height:14.6rem;align-content:start} @media(max-width:940px){.cia26.cia26 .plan__para, .cia26.cia26 .plan__lista{min-height:0}} .cia26.cia26 .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:2.2rem;align-items:start} @media(max-width:820px){.cia26.cia26 .faq-grid{grid-template-columns:1fr}} .cia26.cia26 .faq-grid details{background:#fff;border:1px solid #E7ECF0;border-radius:14px; overflow:hidden;transition:border-color .2s} .cia26.cia26 .faq-grid details[open]{border-color:#C8D6E2} .cia26.cia26 .faq-grid summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between; align-items:flex-start;gap:16px;padding:20px 22px;margin:0} .cia26.cia26 .faq-grid summary::-webkit-details-marker{display:none} .cia26.cia26 .faq-grid .faq-q{font-weight:700;font-size:17px;color:#052434;line-height:1.4;transition:color .2s} .cia26.cia26 .faq-grid details[open] .faq-q{color:var(--rosa)} .cia26.cia26 .faq-grid .faq-icon{flex-shrink:0;width:22px;height:22px;color:#052434;margin-top:1px; transition:transform .25s,color .2s} .cia26.cia26 .faq-grid details[open] .faq-icon{transform:rotate(-45deg);color:var(--rosa)} .cia26.cia26 .faq-grid .faq-body{padding:0 22px 20px;font-size:14px;color:#505B6F;line-height:1.65} .cia26.cia26 .faq-grid .faq-body p{margin:0} .cia26.cia26 .chip{display:inline-block;background:var(--blanco);color:var(--navy); border:1px solid rgba(15,65,92,.2);font-size:12px; font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.32rem .8rem; border-radius:6px;margin-bottom:.9rem} .cia26.cia26 .testis{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.2rem;margin-top:2.2rem} .cia26.cia26 .testi{background:var(--blanco);border:1px solid #E7ECF0;border-radius:14px; padding:26px 24px;position:relative;transition:border-color .2s ease,box-shadow .2s ease} .cia26.cia26 .testi:hover{border-color:#C8D6E2;box-shadow:0 10px 28px rgba(5,36,52,.07)} .cia26.cia26 .testi__cab{font-weight:800;font-size:15px;color:#052434;line-height:1.3} .cia26.cia26 .testi__cab span{display:block;font-weight:400;font-size:13px;color:#505B6F;margin-top:.15rem} .cia26.cia26 .testi__p{display:flex;align-items:center;gap:.9rem;padding-bottom:1rem; border-bottom:1px solid var(--linea)} .cia26.cia26 .testi__av{width:52px;height:52px;border-radius:50%;flex:none;display:block} .cia26.cia26 .testi>p{font-size:14px;color:#505B6F;line-height:1.65;margin-top:1rem} /* La sección de cierre y el pie del sitio son los dos azules y quedaban pegados. En vez de fundir uno con otro, se separan con una franja en blanco: el margen inferior deja ver el fondo del contenedor, así el bloque del formulario se lee como una pieza aparte y el pie arranca limpio. */ .cia26.cia26 .cierre{color:var(--blanco);margin-bottom:76px; background:linear-gradient(150deg,var(--navy) 0%,var(--navy-night) 100%)} @media(max-width:1024px){.cia26.cia26 .cierre{margin-bottom:52px}} .cia26.cia26 .cierre__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.6rem);align-items:center} @media(max-width:900px){.cia26.cia26 .cierre__in{grid-template-columns:1fr;gap:2rem}} .cia26.cia26 .cierre__in>div:not(.tarjeta) h2{color:var(--blanco)} .cia26.cia26 .cierre .tarjeta h2{color:var(--navy)} .cia26.cia26 .cierre__in>div:not(.tarjeta) p{margin-top:.8rem;color:#B4C8D4} .cia26.cia26 .ruta4{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:2px;counter-reset:r} .cia26.cia26 .ruta4 li{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto; gap:.1rem 1rem;padding:.85rem 1rem;border-radius:12px;position:relative; transition:background .22s ease} .cia26.cia26 .ruta4 li:hover{background:rgba(87,182,180,.09)} .cia26.cia26 .ruta4 li::after{content:"";position:absolute;left:calc(1rem + 21px); top:calc(.85rem + 44px);height:calc(100% - .85rem - 44px + .85rem + 2px);width:2px; background:rgba(87,182,180,.35)} .cia26.cia26 .ruta4 li:last-child::after{display:none} .cia26.cia26 .ruta4__n{grid-row:1 / span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:rgba(87,182,180,.16);border:1.5px solid rgba(87,182,180,.5);color:var(--agua); font-family:var(--display);font-weight:700;font-size:16px;z-index:1;position:relative} .cia26.cia26 .ruta4 li:last-child .ruta4__n{background:rgba(193,20,92,.2);border-color:rgba(193,20,92,.6);color:#F7A8C6} .cia26.cia26 .ruta4__t{font-family:var(--display);font-weight:700;font-size:17px;color:#fff;line-height:1.3} .cia26.cia26 .ruta4__d{font-size:14px;color:#93AEBC;line-height:1.4} .cia26.cia26 .alcance{font-size:14px;color:var(--gris);line-height:1.6} .cia26.cia26 .pie{background:var(--navy-night);color:#9FB8C6;font-size:14px;padding-block:3rem 1.5rem} @media(max-width:860px){.cia26.cia26 .pie__cols{grid-template-columns:1fr 1fr}} @media(max-width:520px){.cia26.cia26 .pie__cols{grid-template-columns:1fr}} .cia26.cia26 .pie h4{font-family:var(--body);font-size:12px;letter-spacing:.11em;text-transform:uppercase; color:var(--blanco);margin-bottom:.9rem;font-weight:800} .cia26.cia26 .pie ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem} .cia26.cia26 .pie a{text-decoration:none} .cia26.cia26 .pie a:hover{color:var(--agua)} @media (prefers-reduced-motion:reduce){.cia26.cia26{scroll-behavior:auto}.cia26.cia26 *{animation:none!important;transition:none!important}.cia26.cia26 .btn:hover, .cia26.cia26 .testi:hover, .cia26.cia26 .plazo:hover{transform:none}} /* La referencia de las tarjetas de «Qué te llevas» se queda en 9,6px, ilegible en el móvil. Va al final del fichero a propósito: su regla base está más abajo que el bloque táctil de arriba y, con la misma especificidad, ganaba por orden. (QA móvil 23-ago-26) */ @media(max-width:1024px){ .cia26.cia26 .mcard__ref{font-size:12px} /* Los antetítulos de sección ocupaban demasiado en pantalla estrecha; el del hero llegaba a partirse en dos líneas. Más pequeños y con menos tracking. */ .cia26.cia26 .eyebrow{font-size:12px;letter-spacing:.10em} /* Para que el pie del Plan Anual entre en una línea sin bajar de lo legible. */ .cia26.cia26 .plan__pie{font-size:12px} /* En dos columnas, «EMPRESAS CON LA IA YA REPARTIDA» se partía en tres líneas y el precio en dos. Apilados, cada uno dispone del ancho completo de la tarjeta. */ .cia26.cia26 .plan__cab{flex-direction:column;align-items:flex-start;gap:.6rem} .cia26.cia26 .plan__meta{text-align:left;max-width:100%} /* El hero móvil mide 390x1618: con `cover` la foto apaisada se amplía 3,45x y la cara acaba midiendo 552 px en una pantalla de 390, irreconocible. En vez de pelear con background-size y posiciones en %, se usa un recorte vertical propio ya centrado en ella (hero-movil.webp, 400x448), a ancho completo y anclado arriba junto al titular. Se funde hacia abajo con un degradado para que no se vea el borde inferior de la foto; de 700 px para abajo la tapa la tarjeta. */ .cia26.cia26 .hero{ background: linear-gradient(180deg,rgba(4,18,28,0) 0%,rgba(4,18,28,.18) 13%,rgba(4,18,28,.78) 23%,rgba(4,18,28,.97) 28%,#04121C 33%), linear-gradient(96deg,rgba(4,18,28,.70) 0%,rgba(7,42,61,.78) 60%,rgba(15,65,92,.76) 100%), url("hero-movil.webp?v=2") center top/100% auto no-repeat, #04121C;} } /* ───────────────────────────────────────────────────────────────────────────── FORMULARIO REAL DE GUTENVERSE (form 4282, bloque 4283) El marcado lo genera el plugin, así que aquí se le da la apariencia de la maqueta sin tocar su HTML: rejilla de dos columnas, etiquetas ocultas a la vista pero legibles por lector de pantalla, y el botón con el estilo de marca. ───────────────────────────────────────────────────────────────────────────── */ .cia26.cia26 .form-slot{margin-top:1.2rem;margin-bottom:1em} .cia26.cia26 .guten-form-builder{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:0} /* Los campos anchos ocupan la fila entera; el resto se emparejan de dos en dos. */ .cia26.cia26 .guten-form-input-textarea, .cia26.cia26 .guten-form-input-gdpr, .cia26.cia26 .iacta-capa-basica, .cia26.cia26 .guten-submit-wrapper{grid-column:1/-1} @media(max-width:560px){.cia26.cia26 .guten-form-builder{grid-template-columns:1fr}} /* El diseño usa placeholders, así que la etiqueta se oculta a la vista pero sigue existiendo para quien navega con lector de pantalla. Y fuera el «Input Helper», que es texto de relleno del plugin. */ .cia26.cia26 .guten-form-input .label-wrapper{position:absolute;width:1px;height:1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .cia26.cia26 .input-helper{display:none} .cia26.cia26 .validation-error{display:none;font-size:14px;color:var(--rosa);margin-top:.35rem} .cia26.cia26 .guten-form-input.invalid .validation-error{display:block} /* Los inputs heredan el estilo de la maqueta; se neutraliza lo que trae el plugin. */ .cia26.cia26 .guten-form-input .main-wrapper{position:relative} .cia26.cia26 .gutenverse-input{font-family:var(--body);font-size:16px;padding:.78rem .85rem; background:#F1F5F8;border:1px solid #E3EAEF;border-radius:9px;color:var(--tinta);width:100%; line-height:1.45;margin:0} .cia26.cia26 .gutenverse-input:focus{border-color:var(--rosa);background:var(--blanco);outline:none} .cia26.cia26 textarea.gutenverse-input{resize:vertical;min-height:74px} /* Gutenverse inyecta un