/* ---------- 1. ondas: entrada entrelazada, y se detienen ----------
   Cada linea llega por su costado —alternado, de ahi el entrelazado— trazandose
   con stroke-dashoffset mientras el grupo la desplaza medio periodo. El trazo
   que avanza y la onda que fluye son dos animaciones distintas sobre el mismo
   tiempo: juntas se leen como una sola linea que ondula al entrar. La curva
   tiene periodo exacto, asi que el desplazamiento no deforma nada y el reposo
   coincide con la posicion final. */
html.wha-js .wha-tex svg .wha-w{transform:translateX(var(--x0));opacity:0}
html.wha-js .wha-tex svg .wha-w polyline{stroke-dasharray:var(--len);stroke-dashoffset:var(--off)}
html.wha-js .wha-tex.wha-on svg .wha-w{animation:whaOndaEntra var(--in) cubic-bezier(.16,.84,.3,1) var(--del) both;will-change:transform}
html.wha-js .wha-tex.wha-on svg .wha-w polyline{animation:whaOndaTraza var(--in) cubic-bezier(.16,.84,.3,1) var(--del) both}
@keyframes whaOndaEntra{from{transform:translateX(var(--x0));opacity:0}18%{opacity:1}to{transform:translateX(0);opacity:1}}
@keyframes whaOndaTraza{from{stroke-dashoffset:var(--off)}to{stroke-dashoffset:0}}
/* Reposo: un grupo interior toma el relevo cuando la entrada termina —de ahi la
   espera igual a retardo mas duracion— y deriva un periodo completo, entre tres
   y cinco minutos por vuelta, con sentido alternado por linea. Al cerrar el
   ciclo la curva coincide consigo misma, asi que el bucle no salta; el punto
   medio lleva un desvio vertical de pocos pixeles que vuelve a cero al final,
   para que el movimiento se lea como agua y no como un desplazamiento lateral.
   Va en un grupo aparte porque la entrada ya ocupa el transform del exterior. */
html.wha-js .wha-tex.wha-on svg .wha-w-in{animation:whaCalma var(--calma) linear calc(var(--del) + var(--in)) infinite}
html.wha-js .wha-tex.wha-on svg .wha-w-b{animation:whaBoga var(--bt) ease-in-out calc(var(--del) + var(--in)) infinite alternate}
@keyframes whaCalma{from{transform:translateX(0)}to{transform:translateX(var(--sx))}}
@keyframes whaBoga{from{transform:translateY(0)}to{transform:translateY(var(--by))}}

/* ---------- 2. aparicion ---------- */
html.wha-js .et-l--post .et_pb_section_0 .et_pb_group > .et_pb_group > *,html.wha-js .et-l--post .et_pb_section:not(.et_pb_section_0) > .et_pb_row > .et_pb_column > .et_pb_group:not(.wha-item) > .et_pb_module,html.wha-js .et-l--post .wha-item,html.wha-js .et-l--post .wha-fact{opacity:0!important;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--i,0) * 70ms)}
html.wha-js .et-l--post .et_pb_section_0 .et_pb_group > .et_pb_group > *.wha-on,html.wha-js .et-l--post .et_pb_section:not(.et_pb_section_0) > .et_pb_row > .et_pb_column > .et_pb_group:not(.wha-item) > .et_pb_module.wha-on,html.wha-js .et-l--post .wha-item.wha-on,html.wha-js .et-l--post .wha-fact.wha-on{opacity:1!important;transform:none}

/* ---------- 3. diagrama de la disciplina ---------- */
html.wha-js .wha-mod-reglas span{transform:scaleY(0);transform-origin:top;transition:transform .9s cubic-bezier(.22,.61,.36,1)}
html.wha-js .wha-mod.wha-on .wha-mod-reglas span{transform:scaleY(1)}
html.wha-js .wha-mod.wha-on .wha-mod-reglas span:nth-child(2){transition-delay:.1s}
html.wha-js .wha-mod.wha-on .wha-mod-reglas span:nth-child(3){transition-delay:.2s}
html.wha-js .wha-vert{opacity:0;transform:translateY(16px);transition:opacity .66s ease,transform .66s cubic-bezier(.22,.61,.36,1)}
html.wha-js .wha-mod.wha-on .wha-vert{opacity:1;transform:none}
html.wha-js .wha-mod.wha-on .wha-vert:nth-child(2){transition-delay:.12s}
html.wha-js .wha-mod.wha-on .wha-vert:nth-child(3){transition-delay:.24s}
html.wha-js .wha-vert-dot{transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
html.wha-js .wha-mod.wha-on .wha-vert-dot{transform:scale(1);transition-delay:.5s}
html.wha-js .wha-mod.wha-on .wha-vert:nth-child(2) .wha-vert-dot{transition-delay:.62s}
html.wha-js .wha-mod.wha-on .wha-vert:nth-child(3) .wha-vert-dot{transition-delay:.74s}
html.wha-js .wha-sis{clip-path:inset(0 100% 0 0);opacity:.001;transition:clip-path 1.05s cubic-bezier(.22,.61,.36,1),opacity .2s ease}
html.wha-js .wha-mod.wha-on .wha-sis{clip-path:inset(0 0 0 0);opacity:1;transition-delay:.62s}
html.wha-js .wha-mod.wha-on .wha-sis-claro{transition-delay:.86s}
html.wha-js .wha-mod-eyebrow,html.wha-js .wha-mod-nota{opacity:0;transition:opacity .7s ease}
html.wha-js .wha-mod.wha-on .wha-mod-eyebrow,html.wha-js .wha-mod.wha-on .wha-mod-nota{opacity:1}

/* ---------- 4. trazo de los iconos de linea ---------- */
html.wha-js .wha-item .ico>*,html.wha-js .wha-fact svg>*{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1) .18s}
html.wha-js .wha-on .ico>*,html.wha-js .wha-fact.wha-on svg>*{stroke-dashoffset:0}

/* ---------- 5. escala tipografica ----------
   El sistema instalado quedo con texto de lectura en 14.5px y etiquetas en 12.5:
   pequeno para el lector de este sitio, que es un director. Se sube todo lo que
   se lee, conservando la jerarquia relativa. Los campos del formulario van a
   16px porque por debajo iOS hace zoom automatico al enfocarlos. El CSS del
   sistema carga despues de este bloque, de ahi el !important. */
.wha-eyebrow{font-size:13.5px!important;letter-spacing:.22em!important}
.wha-kicker p,.wha-kicker{font-size:14.5px!important}
.wha-item .et_pb_text .et_pb_text_inner p{font-size:16px!important;line-height:1.62!important}
.wha-link a,a.wha-link{font-size:16px!important}
.wha-num{font-size:15.5px!important}
.wha-vert-txt{font-size:16px!important;line-height:1.58!important}
.wha-vert-tit{font-size:22px!important}
.wha-sis-txt{font-size:16px!important;line-height:1.55!important}
.wha-sis-tit{font-size:20px!important}
.wha-fact span{font-size:16px!important;line-height:1.5!important}
.wha-fact b{font-size:19px!important}
/* formulario */
.wha-cf-field label,.wha-cf-lbl,.wha-elige,.wha-medio-lbl{font-size:13.5px!important}
.wha-mec-lbl{font-size:13px!important}
.wha-cf input[type=text],.wha-cf input[type=tel],.wha-cf input[type=email],
.wha-cf textarea,.wha-medio-input,.wha-lada-btn,.wha-lada-busca{font-size:16px!important}
.wha-cf-btn,.wha-add-btn,.wha-cf-back{font-size:16px!important}
.wha-acc-tit{font-size:20px!important}
.wha-acc-head{font-size:15px!important}
.wha-acc-num{font-size:14px!important}
.wha-acc-res{font-size:14px!important}
.wha-paso-sub,.wha-vacio,.wha-prefs-vacio,.wha-cf-aviso{font-size:15.5px!important}
.wha-chip{font-size:14.5px!important}
.wha-pref{font-size:14px!important}
.wha-lada-item,.wha-lada-nom{font-size:15.5px!important}
.wha-lada-grupo{font-size:11.5px!important}
.wha-cf-success p{font-size:16px!important}

/* La ruta del DEM va en fila, no apilada en una columna estrecha: son tres pasos
   de una secuencia y horizontal es como se lee una secuencia. El texto ocupa el
   ancho completo encima. Selectores por contenido (:has) y no por numero de
   modulo, que cambia al reordenar secciones. */
@media(min-width:981px){
.et_pb_group:has(> .et_pb_group > .et_pb_code .wha-fact){flex-direction:column!important;--flex-direction:column!important;row-gap:38px!important}
.et_pb_group:has(> .et_pb_group > .et_pb_code .wha-fact) > .et_pb_group{width:100%!important;max-width:100%!important}
.et_pb_group:has(> .et_pb_code .wha-fact){display:grid!important;grid-template-columns:repeat(3,1fr);column-gap:38px;row-gap:0}
.et_pb_group:has(> .et_pb_code .wha-fact) .wha-fact{border-bottom:0;padding:0}
.et_pb_group:has(> .et_pb_code .wha-fact) > .et_pb_code{border-top:1px solid rgba(255,255,255,.14);padding-top:18px}
}

/* Logo de Whalora a la derecha del hero. Viaja como <img> dentro del modulo de
   textura —Divi no renderiza un ::after sobre .et_pb_row, probado— y se ancla a
   esa caja, que ya cubre la franja superior de la fila. Desaparece por debajo de
   981px, donde la columna es unica y competiria con el logo del encabezado. */
.wha-hero-logo{position:absolute;top:4px;right:0;width:250px;height:auto;z-index:2}
/* Cuando el viaje esta activo el logo se saca de la textura y se fija al
   viewport: la mascara de .wha-tex crea contexto de contencion y un position
   fixed dentro de ella quedaria anclado a la caja, no a la pantalla. */
/* Por encima del encabezado (9999): si queda debajo, al aterrizar lo tapa su
   fondo blanco y el logo parece desaparecer. */
html.wha-logo-viaja .wha-hero-logo{position:fixed;z-index:10000;pointer-events:none;
transform-origin:left top;will-change:transform,top,left}
/* El viaje lo conduce un bucle de cuadro, no el evento `scroll`: en este
   documento ese evento no llega a window de forma fiable y una scroll-driven
   animation deja el timeline inactivo. El bucle solo escribe cuando la posicion
   cambio, y en pestana de fondo no corre, que es justo cuando no hace falta. */
html.wha-logo-viaja .et-l--header .et_pb_image img{visibility:hidden}
@media(max-width:980px){.wha-hero-logo{display:none}}

/* Paginas legales: columna de lectura, jerarquia clara y numeracion visible.
   Ancho acotado porque un documento a 1080px se vuelve ilegible. */
.wha-legal{max-width:760px;font-family:Jost,sans-serif;color:#43505E}
.wha-legal p{font-size:16px;line-height:1.72;margin:0 0 16px}
.wha-legal .wha-legal-h2{font-family:Spectral,serif;font-size:22px;font-weight:600;
color:#0C2D4D;margin:38px 0 14px;padding-top:20px;border-top:1px solid rgba(12,45,77,.14)}
.wha-legal ul{margin:0 0 18px;padding-left:20px}
.wha-legal li{font-size:16px;line-height:1.66;margin:0 0 9px}
.wha-legal strong{color:#0C2D4D;font-weight:600}
.wha-legal a{color:#0C2D4D;border-bottom:1px solid #B08D4F;text-decoration:none}
.wha-legal a:hover{color:#B08D4F}
.wha-legal code{font-size:14.5px;background:#EAE3D6;padding:1px 5px;border-radius:2px}
@media(max-width:980px){.wha-legal p,.wha-legal li{font-size:16px}
.wha-legal .wha-legal-h2{font-size:20px;margin-top:30px}}

/* ---------- 5b. correcciones de diseno ---------- */
/* El sello del DEM ocupa el lugar del rotulo en la seccion del sistema. Se
   suprime el punto de oro del rotulo —es marca Whalora y la marca DEM no admite
   navy+oro— y se le da su propio aire. */
.wha-eyebrow:has(.wha-dem){display:block!important;margin-bottom:14px}
.wha-eyebrow:has(.wha-dem):before{display:none!important}
/* El sello es vectorial; el texto es HTML con la tipografia del sitio. Asi el
   descriptor se dibuja a su tamano real y no a 5px como cuando viajaba dentro
   del SVG escalado. */
.wha-dem{display:inline-flex;align-items:center;gap:13px}
.wha-dem-sello{flex:none;display:block}
.wha-dem-txt{display:flex;flex-direction:column;gap:3px;line-height:1}
.wha-dem-word{font-family:Jost,sans-serif;font-size:27px;font-weight:600;
letter-spacing:.01em;color:#EFEADF;line-height:1}
.wha-dem-desc{font-family:Jost,sans-serif;font-size:10.5px;font-weight:500;
letter-spacing:.24em;text-transform:uppercase;color:#A9B7C7;line-height:1}
@media(max-width:980px){.wha-dem-word{font-size:24px}.wha-dem-desc{font-size:10px}}
/* La textura es fondo, no contenido: vive en la franja superior de la fila y se
   apaga antes de llegar al texto de lectura. Sin el limite, el svg toma su alto
   intrinseco —314px de 477, dos tercios de la caja— y las curvas cruzan el
   parrafo. La mascara evita ademas el corte horizontal en el borde inferior. */
.wha-tex{height:44%!important;bottom:auto!important;
-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
mask-image:linear-gradient(180deg,#000 58%,transparent 100%)}
.wha-tex>.et_pb_code_inner{height:100%}
.wha-tex svg{height:100%;display:block}
@media(max-width:980px){.wha-tex{height:22%!important}}
/* Diagrama de la practica. Sin los rotulos, el lienzo recupera su filete de
   separacion. Las reglas verticales se anclan al bloque de columnas —no al
   lienzo— para que no crucen la banda del sistema. Y la banda adopta el marco
   de las tarjetas de servicios (borde .10, radio 2px) en vez del filete .25,
   que competia con las reglas y rompia la composicion. */
.wha-mod-lienzo{border-top:1px solid rgba(12,45,77,.14);padding-top:26px}
.wha-mod-verticales{position:relative}
.wha-mod-reglas{inset:0}
.wha-sis{margin:22px 0 0!important;border-radius:2px}
.wha-mod .wha-sis-claro{background:#fff;border:1px solid rgba(12,45,77,.10)}
/* Ritmo vertical: el hero y los servicios son bloques emparentados y el relleno
   simetrico de 72px por lado los separaba ~200px. Se acercan recortando solo
   esta costura; selectores estructurales (:first-child / :has), no indices,
   para que sobrevivan a reordenar secciones. */
.et-l--post .et_builder_inner_content>.et_pb_section:first-child{padding-bottom:24px!important}
.et-l--post .et_builder_inner_content>.et_pb_section:first-child .et_pb_row{padding-bottom:0!important}
.et-l--post .et_pb_section:has(.wha-item){padding-top:32px!important}
.et-l--post .et_pb_section:has(.wha-item)>.et_pb_row{padding-top:0!important}
.wha-eyebrow{flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;text-align:start}
.wha-eyebrow:before{align-self:center}
/* Tarjetas de servicios: fondo alterno blanco/arena y la textura de la casa
   en miniatura, anclada a la derecha y desvanecida hacia el texto. El borde
   con !important anula el filete de lista (border-top/bottom) del CSS instalado. */
.wha-item{background-color:#fff;border:1px solid rgba(12,45,77,.10)!important;border-radius:2px;padding:26px 28px!important;background-image:url("data:image/svg+xml,%3Csvg%20viewBox=%220%20-26.0%20900%20341.7%22%20preserveAspectRatio=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22cAg%22%20x1=%220%25%22%20y1=%220%25%22%20x2=%22100%25%22%20y2=%220%25%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%23fff%22%20stop-opacity=%220%22/%3E%3Cstop%20offset=%2238%25%22%20stop-color=%22%23fff%22%20stop-opacity=%22.25%22/%3E%3Cstop%20offset=%2270%25%22%20stop-color=%22%23fff%22%20stop-opacity=%221%22/%3E%3C/linearGradient%3E%3Cmask%20id=%22cAm%22%3E%3Crect%20y=%22-26.0%22%20width=%22900%22%20height=%22341.7%22%20fill=%22url(%23cAg)%22/%3E%3C/mask%3E%3C/defs%3E%3Cg%20mask=%22url(%23cAm)%22%3E%3Cpolyline%20points=%220,33.3%2030,32.9%2060,32.7%2090,31.6%20120,28.8%20150,23.8%20180,16.7%20210,8.2%20240,-0.6%20270,-8.4%20300,-13.8%20330,-16.0%20360,-14.5%20390,-9.5%20420,-2.0%20450,7.1%20480,16.2%20510,24.1%20540,30.1%20570,33.7%20600,35.3%20630,35.7%20660,35.8%20690,36.7%20720,39.3%20750,44.0%20780,50.4%20810,57.9%20840,65.2%20870,71.2%20900,74.5%22%20fill=%22none%22%20stroke=%22%230C2D4D%22%20stroke-width=%222.0%22%20opacity=%220.075%22/%3E%3Cpolyline%20points=%220,80.0%2030,75.5%2060,69.3%2090,61.3%20120,52.3%20150,43.3%20180,35.7%20210,30.6%20240,29.2%20270,31.9%20300,38.4%20330,48.1%20360,59.7%20390,71.8%20420,83.0%20450,92.3%20480,99.2%20510,103.8%20540,106.8%20570,109.0%20600,111.5%20630,115.1%20660,120.2%20690,126.7%20720,133.9%20750,140.6%20780,145.7%20810,147.9%20840,146.5%20870,141.0%20900,131.9%22%20fill=%22none%22%20stroke=%22%230C2D4D%22%20stroke-width=%222.0%22%20opacity=%22.05%22/%3E%3Cpolyline%20points=%220,115.5%2030,128.2%2060,142.7%2090,157.3%20120,170.7%20150,181.6%20180,189.3%20210,193.6%20240,195.1%20270,194.5%20300,193.1%20330,191.9%20360,191.5%20390,192.2%20420,193.7%20450,195.2%20480,195.6%20510,193.8%20540,188.9%20570,180.7%20600,169.3%20630,155.6%20660,140.9%20690,126.6%20720,114.3%20750,105.0%20780,99.4%20810,97.3%20840,98.3%20870,101.2%20900,104.9%22%20fill=%22none%22%20stroke=%22%23B08D4F%22%20stroke-width=%222.6%22%20opacity=%22.13%22/%3E%3Cpolyline%20points=%220,214.1%2030,212.5%2060,210.6%2090,207.6%20120,202.7%20150,195.8%20180,187.1%20210,177.5%20240,168.3%20270,160.9%20300,156.4%20330,155.7%20360,158.9%20390,165.5%20420,174.6%20450,184.8%20480,194.8%20510,203.5%20540,210.0%20570,214.4%20600,216.9%20630,218.5%20660,220.1%20690,222.8%20720,227.2%20750,233.4%20780,240.9%20810,248.9%20840,256.1%20870,261.2%20900,263.1%22%20fill=%22none%22%20stroke=%22%230C2D4D%22%20stroke-width=%222.0%22%20opacity=%220.075%22/%3E%3Cpolyline%20points=%220,269.9%2030,271.0%2060,270.8%2090,268.6%20120,264.1%20150,257.6%20180,250.1%20210,242.8%20240,236.8%20270,233.5%20300,233.4%20330,236.7%20360,242.9%20390,250.9%20420,259.4%20450,267.2%20480,273.2%20510,276.8%20540,278.0%20570,277.4%20600,275.9%20630,274.7%20660,274.8%20690,276.9%20720,281.1%20750,286.9%20780,293.5%20810,299.7%20840,304.0%20870,305.7%20900,304.0%22%20fill=%22none%22%20stroke=%22%230C2D4D%22%20stroke-width=%222.0%22%20opacity=%22.05%22/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:auto 100%;transition:border-color .3s ease}
.wha-item:nth-child(2n+1){background-color:#EFE8DB;background-image:url("data:image/svg+xml,%3Csvg%20viewBox=%220%20-25.3%20900%20340.9%22%20preserveAspectRatio=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22cBg%22%20x1=%220%25%22%20y1=%220%25%22%20x2=%22100%25%22%20y2=%220%25%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%23fff%22%20stop-opacity=%220%22/%3E%3Cstop%20offset=%2238%25%22%20stop-color=%22%23fff%22%20stop-opacity=%22.25%22/%3E%3Cstop%20offset=%2270%25%22%20stop-color=%22%23fff%22%20stop-opacity=%221%22/%3E%3C/linearGradient%3E%3Cmask%20id=%22cBm%22%3E%3Crect%20y=%22-25.3%22%20width=%22900%22%20height=%22340.9%22%20fill=%22url(%23cBg)%22/%3E%3C/mask%3E%3C/defs%3E%3Cg%20mask=%22url(%23cBm)%22%3E%3Cpolyline%20points=%220,26.7%2030,25.1%2060,21.6%2090,16.0%20120,8.8%20150,0.8%20180,-6.7%20210,-12.5%20240,-15.3%20270,-14.6%20300,-10.3%20330,-2.9%20360,6.4%20390,16.3%20420,25.5%20450,32.9%20480,37.9%20510,40.5%20540,41.2%20570,41.1%20600,41.1%20630,42.3%20660,45.3%20690,50.1%20720,56.4%20750,63.0%20780,68.8%20810,72.5%20840,73.2%20870,70.4%20900,64.1%22%20fill=%22none%22%20stroke=%22%230C2D4D%22%20stroke-width=%222.0%22%20opacity=%220.075%22/%3E%3Cpolyline%20points=%220,119.8%2030,113.6%2060,109.1%2090,106.0%20120,103.5%20150,100.7%20180,96.6%20210,90.5%20240,82.0%20270,71.6%20300,60.1%20330,48.7%20360,38.9%20390,32.0%20420,28.8%20450,29.8%20480,34.5%20510,42.2%20540,51.6%20570,61.4%20600,70.2%20630,77.4%20660,82.8%20690,86.5%20720,89.4%20750,92.4%20780,96.6%20810,102.6%20840,110.5%20870,119.9%20900,130.0%22%20fill=%22none%22%20stroke=%22%230C2D4D%22%20stroke-width=%222.0%22%20opacity=%22.05%22/%3E%3Cpolyline%20points=%220,94.5%2030,99.5%2060,108.2%2090,120.1%20120,134.0%20150,148.5%20180,162.1%20210,173.6%20240,182.0%20270,187.3%20300,189.9%20330,190.5%20360,190.2%20390,190.1%20420,190.9%20450,192.8%20480,195.5%20510,198.2%20540,199.9%20570,199.3%20600,195.6%20630,188.3%20660,177.6%20690,164.4%20720,149.7%20750,135.1%20780,122.2%20810,112.0%20840,105.2%20870,101.9%20900,101.5%22%20fill=%22none%22%20stroke=%22%23B08D4F%22%20stroke-width=%222.6%22%20opacity=%22.13%22/%3E%3Cpolyline%20points=%220,245.7%2030,239.1%2060,233.6%2090,229.7%20120,227.3%20150,226.1%20180,225.0%20210,223.0%20240,219.2%20270,213.0%20300,204.4%20330,193.9%20360,182.7%20390,172.1%20420,163.5%20450,158.0%20480,156.3%20510,158.5%20540,163.8%20570,171.4%20600,179.9%20630,187.9%20660,194.6%20690,199.4%20720,202.5%20750,204.3%20780,205.9%20810,208.3%20840,212.4%20870,218.6%20900,226.8%22%20fill=%22none%22%20stroke=%22%230C2D4D%22%20stroke-width=%222.0%22%20opacity=%220.075%22/%3E%3Cpolyline%20points=%220,269.9%2030,271.0%2060,270.6%2090,268.3%20120,263.6%20150,257.1%20180,249.6%20210,242.3%20240,236.5%20270,233.4%20300,233.6%20330,237.1%20360,243.4%20390,251.5%20420,260.1%20450,267.8%20480,273.7%20510,277.1%20540,278.2%20570,277.4%20600,275.9%20630,274.8%20660,275.0%20690,277.2%20720,281.5%20750,287.4%20780,294.0%20810,300.0%20840,304.2%20870,305.6%20900,303.7%22%20fill=%22none%22%20stroke=%22%230C2D4D%22%20stroke-width=%222.0%22%20opacity=%22.05%22/%3E%3C/g%3E%3C/svg%3E")}
.wha-item:hover{border-color:rgba(176,141,79,.5)!important}
.wha-item .ico{transition:stroke .35s ease}
.wha-item:hover .ico{stroke:#B08D4F}
.wha-link a{transition:color .25s ease,border-color .25s ease}
@media(min-width:981px){
/* La fila no depende del CSS numerado de Divi. Cada vez que cambia el numero de
   modulos de una seccion, Divi renumera (.et_pb_group_N) y su hoja diferida
   queda desfasada: la fila caia a columna y las tarjetas se rompian. Fijar aqui
   la direccion por clase propia cierra esa dependencia. */
.wha-item{flex-direction:row!important;--flex-direction:row!important;align-items:flex-start!important}
.wha-item>:nth-child(1){flex:none}
.wha-item>:nth-child(2){width:30%!important;max-width:30%!important;flex:0 0 30%}
.wha-item>:nth-child(3){width:auto!important;max-width:none!important;flex:1 1 auto;min-width:0}
}
/* En angosto los grupos de Divi se apilan a ancho completo y la fila pierde
   jerarquia: icono, numero, titulo y kicker quedan flotando con huecos de grupo.
   La fila pasa a malla de dos columnas: la marginal (icono y numero, en
   vertical) y el contenido; el cuerpo cruza abajo a lo ancho. */
@media(max-width:980px){
.wha-item{display:grid!important;grid-template-columns:34px 1fr;column-gap:16px;row-gap:0;align-items:start;padding:22px 18px!important}
.wha-item>:nth-child(1){grid-column:1;grid-row:1;width:auto!important}
.wha-item>:nth-child(1) .et_pb_code_inner>div{flex-direction:column!important;align-items:center!important;gap:6px!important}
.wha-item>:nth-child(2){grid-column:2;grid-row:1;--vertical-gap:4px;row-gap:4px;width:100%!important;max-width:none!important;flex:none!important}
.wha-item>:nth-child(3){grid-column:2;grid-row:2;margin-top:10px;--vertical-gap:10px;row-gap:10px;width:100%!important;max-width:none!important;flex:none!important}
.wha-item>:nth-child(2) .et_pb_module{width:100%!important;max-width:100%!important}
.wha-item .et_pb_heading h3{font-size:24px!important;line-height:1.2}
.wha-item .wha-kicker p{font-size:12.5px}
}

@media(prefers-reduced-motion:reduce){
html.wha-js *{transition:none!important;animation:none!important}
html.wha-js .wha-tex svg .wha-w{transform:none;opacity:1}
html.wha-js .wha-tex svg .wha-w polyline{stroke-dasharray:none;stroke-dashoffset:0}
html.wha-js .wha-tex svg .wha-w-in{transform:none}
html.wha-js .et-l--post .et_pb_section_0 .et_pb_group > .et_pb_group > *,html.wha-js .et-l--post .et_pb_section:not(.et_pb_section_0) > .et_pb_row > .et_pb_column > .et_pb_group:not(.wha-item) > .et_pb_module,html.wha-js .et-l--post .wha-item,html.wha-js .et-l--post .wha-fact{opacity:1!important;transform:none!important}
html.wha-js .wha-vert,html.wha-js .wha-mod-eyebrow,html.wha-js .wha-mod-nota{opacity:1}
html.wha-js .wha-sis{clip-path:none;opacity:1}
html.wha-js .wha-mod-reglas span,html.wha-js .wha-vert-dot{transform:none}
html.wha-js .wha-item .ico>*,html.wha-js .wha-fact svg>*{stroke-dasharray:none;stroke-dashoffset:0}
}