.elementor-kit-7{--e-global-color-primary:#0694A2;--e-global-color-secondary:#08222A;--e-global-color-text:#0B2027;--e-global-color-accent:#31CBD1;--e-global-color-avdeep:#04555E;--e-global-color-avwash:#DFF3F4;--e-global-color-avwash2:#EEF9FA;--e-global-color-avsand:#D9EAF1;--e-global-color-avpaper:#F4F8F8;--e-global-color-avwhite:#FFFFFF;--e-global-color-avmuted:#4C666F;--e-global-color-avline:#DCE7E8;--e-global-color-avondark:#E7F3F4;--e-global-typography-primary-font-family:"Familjen Grotesk";--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.14em;--e-global-typography-primary-letter-spacing:-0.6px;--e-global-typography-secondary-font-family:"Familjen Grotesk";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"IBM Plex Sans";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-family:"IBM Plex Mono";--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:2px;background-color:#F4F8F8;color:#0B2027;font-family:"IBM Plex Sans", Sans-serif;font-size:17px;font-weight:400;line-height:1.65em;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:#04555E;}.elementor-kit-7 h1{font-family:"Familjen Grotesk", Sans-serif;font-weight:700;letter-spacing:-1.6px;}.elementor-kit-7 h2{font-family:"Familjen Grotesk", Sans-serif;font-weight:600;letter-spacing:-1px;}.elementor-kit-7 h3{font-family:"Familjen Grotesk", Sans-serif;font-weight:600;}.elementor-kit-7 h4{font-family:"Familjen Grotesk", Sans-serif;font-weight:600;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{font-family:"Familjen Grotesk", Sans-serif;font-weight:600;border-radius:999px 999px 999px 999px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ============================================================ SISTEMA «MAREA» — Alonso Ventura Abogados Hoja global. Se carga desde el kit de Elementor (post 7). Convención: todo lo propio va con prefijo .av- ============================================================ */ /* Degradado exclusivo de botones: el de marca llega a #31CBD1 y el blanco encima solo daría 1,98:1. Este se detiene en #0B7F8A → 4,75:1. */ :root{ /* Color */ --av-ink:#08222A; --av-ink-2:#0E313B; --av-teal:#0694A2; --av-lift:#31CBD1; --av-deep:#04555E; --av-wash:#DFF3F4; --av-wash-2:#EEF9FA; --av-banda:#D9EAF1; /* el azul muy claro de las bandas */ --av-paper:#F4F8F8; --av-paper-2:#FFFFFF; --av-text:#0B2027; --av-muted:#4C666F; --av-line:#DCE7E8; --av-on-dark:#E7F3F4; --av-on-dark-muted:#93B3B9; --av-alert:#B4472F; /* Tipografía */ --av-disp:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif; --av-body:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif; --av-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace; /* Redondez */ --av-btn-solid:#076B76; --av-btn-grad:linear-gradient(100deg,#03444C,#076B76 45%,#0B7F8A); --av-pill:999px; --av-xl:34px; --av-lg:26px; --av-md:18px; --av-sm:12px; /* Sombras */ --av-sh1:0 1px 2px rgba(8,34,42,.05),0 8px 24px -12px rgba(8,34,42,.18); --av-sh2:0 2px 4px rgba(8,34,42,.05),0 18px 44px -18px rgba(8,34,42,.28); --av-shglass:0 8px 32px -8px rgba(8,34,42,.16),0 2px 8px rgba(8,34,42,.05); /* Ritmo */ --av-gutter:clamp(1.15rem,4vw,4rem); --av-wrap:1240px; } /* ------------------------- Base ------------------------- */ body{background:var(--av-paper);color:var(--av-text); font-family:var(--av-body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased} body.elementor-page{overflow-x:hidden} h1,h2,h3,h4,h5,h6, .elementor-widget-heading .elementor-heading-title{ font-family:var(--av-disp);font-weight:600;text-wrap:balance;line-height:1.14;letter-spacing:-.024em} a{color:inherit} :focus-visible{outline:2px solid var(--av-teal);outline-offset:3px;border-radius:var(--av-sm)} img{max-width:100%} /* Contenedores de Elementor: sin desbordes laterales */ /* MARGEN LATERAL EN MÓVIL. El hueco de los lados venía sólo del «max-width» del interior del contenedor (1240 px). Por encima de esa anchura sobra sitio y se ve bien, pero por debajo ese límite no reserva nada: en el móvil el interior ocupa el 100 % y el texto, los botones y las tarjetas quedaban pegados al borde. Se le pone relleno al INTERIOR, no al contenedor, para que los fondos de sección sigan yendo a sangre. Y se sube el «max-width» exactamente lo que mide el relleno, de modo que en escritorio el contenido acabe en el mismo sitio que antes: 1240 px de contenido, centrados igual. Sin saltos ni anchuras nuevas. */ .e-con,.e-con-inner{--container-max-width:var(--av-wrap)} /* MARGEN LATERAL: siempre queda aire, y sólo el que haga falta. El hueco de los lados venía únicamente del «max-width» del interior (1240 px). Por encima de esa anchura sobra sitio, pero por debajo ese límite no reserva nada y en el móvil el texto, los botones y las tarjetas quedaban pegados al borde. La fórmula calcula lo que le falta al margen natural para llegar al gutter: · si la ventana es ancha, sale negativo y el clamp lo deja en 0 → escritorio no cambia ni un píxel; · si es estrecha, va creciendo hasta el gutter, sin escalones al redimensionar. Se mide con «100%» y no con «100vw» a propósito: 100vw incluye la barra de desplazamiento y el diseño no, y esos ~15 px de diferencia dejaban el contenido a 13 px del borde justo en la franja de los 1280. El relleno va en el INTERIOR, no en el contenedor, para que los fondos de sección sigan yendo a sangre. */ .e-con>.e-con-inner{ padding-inline:clamp(0px, (var(--av-wrap) + 2 * var(--av-gutter) - 100%) / 2, var(--av-gutter))} /* Un contenedor dentro de otro no vuelve a separarse: el margen ya lo puso el padre */ .e-con-inner .e-con>.e-con-inner{padding-inline:0} /* Un botón no parte su texto («white-space:nowrap»), y una etiqueta larga —un correo entero, por ejemplo— fijaba un ancho mínimo de 325 px que en el móvil desbordaba su tarjeta. En pantallas estrechas se le deja partir. */ @media(max-width:560px){ .av-btn{white-space:normal;text-align:center;overflow-wrap:anywhere} } /* Y las rejillas dejan encoger a sus hijos. Por defecto («min-width:auto») una columna nunca baja del ancho mínimo de su contenido, y por ahí se colaba el desbordamiento aunque el contenedor sí tuviera su margen correcto. */ .av-contact-grid>*,.av-form-cta>*,.av-benes>*,.av-hero-grid>*{min-width:0} /* --------------------- Piezas comunes --------------------- */ .av-label{font-family:var(--av-mono);font-size:.72rem;font-weight:500;letter-spacing:.18em; text-transform:uppercase;color:var(--av-deep);display:block} .av-label--dark{color:var(--av-lift)} .av-cap{display:inline-block;width:1.15rem;height:5px;border-radius:var(--av-pill); background:var(--av-teal);vertical-align:middle} .av-muted{color:var(--av-muted)} .av-narrow{max-width:70ch} .av-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* El relleno no es simétrico a propósito: la caja de la fuente tiene 15 px de ascendente y 3 de descendente, así que centrarla deja la tinta 1 px baja. Se le devuelve ese píxel sin cambiar la altura del botón. */ .av-btn{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;font-family:var(--av-disp); font-weight:600;font-size:.94rem;padding:calc(.82rem - 1px) 1.55rem calc(.82rem + 1px); text-decoration:none;border:0;cursor:pointer; border-radius:var(--av-pill);background:var(--av-ink);color:var(--av-paper); transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background-position .5s} .av-btn:focus,.av-btn:active{background:var(--av-ink);color:var(--av-paper);border-color:transparent} .av-btn.av-btn--teal:focus,.av-btn.av-btn--teal:active{background:var(--av-btn-solid) var(--av-btn-grad);color:#fff} .av-btn:hover{transform:translateY(-2px);box-shadow:var(--av-sh2);color:var(--av-paper)} .av-btn .ar{transition:transform .28s} .av-btn:hover .ar{transform:translateX(4px)} .av-btn--teal{background:var(--av-btn-solid) var(--av-btn-grad);background-size:210% 100%} .av-btn--teal:hover{background-position:100% 0;color:#022B30} .av-btn--soft{background:var(--av-paper-2);color:var(--av-text);box-shadow:var(--av-sh1)} .av-btn--soft:hover{background:var(--av-wash-2);color:var(--av-text)} .av-btn--ghost{background:rgba(255,255,255,.1);color:var(--av-on-dark);border:1px solid rgba(255,255,255,.2)} .av-btn--ghost:hover{color:var(--av-on-dark)} /* Botón nativo de Elementor con nuestra forma */ .elementor-button{border-radius:var(--av-pill);font-family:var(--av-disp);font-weight:600} /* ==================== CABECERA GLASS ==================== */ .av-nav{position:fixed;top:0;left:0;right:0;z-index:9990;padding:.85rem var(--av-gutter)} .av-bar{max-width:var(--av-wrap);margin:0 auto;display:flex;align-items:center;gap:1.5rem;min-height:62px; padding:.55rem .6rem .55rem 1.4rem;border-radius:var(--av-pill);background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%); border:1px solid rgba(255,255,255,.7);box-shadow:var(--av-shglass);transition:background .35s} .av-nav.is-stuck .av-bar{background:rgba(255,255,255,.85)} /* El widget que envuelve al logotipo va en bloque y con interlineado: el enlace, que es inline-flex, se apoyaba en la línea base y quedaba 4 px alto dentro de la píldora. Con la caja en flex e interlineado cero, el widget mide lo que la imagen y la barra lo centra sin más. */ .av-logo-caja{display:flex;align-items:center;line-height:0} .av-logo{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;white-space:nowrap;flex:none} /* El logotipo es el original del despacho, no una reconstrucción tipográfica: la de antes usaba otra letra y además se comía la palabra «Abogados». */ .av-logo img{display:block;width:auto;height:34px} .av-logo--pie img{height:42px} @media(max-width:1080px){.av-logo img{height:30px}} @media(max-width:400px){.av-logo img{height:26px}} .av-logo b{font-family:var(--av-disp);font-weight:500;font-size:.9rem;letter-spacing:.17em;color:var(--av-text)} .av-menu{display:flex;flex-wrap:nowrap;gap:.15rem;margin-left:auto;list-style:none;padding:0;margin-block:0} .av-menu li{margin:0} .av-menu a{display:block;white-space:nowrap;text-decoration:none;font-size:.92rem;color:var(--av-text); padding:.5rem .8rem;border-radius:var(--av-pill);transition:background .25s,color .25s} .av-menu a:hover,.av-menu .current-menu-item>a{background:rgba(6,148,162,.11);color:var(--av-deep)} .av-burger{display:none;width:42px;height:42px;border-radius:var(--av-pill);border:1px solid var(--av-line); background:var(--av-paper-2);color:var(--av-text); cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:4px} .av-burger:focus,.av-burger:hover,.av-burger:active{background:var(--av-paper-2);color:var(--av-text); border-color:var(--av-line)} .av-burger i{display:block;width:16px;height:2px;border-radius:2px;background:var(--av-text); transition:transform .3s,opacity .2s} .av-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)} .av-burger[aria-expanded="true"] i:nth-child(2){opacity:0} .av-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .av-drawer{display:none;max-width:var(--av-wrap);margin:.6rem auto 0;padding:1rem 1.25rem 1.25rem; border-radius:var(--av-lg);background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.7);box-shadow:var(--av-shglass)} .av-drawer.is-open{display:block} .av-drawer ul{list-style:none;margin:0;padding:0} .av-drawer a{display:block;padding:.8rem .2rem;text-decoration:none;font-family:var(--av-disp); font-size:1.1rem;color:var(--av-text);border-bottom:1px solid var(--av-line)} .av-drawer .av-btn{margin-top:1rem;width:100%;justify-content:center} @media(max-width:1080px){ .av-menu{display:none} .av-bar .av-btn--teal{display:none} /* El «margin-left:auto» tiene que ir en el contenedor de Elementor, que es la celda real de la fila. Puesto en el botón no empujaba nada y quedaba a media barra. */ .av-bar > .elementor-element:last-child{margin-left:auto} /* La barra es una píldora: sin relleno propio, el logo y el botón quedaban a 1 px de su borde curvo. No es distancia a la pantalla, es distancia a la píldora. */ .av-bar{padding-inline:clamp(.8rem,3.5vw,1.25rem)} .av-burger{display:flex} } /* ===================== DECORACIÓN ===================== */ .av-dots{position:absolute;inset:0;z-index:0;pointer-events:none; background-image:radial-gradient(circle,rgba(6,148,162,.18) 1.15px,transparent 1.15px);background-size:26px 26px; -webkit-mask-image:radial-gradient(105% 90% at 78% 20%,#000 18%,transparent 72%); mask-image:radial-gradient(105% 90% at 78% 20%,#000 18%,transparent 72%)} .av-dots--home{-webkit-mask-image:radial-gradient(115% 85% at 62% 42%,#000 25%,transparent 76%); mask-image:radial-gradient(115% 85% at 62% 42%,#000 25%,transparent 76%); background-image:radial-gradient(circle,rgba(6,148,162,.20) 1.15px,transparent 1.15px)} .av-rings{position:absolute;z-index:0;pointer-events:none;right:-6rem;top:-9rem;width:min(30rem,60vw);aspect-ratio:1} .av-rings--home{right:-2rem;top:-4.5rem;bottom:auto;width:min(38rem,54vw)} @media(max-width:960px){.av-rings--home{top:2rem;right:-6rem;width:min(34rem,92vw)}} .av-rings i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(6,148,162,.24)} /* Trayectorias de los electrones: no se ven, sólo llevan el recorrido */ .av-rings s{position:absolute;inset:0;border-radius:50%} .av-rings i:nth-child(2){inset:8%;border-color:rgba(6,148,162,.18)} .av-rings i:nth-child(3){inset:-8%;border-style:dashed;border-color:rgba(6,148,162,.30); animation:av-spin 68s linear infinite} .av-rings b{position:absolute;inset:20%;border-radius:50%;opacity:.16; background:radial-gradient(circle at 34% 28%,var(--av-lift),var(--av-teal) 55%,var(--av-deep))} .av-rings--home b{inset:24%;opacity:.94;overflow:hidden; animation:av-nucleo 9s ease-in-out infinite, av-tinte 19s ease-in-out infinite} /* El núcleo: un barrido cónico que gira despacio y un brillo que respira. Van en dos capas para que el giro y el latido no compitan por la misma propiedad. */ .av-rings--home b::before{content:"";position:absolute;inset:0;border-radius:50%; background: radial-gradient(circle at 72% 28%,rgba(255,255,255,.36),rgba(255,255,255,0) 54%), radial-gradient(circle at 26% 74%,rgba(49,203,209,.55),rgba(49,203,209,0) 58%); animation:av-spin 16s linear infinite;will-change:transform} .av-rings--home b::after{content:"";position:absolute;inset:0;border-radius:50%; background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55),rgba(255,255,255,0) 48%); animation:av-brillo 11s ease-in-out infinite} /* ── La molécula de la portada ── El primer anillo se queda circular: es el que sostiene la silueta. Los otros dos se inclinan y se aplanan como órbitas, cada uno con un electrón que las recorre. */ .av-rings--home{--orbita:rgba(6,148,162,.34); /* Núcleo sólido y halo claro: sobre el fondo casi blanco del hero, un núcleo blanco desaparece y el punto se ve como una rosquilla. */ --av-electron: radial-gradient(circle 4.5px at 50% 50%,var(--av-deep) 0 58%,rgba(4,85,94,0) 100%), radial-gradient(circle 9px at 50% 50%,rgba(6,148,162,.55) 0 52%,rgba(6,148,162,0) 100%), radial-gradient(circle 20px at 50% 50%,rgba(49,203,209,.26),rgba(49,203,209,0) 72%); --av-electron-2: radial-gradient(circle 3.5px at 50% 50%,var(--av-teal) 0 60%,rgba(6,148,162,0) 100%), radial-gradient(circle 7px at 50% 50%,rgba(49,203,209,.5) 0 54%,rgba(49,203,209,0) 100%), radial-gradient(circle 16px at 50% 50%,rgba(49,203,209,.2),rgba(49,203,209,0) 74%)} .av-rings--home i:nth-child(1){inset:-6%;border-color:rgba(6,148,162,.26);animation:none} .av-rings--home i:nth-child(2),.av-rings--home i:nth-child(3){ border:1px solid var(--orbita);transform:rotate(var(--a)) scaleY(.46);animation:none} .av-rings--home i:nth-child(2){inset:-14%;--a:58deg; --t:23s} .av-rings--home i:nth-child(3){inset:-20%;--a:-54deg; --t:31s;border-style:dashed} /* ── Los electrones ── Van en elementos propios (``) y no sobre la capa del aro: así no heredan el `scaleY` que aplasta la elipse y se quedan redondos. `offset-path` los lleva por la misma elipse que dibuja el aro —la mitad del ancho por la mitad del alto multiplicada por el aplastamiento: 50% x .46 = 23%—. */ .av-rings--home s{transform:rotate(var(--a,0deg))} .av-rings--home s:nth-of-type(1){inset:-6%; --p:50%; --t:41s} .av-rings--home s:nth-of-type(2){inset:-14%; --p:23%; --a:58deg; --t:23s} .av-rings--home s:nth-of-type(3){inset:-20%; --p:23%; --a:-54deg; --t:31s} .av-rings--home s::before,.av-rings--home s::after{ content:"";position:absolute;width:22px;height:22px;border-radius:50%; offset-path:ellipse(50% var(--p) at 50% 50%);offset-rotate:0deg;offset-anchor:center; animation:av-orbita var(--t) linear infinite;will-change:offset-distance} .av-rings--home s::before{background:var(--av-electron)} .av-rings--home s::after{background:var(--av-electron-2); animation-direction:reverse;animation-duration:calc(var(--t) * 1.27)} /* Red de seguridad: si el navegador no entiende `offset-path` con formas básicas, los puntos no se pintarían y la molécula quedaría muda. Ahí vuelve el truco de la capa que gira, pero sólo en el aro exterior, que no está aplastado y da puntos redondos. */ @supports not (offset-path: ellipse(50% 23% at 50% 50%)){ .av-rings--home s{display:none} .av-rings--home i:nth-child(1)::before,.av-rings--home i:nth-child(1)::after{ content:"";position:absolute;inset:0;border-radius:50%; background:radial-gradient(circle 9px at 50% 0,var(--av-lift) 50%,rgba(49,203,209,0) 100%); animation:av-spin 41s linear infinite} .av-rings--home i:nth-child(1)::after{animation-duration:29s;animation-direction:reverse; background:radial-gradient(circle 7px at 50% 100%,var(--av-teal) 52%,rgba(6,148,162,0) 100%)} } /* En el móvil el hero se queda sin sitio debajo del texto —sólo 107 px—, así que la molécula va detrás. Colocada para que la esfera caiga sobre el TITULAR, que es texto grande y le basta con 3:1 (saca 7,8), y no sobre la entradilla, que es texto normal y necesita 4,5. Por eso puede ir al 60 % y verse. */ @media(max-width:720px){ .av-rings--home{top:-2.5rem;right:-4rem;width:min(26rem,86vw)} .av-rings--home b{opacity:.6} } @keyframes av-nucleo{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}} @keyframes av-tinte{0%,100%{filter:hue-rotate(0deg) saturate(1)} 50%{filter:hue-rotate(-11deg) saturate(1.14)}} @keyframes av-brillo{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}} @keyframes av-spin{to{transform:rotate(360deg)}} @keyframes av-orbita{to{offset-distance:100%}} /* ==================== HERO DE PORTADA ==================== */ .av-fig{position:relative;width:min(100%,430px);margin-inline:auto;z-index:2} .av-fig>img{width:100%;display:block;filter:drop-shadow(0 26px 44px rgba(8,34,42,.24))} .av-float{position:absolute;display:flex;align-items:center;gap:.65rem;padding:.62rem 1rem .62rem .62rem; border-radius:var(--av-pill);background:rgba(255,255,255,.84); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.9);box-shadow:var(--av-sh2);white-space:nowrap;z-index:3} .av-float u{font-family:var(--av-disp);font-size:.84rem;font-weight:600;display:block;line-height:1.25;text-decoration:none} .av-float s{font-family:var(--av-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase; color:var(--av-muted);text-decoration:none;display:block} .av-float em{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center; background:var(--av-wash);color:var(--av-deep);font-style:normal} .av-float em svg{width:19px;height:19px} .av-f1{left:-2%;top:8%;animation:av-bob 6.5s ease-in-out infinite} .av-f2{right:-14%;top:36%;animation:av-bob 7.8s ease-in-out infinite .8s} .av-f3{left:-10%;bottom:14%;animation:av-bob 8.6s ease-in-out infinite 1.6s} @keyframes av-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}} @media(max-width:1000px){.av-f2{right:-6%}.av-f3{left:-6%}} @media(max-width:560px){.av-float{transform:scale(.86)}.av-f1{left:-6%}.av-f2{right:-8%}.av-f3{left:-8%}} .av-tag{display:inline-flex;align-items:center;gap:.55rem;padding:.42rem .95rem .42rem .55rem; border-radius:var(--av-pill);background:var(--av-paper-2);box-shadow:var(--av-sh1)} .av-tag i{width:8px;height:8px;border-radius:50%;background:var(--av-teal);animation:av-ping 2.4s ease-out infinite} .av-tag span{font-family:var(--av-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--av-deep)} @keyframes av-ping{0%{box-shadow:0 0 0 0 rgba(6,148,162,.5)}70%{box-shadow:0 0 0 9px rgba(6,148,162,0)}100%{box-shadow:0 0 0 0 rgba(6,148,162,0)}} .av-rot{color:var(--av-deep);position:relative;display:inline-block} .av-rot::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.02em;height:.44em; border-radius:var(--av-pill);background:var(--av-teal);opacity:.16;z-index:-1} .av-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem} .av-stat{background:var(--av-paper-2);border-radius:var(--av-lg);padding:1.5rem 1.6rem;box-shadow:var(--av-sh1); transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s} .av-stat:hover{transform:translateY(-4px);box-shadow:var(--av-sh2)} .av-stat b{display:block;font-family:var(--av-disp);font-size:clamp(1.6rem,2.1vw,2.15rem);font-weight:700; letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--av-deep)} .av-stat span{font-family:var(--av-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--av-muted)} @media(max-width:1000px){.av-stats{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.av-stats{grid-template-columns:1fr}} /* ================== TARJETAS E ICONOS ================== */ .av-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1.15rem} .av-card{position:relative;display:flex;flex-direction:column;gap:.9rem;text-decoration:none;color:inherit; background:var(--av-paper-2);border-radius:var(--av-xl);padding:1.9rem 1.75rem 1.7rem; box-shadow:var(--av-sh1);overflow:hidden; transition:transform .34s cubic-bezier(.2,.8,.3,1),box-shadow .34s} .av-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0; background:radial-gradient(85% 70% at 88% -8%,rgba(6,148,162,.13),transparent 62%);transition:opacity .34s} .av-card:hover{transform:translateY(-6px);box-shadow:var(--av-sh2)} .av-card:hover::after{opacity:1} .av-card:hover .av-ico{background:var(--av-teal);color:#fff;transform:rotate(-6deg) scale(1.06)} .av-card h2,.av-card h3{font-size:1.12rem;margin:0} .av-card p{margin:0;font-size:.95rem;color:var(--av-muted);line-height:1.65} .av-card--dark{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14); color:var(--av-on-dark);box-shadow:none} .av-card--dark h2,.av-card--dark h3{color:var(--av-on-dark)} .av-card--dark p{color:var(--av-on-dark-muted)} .av-card--dark:hover{background:rgba(255,255,255,.11)} .av-go{margin-top:auto;padding-top:.5rem;font-family:var(--av-mono);font-size:.66rem;letter-spacing:.15em; text-transform:uppercase;color:var(--av-deep);display:inline-flex;align-items:center;gap:.45rem} .av-go .ar{transition:transform .3s} .av-card:hover .av-go .ar{transform:translateX(5px)} .av-ico{width:56px;height:56px;flex:none;border-radius:var(--av-md);display:grid;place-items:center; background:var(--av-wash);color:var(--av-deep); transition:background .34s,transform .34s cubic-bezier(.2,.8,.3,1)} .av-ico svg{width:27px;height:27px;overflow:visible} .av-ico--sm{width:44px;height:44px;border-radius:14px} .av-ico--sm svg{width:21px;height:21px} .av-ico--dark{background:rgba(49,203,209,.16);color:var(--av-lift)} /* Animaciones de la iconografía */ .av-draw{stroke-dasharray:34;stroke-dashoffset:34;animation:av-draw 3.6s ease-in-out infinite} @keyframes av-draw{0%{stroke-dashoffset:34}45%,72%{stroke-dashoffset:0}100%{stroke-dashoffset:-34}} .av-pulse{transform-origin:center;animation:av-pulse 2.8s ease-in-out infinite} @keyframes av-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.55}} .av-b1,.av-b2,.av-b3{animation:av-bounce 1.5s ease-in-out infinite} .av-b2{animation-delay:.18s} .av-b3{animation-delay:.36s} @keyframes av-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} .av-g1,.av-g2,.av-g3{transform-origin:bottom;animation:av-grow 2.6s ease-in-out infinite} .av-g2{animation-delay:.22s} .av-g3{animation-delay:.44s} @keyframes av-grow{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}} .av-link{stroke-dasharray:12;stroke-dashoffset:12;animation:av-link 2.8s ease-in-out infinite} @keyframes av-link{0%,15%{stroke-dashoffset:12}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:12}} .av-scan{animation:av-scan 3.4s ease-in-out infinite} @keyframes av-scan{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-3px)}} .av-rot-slow{transform-origin:center;animation:av-spin 9s linear infinite} .av-wave{transform-origin:left center;animation:av-wave 2.4s ease-out infinite} .av-wave2{transform-origin:left center;animation:av-wave 2.4s ease-out infinite .5s} @keyframes av-wave{0%{transform:scale(.55);opacity:0}30%{opacity:.9}100%{transform:scale(1.18);opacity:0}} /* ====================== MARQUESINA ====================== */ .av-marq{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .av-marq-track{display:flex;gap:.9rem;width:max-content;animation:av-slide 46s linear infinite} .av-marq-track span{font-family:var(--av-disp);font-weight:500;font-size:.94rem;letter-spacing:.06em; color:var(--av-muted);white-space:nowrap;background:var(--av-paper-2);padding:.62rem 1.3rem; border-radius:var(--av-pill);box-shadow:var(--av-sh1)} @keyframes av-slide{to{transform:translateX(-50%)}} /* ======================= MIGAS ======================= */ .av-crumbs{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;font-family:var(--av-mono);font-size:.7rem; letter-spacing:.1em;text-transform:uppercase;color:var(--av-muted);list-style:none;padding:0;margin:0 0 1.4rem} .av-crumbs a{text-decoration:none} .av-crumbs a:hover{color:var(--av-deep)} .av-crumbs li{display:flex;align-items:center} .av-crumbs li+li::before{content:"/";margin-right:.45rem;color:var(--av-line)} /* ======================= BANDA CTA ======================= */ .av-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2rem; background:var(--av-ink) linear-gradient(120deg,var(--av-ink),var(--av-deep));border-radius:var(--av-xl); padding:clamp(1.75rem,4vw,2.75rem);color:var(--av-on-dark)} .av-cta h2{font-size:1.6rem;color:var(--av-on-dark);margin:0 0 .5rem} .av-cta p{color:var(--av-on-dark-muted);font-size:.95rem;max-width:46ch;margin:0} .av-cta .acts{margin-left:auto;display:flex;gap:.75rem;flex-wrap:wrap} @media(max-width:620px){.av-cta .acts{margin-left:0}} /* ================== ÍNDICE PEGAJOSO ================== */ .av-toc{position:sticky;top:7rem} .av-toc .tl{font-family:var(--av-mono);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase; color:var(--av-muted);margin:0 0 1rem} .av-toc ol{list-style:none;margin:0;padding:0;counter-reset:avt;display:flex;flex-direction:column;gap:.1rem} .av-toc a{display:flex;gap:.7rem;text-decoration:none;font-size:.89rem;padding:.48rem .75rem; border-radius:var(--av-pill);color:var(--av-muted);transition:background .25s,color .25s;line-height:1.4} .av-toc a::before{counter-increment:avt;content:counter(avt,decimal-leading-zero); font-family:var(--av-mono);font-size:.68rem;color:var(--av-teal);padding-top:.15rem} .av-toc a:hover,.av-toc a.is-on{background:var(--av-wash-2);color:var(--av-deep)} @media(max-width:960px){.av-toc{position:static;display:none}} /* ==================== FORMULARIOS ==================== */ .av-field{display:flex;flex-direction:column;gap:.4rem} .av-field label{font-family:var(--av-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--av-muted)} .av-field input,.av-field select,.av-field textarea{font:inherit;font-size:.97rem;color:var(--av-text); background:var(--av-paper);border:1px solid var(--av-line);border-radius:var(--av-md); padding:.8rem 1.05rem;width:100%;transition:border-color .25s,background .25s} .av-field textarea{border-radius:var(--av-lg);resize:vertical;min-height:130px} .av-field input:focus,.av-field select:focus,.av-field textarea:focus{ outline:none;border-color:var(--av-teal);background:var(--av-paper-2)} .av-formcard{background:var(--av-paper-2);border-radius:var(--av-xl); padding:clamp(1.6rem,3.5vw,2.5rem);box-shadow:var(--av-sh1)} /* ==================== ACORDEÓN FAQ ==================== */ .av-faq{background:var(--av-paper-2);border-radius:var(--av-lg);box-shadow:var(--av-sh1);overflow:hidden} .av-faq+.av-faq{margin-top:.75rem} .av-faq summary{list-style:none;cursor:pointer;display:flex;gap:1rem;align-items:flex-start; padding:1.3rem 1.5rem;font-family:var(--av-disp);font-weight:600;font-size:1.02rem;line-height:1.4} .av-faq summary::-webkit-details-marker{display:none} .av-faq summary h2,.av-faq summary h3{font:inherit;letter-spacing:inherit;margin:0;color:inherit} .av-faq summary::after{content:"";flex:none;margin-left:auto;width:26px;height:26px;border-radius:50%; background:var(--av-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304555E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat; transition:transform .3s cubic-bezier(.2,.8,.3,1),background-color .3s} .av-faq[open] summary::after{transform:rotate(135deg);background-color:var(--av-teal)} .av-faq summary:hover{color:var(--av-deep)} .av-faq .a{padding:0 1.5rem 1.45rem;color:var(--av-muted);font-size:.98rem;max-width:66ch} .av-faq .a p+p{margin-top:.8rem} .av-faq .a ul{margin:.8rem 0 0;padding-left:1.15rem} .av-faq .a strong{color:var(--av-text)} /* ==================== ARTÍCULO ==================== */ .av-article{max-width:68ch;font-size:1.08rem} .av-article h2{font-size:1.5rem;margin:2.5rem 0 .9rem;scroll-margin-top:7rem} .av-article h2:first-child{margin-top:0} .av-article h3{font-size:1.2rem;margin:2rem 0 .7rem;scroll-margin-top:7rem} .av-article p{margin-bottom:1.05rem;color:#20363E} .av-article ul,.av-article ol{margin:0 0 1.15rem;padding-left:1.35rem;color:#20363E} .av-article li{margin-bottom:.4rem} .av-article li::marker{color:var(--av-teal)} .av-article strong{color:var(--av-text);font-weight:600} .av-article img{border-radius:var(--av-lg)} .av-article a{color:var(--av-deep);text-decoration:underline;text-underline-offset:3px} .av-pull{background:var(--av-wash-2);border-radius:var(--av-lg);padding:1.3rem 1.5rem;margin:1.6rem 0; border-left:3px solid var(--av-teal);font-size:1rem} .av-progress{position:fixed;top:0;left:0;height:3px;z-index:9995;width:0; background:var(--av-teal) linear-gradient(90deg,var(--av-teal),var(--av-lift));border-radius:0 var(--av-pill) var(--av-pill) 0} /* ====================== TEXTO LEGAL ====================== */ .av-legal{max-width:70ch;font-size:1rem} .av-legal h2{font-size:1.3rem;margin:2.5rem 0 .9rem;scroll-margin-top:7rem} .av-legal h2:first-child{margin-top:0} .av-legal h3{font-size:1.05rem;margin:1.75rem 0 .6rem;color:var(--av-deep)} .av-legal p{margin-bottom:.95rem;color:#20363E} .av-legal ul{margin:0 0 1.05rem;padding-left:1.3rem;color:#20363E} .av-legal li{margin-bottom:.4rem} .av-legal li::marker{color:var(--av-teal)} .av-legal a{color:var(--av-deep)} .av-datos{background:var(--av-paper-2);border-radius:var(--av-xl);padding:1.6rem 1.75rem; box-shadow:var(--av-sh1);margin-bottom:2rem} .av-datos dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.5rem;font-size:.94rem} .av-datos dt{font-family:var(--av-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; color:var(--av-muted);padding-top:.22rem} .av-datos dd{margin:0;color:var(--av-text)} @media(max-width:620px){.av-datos dl{grid-template-columns:1fr;gap:.15rem 0}.av-datos dt{padding-top:.5rem}} .av-upd{font-family:var(--av-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase; color:var(--av-muted);background:var(--av-wash-2);border-radius:var(--av-pill); padding:.5rem 1rem;display:inline-block;margin-bottom:1.75rem} /* ======================= PIE ======================= */ .av-foot{background:var(--av-ink);color:var(--av-on-dark-muted); border-radius:var(--av-xl) var(--av-xl) 0 0;padding:clamp(3rem,6vw,4.5rem) 0 0} .av-foot .wrapf{max-width:var(--av-wrap);margin-inline:auto;padding-inline:var(--av-gutter)} .av-foot h2{font-size:clamp(1.8rem,4.5vw,3rem);color:var(--av-on-dark);letter-spacing:-.035em;margin:0} .av-foot h2 em{font-style:normal;color:var(--av-lift)} .av-foot-top{padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1)} .av-foot-cols{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:2.5rem;padding-block:2.5rem} .av-foot-cols h3{font-family:var(--av-mono);font-size:.66rem;letter-spacing:.17em;text-transform:uppercase; color:var(--av-lift);font-weight:500;margin:0 0 1rem} .av-foot-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem} .av-foot-cols a{text-decoration:none;font-size:.92rem;color:var(--av-on-dark-muted)} .av-foot-cols a:hover{color:var(--av-lift)} /* «Concertar cita» es un