/* ===== Sordera Widgets ===== */ :root{ --sordera-blue:#516477; --sordera-cream:#EAE8DB; } /* Global safety: never allow horizontal page scroll */ html,body{max-width:100%;overflow-x:hidden;} /* ---------- Menú lateral off-canvas (derecha) ---------- */ .ssm{display:flex;} /* Botones sin fondo/borde/sombra del tema, en TODOS los estados (el tema pintaba * un fondo rosa #cc3366 en :hover). */ .ssm-toggle,.ssm-toggle:hover,.ssm-toggle:focus,.ssm-toggle:active, .ssm-close,.ssm-close:hover,.ssm-close:focus,.ssm-close:active{ background:transparent !important;background-color:transparent !important; border:0 !important;box-shadow:none !important;-webkit-appearance:none;appearance:none; } .ssm-toggle{ cursor:pointer;color:var(--sordera-blue); display:inline-flex;align-items:center;justify-content:center;padding:8px; line-height:0;font-size:28px;transition:color .2s ease; } /* El icono (SVG de Elementor) toma el color del botón; si no, saldría negro. */ .ssm-toggle svg,.ssm-close svg{width:1em;height:1em;display:block;fill:currentColor;} .ssm-toggle svg path,.ssm-close svg path{fill:currentColor;} .ssm-toggle i,.ssm-close i{font-size:1em;line-height:1;color:inherit;} /* Sin hover/foco rosa del tema: mantienen su propio color salvo que se cambie. */ .ssm-toggle:hover,.ssm-toggle:focus{color:var(--sordera-blue);} .ssm-close:hover,.ssm-close:focus{color:inherit;} .ssm-toggle:focus-visible,.ssm-close:focus-visible{outline:2px solid currentColor;outline-offset:3px;} /* El overlay y el panel se mueven a por JS (evita que un transform de * Elementor rompa el position:fixed). Alto z-index para tapar la cabecera. */ .ssm-overlay{ position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99998; opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s; } .ssm-overlay.is-open{opacity:1;visibility:visible;transition:opacity .4s ease;} .ssm-panel{ position:fixed;top:0;right:0;height:100%;width:var(--ssm-w,360px);max-width:88vw; background:var(--sordera-blue);color:var(--sordera-cream);z-index:99999; padding:72px 32px 32px;overflow-y:auto;-webkit-overflow-scrolling:touch; box-shadow:-12px 0 40px rgba(0,0,0,.25); /* Estado cerrado: fuera por la derecha + transparente (slide + fade). */ transform:translateX(100%);opacity:0;visibility:hidden; transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .4s ease,visibility 0s linear .4s; } .ssm-panel.is-open{ transform:translateX(0);opacity:1;visibility:visible; transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .4s ease; } .ssm-close{ position:absolute;top:20px;right:24px;background:transparent;border:0;cursor:pointer; color:inherit;font-size:24px;line-height:0;padding:6px;display:inline-flex; } .ssm-heading{ margin:0 0 16px;font-family:'Nexa',sans-serif;font-size:14px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;opacity:.7; } .ssm-nav ul{list-style:none;margin:0;padding:0;border:0;} .ssm-nav li{margin:0;border:0;} /* Enlaces del menú: heredan el color del panel (nada de rosa del tema) y sin * borde/subrayado, en todos los estados. Los controles por ID pueden sobreescribir. */ .ssm-panel .ssm-nav a, .ssm-panel .ssm-nav a:link,.ssm-panel .ssm-nav a:visited, .ssm-panel .ssm-nav a:hover,.ssm-panel .ssm-nav a:focus,.ssm-panel .ssm-nav a:active{ display:block;text-decoration:none;color:inherit;border:0;box-shadow:none; font-family:'Nexa',sans-serif;font-size:20px;font-weight:700;line-height:1.3;padding:9px 0; transition:opacity .2s ease,color .2s ease; } .ssm-panel .ssm-nav a:hover{opacity:.65;} .ssm-nav a:focus{outline:none;} .ssm-nav a:focus-visible{outline:2px solid currentColor;outline-offset:2px;} .ssm-nav .sub-menu{padding-left:16px;margin-top:2px;} .ssm-panel .ssm-nav .sub-menu a{font-size:16px;font-weight:400;} .ssm-empty{opacity:.7;font-family:'Nexa',sans-serif;} body.ssm-lock{overflow:hidden;} @media (prefers-reduced-motion:reduce){ .ssm-panel{transition:opacity .2s ease,visibility 0s linear .2s;transform:none;} .ssm-panel.is-open{transition:opacity .2s ease;transform:none;} } /* ---------- Services expanding carousel ---------- */ .scw{position:relative;width:100%;max-width:100%;overflow:hidden;--scw-gap:24px;} .scw-track{ display:flex;flex-wrap:nowrap;gap:var(--scw-gap);width:100%; overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth; scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px; } .scw-track::-webkit-scrollbar{display:none;height:0;} .scw-card{ position:relative;flex:0 0 302px;height:402px;border-radius:24px;overflow:hidden; background-size:cover;background-position:center;cursor:pointer; transition:flex-basis .45s cubic-bezier(.4,0,.2,1); display:flex;align-items:flex-end; } .scw-card.is-active{flex:0 0 518px;cursor:default;} .scw-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);transition:background .35s ease;z-index:1;} .scw-card.is-active .scw-overlay{background:rgba(0,0,0,.55);} .scw-content{position:relative;z-index:2;padding:24px;display:flex;flex-direction:column;gap:12px;width:100%;} .scw-title{margin:0;color:var(--sordera-cream);font-family:'Nexa',sans-serif;font-size:24px;font-weight:700;line-height:1.2;} .scw-desc{ margin:0;color:var(--sordera-cream);font-family:'Nexa',sans-serif;font-size:16px;font-weight:400;line-height:1.25; max-width:430px;opacity:0;max-height:0;overflow:hidden; transition:opacity .35s ease .1s, max-height .45s ease; } .scw-btn{ display:none;align-self:flex-start;background:#fff;color:var(--sordera-blue); font-family:'Nexa',sans-serif;font-size:20px;font-weight:700;line-height:1; padding:12px 24px;border-radius:200px;text-decoration:none;width:auto; } .scw-card.is-active .scw-desc{opacity:1;max-height:200px;} .scw-card.is-active .scw-btn{display:inline-flex;} .scw-nav,.mcw-nav{ position:absolute;top:50%;right:8px;transform:translateY(-50%);z-index:5; width:40px;height:40px;border-radius:50%;border:none;background:#fff;color:var(--sordera-blue); display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.18); transition:background-color .25s ease,color .25s ease,box-shadow .25s ease;padding:0;line-height:1; -webkit-appearance:none;appearance:none; } .scw-prev,.mcw-prev{right:auto;left:8px;} /* Contenedor de icono: centra cualquier de fuente o
. */ .mcw-sub p{margin:0;} /* Enlaces dentro de los textos: heredan el color y van subrayados. */ .mcw-sub a,.sfc-sub a,.sfc-desc a{color:inherit;text-decoration:underline;text-underline-offset:2px;} /* Mapa: caja pequeña (217x182 por defecto) anclada abajo a la derecha de la * tarjeta activa. Oculto mientras la tarjeta está cerrada. */ .mcw-map{ display:none;position:absolute;z-index:3;right:16px;bottom:16px; width:217px;height:182px;border-radius:12px;overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.28); } .mcw-card.is-center.is-active .mcw-map{display:block;} /* Reserva la columna del mapa: el texto se ajusta a su izquierda y nunca queda * tapado, por larga que sea la descripción (mapa: 217px + 16px margen + hueco). */ .mcw-card.is-center.is-active .mcw-content{padding-right:250px;} .mcw-map iframe{width:100%;height:100%;border:0;display:block;} .mcw-card.is-link{background:var(--sordera-blue);align-items:flex-end;text-decoration:none;} .mcw-card.is-link .mcw-content{color:var(--sordera-cream);} /* ---------- Tablet ---------- */ @media (max-width:1024px) and (min-width:768px){ .scw-title,.mcw-title{font-size:20px;} .scw-desc,.mcw-sub{font-size:15px;} } /* ---------- Mobile ---------- * Se mantiene el CARRUSEL horizontal (no se apila). El control "Slides * visibles" pone 1 tarjeta por vista por defecto, así que cada tarjeta ocupa * el ancho completo y muestra todo su contenido; se navega con flechas o * deslizando. */ @media (max-width:767px){ .scw{--scw-gap:12px;} .mcw{--mcw-gap:12px;} /* Mostrar el contenido completo en cada tarjeta (no solo en la activa). */ .scw-card .scw-desc{opacity:1;max-height:320px;} .scw-card .scw-btn{display:inline-flex;} /* La tarjeta de centro apila foto + mapa a ancho completo. */ .mcw-card{height:auto !important;flex-direction:column;} .mcw-photo{min-height:200px;} /* Movil: cada tarjeta se ve completa, revela tambien la direccion. */ .mcw-card .mcw-sub{opacity:1;max-height:none;overflow:visible;} .mcw-card.is-center .mcw-map{ display:block;position:static;right:auto;bottom:auto; width:100% !important;height:180px !important; border-radius:0;box-shadow:none; } /* El mapa va apilado, así que el texto recupera todo el ancho. */ .mcw-card.is-center.is-active .mcw-content{padding-right:16px;} } /* ===================================================================== * Efecto "carrusel expandible Sordera" para el widget Carousel de Elementor. * La slide activa se ensancha y revela su contenido; las cerradas se * encogen (igual que el Carrusel de Servicios Sordera). El JS destruye la * instancia de Swiper para tomar el control limpio del layout. * * Uso: * 1) Añade la clase sordera-anim al widget Carousel (Avanzado > CSS Classes). * 2) Dentro de cada slide, pon la clase sordera-desc al elemento * (texto, botón, contenedor...) que solo deba verse al estar activa. * Lo que NO lleve esa clase (p.ej. el título) se ve siempre. * * Ajustables: --scw-collapsed (ancho cerrada) y --scw-expanded (ancho abierta). * ===================================================================== */ .sordera-anim{ --scw-collapsed:302px; --scw-expanded:518px; } /* El carrusel se extiende hasta el borde derecho de la pantalla (no se corta * al ancho de la columna). El cálculo vale 0 si el contenedor ya es full-width, * así que es seguro. Para full-bleed por AMBOS lados, añade la clase sordera-full. */ .sordera-anim .e-n-carousel{ overflow:hidden; margin-right:calc(50% - 50vw); } .sordera-anim.sordera-full .e-n-carousel{ margin-left:calc(50% - 50vw); } .sordera-anim .swiper-wrapper{ display:flex;flex-wrap:nowrap;transform:translateX(0); gap:var(--e-n-carousel-swiper-slides-gap,24px); transition:transform .4s cubic-bezier(.4,0,.2,1); will-change:transform; } .sordera-anim .swiper-slide{ position:relative;flex:0 0 var(--scw-collapsed);width:auto;margin:0; cursor:pointer;transition:flex-basis .4s cubic-bezier(.4,0,.2,1); } .sordera-anim .swiper-slide.sordera-active{flex:0 0 var(--scw-expanded);cursor:default;} /* Contenido revelado solo en la slide activa */ .sordera-anim .sordera-desc{ opacity:0;max-height:0;overflow:hidden; transition:opacity .35s ease .05s, max-height .45s cubic-bezier(.4,0,.2,1); } .sordera-anim .swiper-slide.sordera-active .sordera-desc{opacity:1;max-height:600px;} /* Tablet */ @media (max-width:1024px){ .sordera-anim{ --scw-collapsed:200px; --scw-expanded:min(68vw,460px); } } /* Móvil grande */ @media (max-width:767px){ .sordera-anim{ --scw-collapsed:120px; --scw-expanded:min(80vw,420px); } } /* Móvil pequeño */ @media (max-width:430px){ .sordera-anim{ --scw-collapsed:84px; --scw-expanded:84vw; } }