/* ============================================================ HOPE & MISSION - Estilos personalizados del tema ------------------------------------------------------------ Los colores, tipografías, tamaños y espaciados generales están definidos en Elementor › Ajustes del sitio (variables globales). Aquí SOLO viven los estilos que un widget de Elementor no puede resolver desde su propio panel de configuración. Cada bloque indica el ÁREA o SECCIÓN a la que pertenece y la clase que debe llevar el widget/contenedor en Elementor. ÍNDICE 01. Tokens y utilidades base 02. GLOBAL - Titular con resaltado mint .hm-hl 03. GLOBAL - Titular con cuadrito mint .hm-title-dot 04. HEADER - Cabecera y navegación 05. HERO - Slider de la portada 06. HOME - Carrusel de proyectos 07. IMPACTO - Pestañas de país y mapa 08. IMPACTO - Estadísticas 09. TESTIMONIOS 10. HOME - Materiales espirituales y educativos 11. BLOG - Listado y artículo 12. JUNTA DIRECTIVA - Tarjetas y biografía 13. NOSOTROS - Misión / Visión y bandas de imagen 14. PROYECTO FAMILIA - Galería y detalle 15. VOLUNTARIADO - Opciones seleccionables 16. FORMULARIOS - Donar / Voluntariado 17. FOOTER - Pie de página y newsletter ============================================================ */ /* ============================================================ 01. TOKENS Y UTILIDADES BASE ============================================================ */ :root{ --hm-green-900:#024E46; /* verde del logotipo */ --hm-green-800:#2D4F48; /* titulares y pie de página */ --hm-green-700:#3A6357; --hm-mint:#BCE0D5; /* banda de navegación y tarjetas */ --hm-mint-soft:#E3F2ED; /* fondos suaves e inputs */ --hm-mint-line:#CFE6DD; --hm-orange:#FF5A02; /* llamadas a la acción */ --hm-orange-dark:#E44E00; --hm-gray:#8C8C8C; /* texto de párrafo */ --hm-gray-soft:#F4F4F4; --hm-radius:10px; --hm-radius-sm:6px; --hm-shadow:0 10px 30px rgba(2,78,70,.10); --hm-shadow-soft:0 6px 20px rgba(0,0,0,.08); } img{max-width:100%;height:auto;} /* Enlace de salto al contenido (accesibilidad) */ .hm-skip-link{ position:absolute;left:-9999px;top:0;z-index:2000; background:var(--hm-orange);color:#fff;padding:12px 20px; border-radius:0 0 8px 0;font-size:.85rem; } .hm-skip-link:focus{left:0;} /* ============================================================ 02. GLOBAL - Titular con resaltado mint Clase en el widget Título: .hm-hl Uso: envolver la palabra resaltada en ============================================================ */ .hm-mark{ background:var(--hm-mint); padding:.02em .05em; border-radius:8px; -webkit-box-decoration-break:clone; box-decoration-break:clone; } /* ============================================================ 03. GLOBAL - Titular con cuadrito mint a la izquierda Clase en el widget Título: .hm-title-dot ============================================================ */ .hm-title-dot .elementor-heading-title{ display:flex;align-items:center;gap:18px;letter-spacing:-.08em;} .hm-title-dot .elementor-heading-title::before{ content:"";flex:none; width:37px;height:37px;border-radius:10px; background:var(--hm-mint); } /* ============================================================ 04. HEADER - Cabecera y navegación Plantilla: Header ES / Header EN ============================================================ */ /* Selector de idioma (widget HTML .hm-lang) */ .hm-lang{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;letter-spacing:.08em;} .hm-lang a{color:var(--hm-gray);transition:color .2s;} .hm-lang a:hover{color:var(--hm-green-800);} .hm-lang a.is-active{color:var(--hm-orange);} .hm-lang span{color:var(--hm-mint-line);} /* Banda mint del menú principal (contenedor .hm-nav-band) */ .hm-nav-band .elementor-nav-menu--main .elementor-item{ font-size:.86rem;letter-spacing:.23em;text-transform:uppercase;font-weight:500; } /* Separador vertical entre elementos del menú, como en el diseño */ .hm-nav-band .elementor-nav-menu--main > .elementor-nav-menu > li + li{position:relative;} .hm-nav-band .elementor-nav-menu--main > .elementor-nav-menu > li + li::before{ content:"|";color:var(--hm-green-800);opacity:.5; align-self:center;pointer-events:none; } @media (max-width:1024px){ .hm-nav-band .elementor-nav-menu--main > .elementor-nav-menu > li + li::before{content:none;} } /* Logotipo: 190 px como en el diseño, sin encogerse en la fila */ .hm-brand{flex:0 0 auto;} .hm-brand img{width:228px;max-width:none;} @media (max-width:1024px){.hm-brand img{width:158px;}} @media (max-width:767px){.hm-brand img{width:132px;}} /* Enlaces de utilidad de la cabecera (Inicio) */ .hm-headerlink .elementor-heading-title, .hm-headerlink a{ font-size:.82rem;letter-spacing:.13em;text-transform:uppercase; color:var(--hm-green-800);font-weight:500; } .hm-headerlink a:hover{color:var(--hm-orange);} /* ============================================================ 05. HERO - Slider de la portada Widget Slides (Pro) con clase .hm-hero ============================================================ */ .hm-hero .elementor-slide-heading{max-width:21ch;} /* La palabra resaltada va en verde sobre la banda menta, como en el diseño */ .hm-hero .hm-mark{color:var(--hm-green-800);} /* Velo degradado: más oscuro a la izquierda, donde va el texto */ .hm-hero .swiper-slide .elementor-background-overlay{ background-image:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.42) 48%,rgba(0,0,0,.10) 100%) !important; background-color:transparent !important; } .hm-hero .elementor-slide-description{max-width:52ch;} .hm-hero .swiper-pagination-bullet{ width:44px;height:5px;border-radius:4px;opacity:1; background:rgba(255,255,255,.6);box-shadow:0 1px 4px rgba(0,0,0,.35); transition:background .25s,width .25s; } .hm-hero .swiper-pagination-bullet-active{background:var(--hm-orange);width:60px;} /* Los indicadores se alinean a la izquierda sobre la retícula y suben lo suficiente para no quedar debajo de las tarjetas de proyecto, que montan sobre el hero. El selector incluye .elementor-swiper para ganar a la regla de Elementor, que los pega al borde inferior. */ .hm-hero.elementor-widget .elementor-swiper .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal{ text-align:left;max-width:1358px;left:0;right:0;margin:0 auto; padding:0 24px;bottom:104px; } @media (max-width:1024px){ .hm-hero.elementor-widget .elementor-swiper .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:96px;} } @media (max-width:767px){ .hm-hero.elementor-widget .elementor-swiper .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:78px;} .hm-hero .swiper-pagination-bullet{width:34px;} .hm-hero .swiper-pagination-bullet-active{width:46px;} .hm-hero .elementor-slide-heading{max-width:none;} } /* ============================================================ 06. HOME - Carrusel de proyectos Contenedor .hm-projects · tarjetas .hm-project-card Monta sobre el hero, como en el diseño ============================================================ */ .hm-projects{margin-top:-90px;position:relative;z-index:5;} @media (max-width:1024px){.hm-projects{margin-top:-50px;}} .hm-project-card{ position:relative;border-radius:var(--hm-radius);overflow:hidden; aspect-ratio:4/3.4;box-shadow:var(--hm-shadow-soft); } .hm-project-card::before{ content:"";position:absolute;inset:0;z-index:0; background-image:inherit;background-size:cover;background-position:center; filter:grayscale(1); } .hm-project-card::after{ content:"";position:absolute;inset:0;z-index:1; background:rgba(45,79,72,.45);mix-blend-mode:multiply; } .hm-project-card--mint::after{background:rgba(120,180,160,.62);} .hm-project-card--terra::after{background:rgba(198,92,48,.66);} .hm-project-card__body{ position:absolute;inset:0;z-index:2;color:#fff;padding:26px; display:flex;flex-direction:column;justify-content:space-between; } .hm-project-card__body h3{color:#fff;font-size:1.7rem;font-weight:600;margin:0;letter-spacing:-.055em;} .hm-project-card__body p{ margin:0;font-size:.86rem;text-align:center;opacity:.95; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;line-height:1.22;} /* ============================================================ 07. IMPACTO - Pestañas de país y mapa Widget Tabs (Pro) con clase .hm-country-tabs Contenedor del mapa .hm-map ============================================================ */ .hm-country-tabs .e-n-tabs-heading{ display:flex;flex-wrap:wrap;justify-content:center; gap:clamp(20px,5vw,66px);border:0; } .hm-country-tabs .e-n-tab-title{ background:none;border:0;padding:6px 2px; font-size:1.12rem;font-weight:500;color:var(--hm-gray);transition:color .2s; } .hm-country-tabs .e-n-tab-title:hover{color:var(--hm-green-800);} .hm-country-tabs .e-n-tab-title[aria-selected="true"]{color:var(--hm-orange);font-weight:600;} @media (max-width:767px){ .hm-country-tabs .e-n-tabs-heading{gap:16px;} .hm-country-tabs .e-n-tab-title{font-size:1rem;} } /* Panel gris que enmarca el mapa y el texto del país */ .hm-map-panel{background:var(--hm-gray-soft);border-radius:var(--hm-radius);} /* Mapa SVG: países resaltados en naranja */ .hm-map svg{width:100%;height:auto;max-height:620px;} .hm-map svg path{fill:#DCDCDC;stroke:#F4F4F4;stroke-width:1.4;transition:fill .25s;} .hm-map svg path.is-active{fill:var(--hm-orange);} /* Bandera junto al nombre del país */ .hm-flag{font-size:1.6rem;line-height:1;} /* Fotografía del país - proporción 5:3, la del diseño */ .hm-country-photo img{width:100%;aspect-ratio:1143/501;object-fit:cover;border-radius:var(--hm-radius);} @media (max-width:1024px){.hm-country-photo img{aspect-ratio:4/3;}} /* ============================================================ 08. IMPACTO - Estadísticas Contenedor .hm-stats · cada dato .hm-stat ============================================================ */ .hm-stats{background:var(--hm-mint-soft);border-radius:var(--hm-radius);} .hm-stat .elementor-counter-number-wrapper, .hm-stat__number{ font-family:var(--e-global-typography-primary-font-family),sans-serif; font-size:clamp(2.4rem,5vw,3.6rem);font-weight:700;letter-spacing:-.05em; color:var(--hm-green-800);line-height:1; } .hm-stat__label{color:var(--hm-gray);font-size:.83rem;line-height:1.22;} .hm-stat svg{width:51px;height:51px;color:var(--hm-green-800);margin:0 auto 20px;} /* ============================================================ 09. TESTIMONIOS Tarjeta .hm-testimonial (retrato sobresaliendo por arriba) ============================================================ */ .hm-testimonial{ background:var(--hm-mint);border-radius:var(--hm-radius); padding:143px 30px 46px;text-align:center;position:relative;margin-top:65px;min-height:320px;} /* El retrato sobresale por encima de la tarjeta: se posiciona el contenedor del widget, no la imagen, para que conserve su tamaño. */ .hm-testimonial__photo{ position:absolute;top:-65px;left:50%;transform:translateX(-50%); width:155px;height:155px;z-index:2; } .hm-testimonial__photo img{ display:block;width:155px;height:155px; border-radius:50%;object-fit:cover;border:4px solid #fff; box-sizing:border-box; } .hm-testimonial__name{font-size:1.05rem;font-weight:600;margin:0 0 6px;letter-spacing:-.075em;} .hm-testimonial__role{font-size:.8rem;color:var(--hm-green-700);margin:0 0 24px;} .hm-testimonial__quote{font-size:.86rem;color:var(--hm-green-800);margin:0;line-height:1.22;} /* ============================================================ 10. HOME - Materiales espirituales y educativos Contenedor .hm-material ============================================================ */ .hm-material__media img{aspect-ratio:634/380;object-fit:cover;border-radius:var(--hm-radius);width:100%;} /* ============================================================ 11. BLOG - Listado y artículo Listado: widget Posts con clase .hm-blog-grid Artículo: .hm-article ============================================================ */ /* La miniatura cuadrada la resuelve el propio widget (proporción 1:1): aquí solo se ajusta el radio y la separación con el titular. */ .hm-blog-grid .elementor-post__thumbnail{border-radius:var(--hm-radius);} /* La foto llena el cuadrado que reserva el widget. El selector repite el de Elementor (.elementor-has-item-ratio) para poder ganarle: su regla deja la altura en auto y la foto apaisada no cubre el cuadrado. */ .hm-blog-grid .elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img{ width:100%;height:100%;object-fit:cover; } .hm-blog-grid .elementor-post__title{margin:30px 0 22px;} /* «Leer más» con el mismo botón naranja del diseño */ .hm-blog-grid .elementor-post__read-more{ display:inline-flex;align-items:center;justify-content:center;margin-top:6px; background:var(--hm-orange);color:#fff;border-radius:6px; padding:0 26px;font-size:.72rem;font-weight:600; letter-spacing:.17em;text-transform:uppercase; transition:background .2s ease,transform .2s ease;min-width:199px;min-height:48px;} .hm-blog-grid .elementor-post__read-more:hover{ background:var(--hm-orange-dark);color:#fff;transform:translateY(-2px); } .hm-article__meta{ font-size:.75rem;letter-spacing:.06em;text-transform:uppercase; color:var(--hm-green-800); } .hm-article img{border-radius:var(--hm-radius);} .hm-article p{font-size:.85rem;color:var(--hm-gray);line-height:1.22;} /* Barra de compartir del artículo */ .hm-share{display:flex;align-items:center;gap:12px;font-size:.85rem;font-weight:600;} .hm-share a{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--hm-green-800);} .hm-share a:hover{color:var(--hm-orange);} .hm-share svg{width:100%;height:100%;fill:currentColor;} /* ============================================================ 12. JUNTA DIRECTIVA - Tarjetas y biografía Tarjeta .hm-board-card · el modal lo abre el widget Popup de Pro ============================================================ */ .hm-board-card{ position:relative;border-radius:var(--hm-radius);overflow:hidden;aspect-ratio:337/330; } .hm-board-card::before{ content:"";position:absolute;inset:0;z-index:0; background-image:inherit;background-size:cover;background-position:center; filter:grayscale(1);transition:filter .3s; } .hm-board-card::after{ content:"";position:absolute;inset:0;z-index:1; background:rgba(146,190,175,.55);transition:.3s; } .hm-board-card__label{ position:absolute;left:22px;right:22px;bottom:22px;z-index:3; border:1px solid rgba(255,255,255,.75);border-radius:8px; padding:16px 20px;color:#fff; transition:background .3s,border-color .3s,color .3s; } .hm-board-card__label strong{display:block;font-size:1.05rem;font-weight:500;letter-spacing:-.02em;} .hm-board-card__label > span{font-size:.85rem;opacity:.9;} .hm-board-card__short{ margin:10px 0 0;font-size:.82rem;line-height:1.45; max-height:0;opacity:0;overflow:hidden; transition:max-height .3s ease,opacity .25s ease,margin .3s ease; } .hm-board-card:hover::before{filter:grayscale(0);} .hm-board-card:hover::after{background:rgba(146,190,175,.12);} .hm-board-card:hover .hm-board-card__label{ background:rgba(188,224,213,.9);border-color:transparent;color:var(--hm-green-800); } .hm-board-card:hover .hm-board-card__short, .hm-board-card:focus-within .hm-board-card__short{max-height:130px;opacity:1;} /* En táctil no hay hover: la bio resumida se ve siempre */ @media (hover:none){ .hm-board-card__short{max-height:130px;opacity:1;} .hm-board-card::after{background:rgba(45,79,72,.55);} .hm-board-card::before{filter:grayscale(.35);} } /* Botón «Ver bio» dentro de la tarjeta. El selector incluye .hm-board-card__label a propósito: el botón es un , y el kit global de Elementor define «.elementor-kit-6 a» y su :hover con más peso que una sola clase. Sin ese padre el texto salía en verde en reposo y en naranja sobre naranja oscuro al pasar el cursor, ilegible. En la maqueta el texto es blanco siempre y solo cambia el fondo. */ .hm-board-card__label .hm-board-card__more{ display:inline-block;margin-top:12px; background:var(--hm-orange);color:#fff;border:0;border-radius:6px;cursor:pointer; padding:9px 18px;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; transition:background .2s; } .hm-board-card__label .hm-board-card__more:hover, .hm-board-card__label .hm-board-card__more:focus{background:var(--hm-orange-dark);color:#fff;} /* Cabecera del popup de biografía */ .hm-bio__role{ margin:6px 0 0;color:var(--hm-orange);font-size:.8rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase; } .hm-bio__text p{font-size:.92rem;color:var(--hm-gray);line-height:1.4;} /* ============================================================ 13. NOSOTROS - Misión / Visión y bandas de imagen Tarjeta .hm-mv-card · banda .hm-band ============================================================ */ .hm-mv-card{background:var(--hm-mint);border-radius:var(--hm-radius);} .hm-mv-card svg{width:70px;height:70px;color:var(--hm-green-800);margin-bottom:22px;} .hm-mv-card p{font-size:.88rem;color:var(--hm-green-800);opacity:.85;margin:0;line-height:1.22;} /* Banda de imagen con velo terracota (Nuestra Historia) */ .hm-band img{ width:100%;aspect-ratio:1199/453;object-fit:cover; border-radius:var(--hm-radius);filter:grayscale(1); } .hm-band{position:relative;border-radius:var(--hm-radius);overflow:hidden;} .hm-band::after{ content:"";position:absolute;inset:0; background:rgba(196,96,58,.62);mix-blend-mode:multiply;pointer-events:none; } /* Variante sin velo (Por qué patrocinar) */ .hm-band--plain img{aspect-ratio:1143/501;filter:none;} .hm-band--plain::after{content:none;} @media (max-width:1024px){.hm-band--plain img{aspect-ratio:4/3;}} /* Banner superior de página interior */ .hm-page-banner img{ width:100%;height:clamp(230px,36.2vw,545px);object-fit:cover; } /* ============================================================ 14. PROYECTO FAMILIA - Galería y detalle del proyecto Galería .hm-family-gallery · detalle .hm-project-detail ============================================================ */ .hm-family-gallery img{border-radius:var(--hm-radius);object-fit:cover;width:100%;} .hm-family-gallery__wide img{aspect-ratio:888/405;} .hm-family-gallery__small img{aspect-ratio:348/265;} @media (max-width:1024px){.hm-family-gallery__wide img{aspect-ratio:16/10;}} /* Lista «Lo que hacemos» con viñeta cuadrada mint */ .hm-project-detail ul{margin:0 0 18px;padding-left:0;list-style:none;} .hm-project-detail li{ position:relative;padding-left:26px;margin-bottom:10px; font-size:.92rem;color:var(--hm-gray);line-height:1.22;} .hm-project-detail li::before{ content:"";position:absolute;left:0;top:.55em; width:10px;height:10px;border-radius:3px;background:var(--hm-mint); } /* Llamada destacada al final de cada proyecto */ .hm-callout{ background:var(--hm-mint-soft);border-left:4px solid var(--hm-orange); border-radius:0 var(--hm-radius-sm) var(--hm-radius-sm) 0; padding:20px 24px; } .hm-callout p{margin:0;font-size:.92rem;color:var(--hm-green-800);line-height:1.3;} /* ============================================================ 15. VOLUNTARIADO - Opciones seleccionables Campo de radio del formulario con clase .hm-choices ============================================================ */ .hm-choices .elementor-field-subgroup{display:grid;gap:12px;} .hm-choices .elementor-field-option{position:relative;} .hm-choices .elementor-field-option input[type="radio"]{ position:absolute;opacity:0;width:0;height:0; } .hm-choices .elementor-field-option label{ display:block;cursor:pointer; background:var(--hm-mint-soft);border:2px solid transparent; border-radius:var(--hm-radius-sm);padding:18px 20px; font-size:1rem;font-weight:600;color:var(--hm-green-800); transition:border-color .2s,background .2s,transform .2s; } .hm-choices .elementor-field-option label:hover{transform:translateY(-2px);} .hm-choices .elementor-field-option input:checked + label{ border-color:var(--hm-orange);background:#fff; box-shadow:0 8px 22px rgba(255,90,2,.14); } .hm-choices .elementor-field-option input:focus-visible + label{ outline:2px solid var(--hm-orange);outline-offset:3px; } /* Elementor pone la clase .hm-choices sobre el propio subgrupo, no sobre un envoltorio, asi que ninguna de las reglas de arriba llegaba: las opciones se pintaban como manchas menta en linea, unas sobre otras. */ .elementor-field-subgroup.hm-choices{display:grid;gap:10px;width:100%;} .elementor-field-subgroup.hm-choices .elementor-field-option{display:block;} .elementor-field-subgroup.hm-choices .elementor-field-option label{ display:flex !important;align-items:center;gap:12px; padding:14px 18px;font-size:1rem;font-weight:500;line-height:1.25;} .elementor-field-subgroup.hm-choices .elementor-field-option label::before{ content:"";width:18px;height:18px;border-radius:50%;flex:none; border:2px solid var(--hm-green-700);background:#fff;} .elementor-field-subgroup.hm-choices .elementor-field-option input:checked + label::before{ background:var(--hm-orange);border-color:var(--hm-orange); box-shadow:inset 0 0 0 3px #fff;} /* La etiqueta del grupo si se ve: es el «Tipo de voluntariado» del diseño */ .hm-form .elementor-field-type-radio > .elementor-field-label{ position:static !important;width:auto !important;height:auto !important; clip:auto !important;margin:0 0 10px !important; overflow:visible !important;white-space:normal !important; font-size:.75rem;font-weight:500;letter-spacing:.18em; text-transform:uppercase;color:var(--hm-green-700);} /* Descripción bajo cada opción (widget de texto .hm-choice-note) */ .hm-choice-note{font-size:.85rem;color:var(--hm-gray);line-height:1.22;margin:0;} /* ============================================================ 16. FORMULARIOS - Donar / Voluntariado Formulario con clase .hm-form ============================================================ */ .hm-form .elementor-field-group .elementor-field:not([type="checkbox"]):not([type="radio"]), .hm-form .elementor-field-group .elementor-select-wrapper select, .hm-form .elementor-field-group textarea.elementor-field{ background-color:var(--hm-mint-soft);border:0;border-radius:6px; padding:0 20px;font-size:.92rem;color:var(--hm-green-800);width:100%;height:55px;} /* Las etiquetas no se ven (el diseño usa solo el texto de ejemplo), pero siguen ahí para los lectores de pantalla */ .hm-form .elementor-labels-none .elementor-field-label, .hm-newsletter .elementor-labels-none .elementor-field-label{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .hm-form .elementor-field::placeholder{color:#9BA5A1;} .hm-form .elementor-field:focus{outline:2px solid var(--hm-mint);} /* Campo de teléfono del plugin «Telephone field for Elementor Forms» */ .hm-form .iti{width:100%;} .hm-form .elementor-field-telephone{ background:var(--hm-mint-soft);border:0;border-radius:6px; padding:0 20px;width:100%;height:55px;} .hm-form .iti--allow-dropdown .elementor-field-telephone{padding-left:58px;} .hm-form .iti__flag-container{border-radius:var(--hm-radius-sm) 0 0 var(--hm-radius-sm);} /* --- Alineacion del contenido de todos los campos --- El texto de los campos normales arranca a 20px del borde del campo. Habia dos excepciones: - El desplegable recibia el relleno dos veces, el suyo y el del envoltorio que le anade Elementor, y quedaba 20px mas adentro. - En el telefono la bandera se apoyaba en el borde y quedaba unos 10px mas afuera que el resto. El selector del desplegable repite clases a proposito: la regla generica .hm-form .elementor-field-group .elementor-field:not([type]):not([type]) suma (0,5,0) y hay que igualarla para ganar por orden de aparicion. */ .hm-form .elementor-field-group.elementor-field-type-select .elementor-field.elementor-select-wrapper{ padding-left:0; padding-right:0; } /* El !important es necesario aqui por el mismo motivo que en el relleno del telefono: intlTelInput.min.css se carga despues de esta hoja. */ .hm-form .iti__flag-container, .hm-form .iti--allow-dropdown .iti__flag-container{left:11px !important;} /* Aceptación de términos con aspecto de interruptor */ .hm-switch .elementor-field-option{display:flex;align-items:center;gap:14px;} .hm-switch .elementor-field-option input[type="checkbox"]{ appearance:none;-webkit-appearance:none;margin:0;flex:none; width:44px;height:24px;border-radius:20px;background:var(--hm-green-800); position:relative;cursor:pointer;transition:.22s; } .hm-switch .elementor-field-option input[type="checkbox"]::after{ content:"";position:absolute;top:3px;left:3px;width:20px;height:20px; border-radius:50%;background:var(--hm-orange);transition:.22s; } .hm-switch .elementor-field-option input[type="checkbox"]:checked::after{left:29px;} .hm-switch .elementor-field-option input[type="checkbox"]:focus-visible{ outline:2px solid var(--hm-orange);outline-offset:3px; } .hm-switch .elementor-field-option label{font-size:.9rem;cursor:pointer;margin:0;} /* Barra vertical de meta de recaudación */ .hm-goal{display:flex;flex-direction:column;align-items:center;gap:8px;} .hm-goal svg{width:48px;height:48px;color:var(--hm-green-800);} .hm-goal strong{font-size:1.15rem;color:var(--hm-green-800);} .hm-goal__bar{ width:65px;height:293px;border-radius:40px; background:var(--hm-mint);position:relative;overflow:hidden; } .hm-goal__fill{ position:absolute;bottom:0;left:0;right:0;height:63%; background:var(--hm-green-800);border-radius:40px; } @media (max-width:1024px){ .hm-goal{flex-direction:row;align-items:center;gap:18px;} .hm-goal__bar{width:100%;height:44px;} .hm-goal__fill{top:0;bottom:0;right:auto;width:62%;height:auto;} } /* ============================================================ 17. FOOTER - Pie de página y newsletter Plantilla: Footer ES / Footer EN Medidas tomadas del PSD (columnas 233 / 332 / 506, gap 79) ============================================================ */ .hm-footer{background:var(--hm-green-800);color:#fff;} .hm-footer h1,.hm-footer h2,.hm-footer h3,.hm-footer h4{color:#fff;} .hm-footer p{font-size:.82rem;line-height:1.19;opacity:.95;} /* Las tres columnas guardan la proporción del diseño (233 / 332 / 506) repartiendo el ancho que queda tras la separación de 79 px */ .e-con.hm-footer-col--1{flex:233 1 0;min-width:0;} .e-con.hm-footer-col--2{flex:332 1 0;min-width:0;} .e-con.hm-footer-col--3{flex:506 1 0;min-width:0;} @media (max-width:1024px){ .e-con.hm-footer-col--1, .e-con.hm-footer-col--2{flex:1 1 calc(50% - 40px);} .e-con.hm-footer-col--3{flex:1 1 100%;} } @media (max-width:767px){ .e-con.hm-footer-col--1, .e-con.hm-footer-col--2, .e-con.hm-footer-col--3{flex:1 1 100%;} } /* Enlaces del pie, separados 54px como en el diseño */ .hm-footer-links .elementor-icon-list-item a{ font-size:.84rem;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;color:#fff; } .hm-footer-links .elementor-icon-list-item a:hover{color:var(--hm-mint);} /* Formulario de suscripción: etiqueta encima y campo con línea inferior. El selector incluye el envoltorio para ganar a la regla de Elementor, que coloca etiqueta y campo en la misma fila. */ .hm-newsletter .elementor-form-fields-wrapper .elementor-field-group{ flex-direction:column;align-items:stretch;flex-wrap:nowrap; } .hm-newsletter .elementor-form-fields-wrapper .elementor-field-group > label{ width:100%;flex:0 0 auto; font-size:.82rem;color:#fff;margin:0 0 2px;padding:0; } .hm-newsletter .elementor-form-fields-wrapper .elementor-field-group > .elementor-field, .hm-newsletter .elementor-form-fields-wrapper .elementor-field-group > .iti{ width:100%;flex:1 1 auto;min-width:0; } .hm-newsletter .elementor-field-group .elementor-field, .hm-newsletter .elementor-field-telephone{ background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.65); border-radius:0;padding:0 2px 4px;color:#fff;font-size:.85rem;width:100%;line-height:1.05;height:auto;} .hm-newsletter .elementor-field-group .elementor-field:focus, .hm-newsletter .elementor-field-telephone:focus{outline:0;border-bottom-color:var(--hm-orange);} .hm-newsletter .elementor-field-group .elementor-field::placeholder{color:rgba(255,255,255,.7);} .hm-newsletter .iti--allow-dropdown .elementor-field-telephone{padding-left:58px;} .hm-newsletter .iti__flag-container{--iti-arrow-color:#fff;} .hm-newsletter .iti__selected-dial-code{color:#fff;} .hm-newsletter .elementor-message{color:#fff;} /* El botón de suscripción va a la derecha y con ancho propio, no a todo el ancho. Se repite la clase del widget para ganar a la regla que Elementor genera para este formulario. */ .hm-newsletter .elementor-field-type-submit{margin-left:auto;justify-content:flex-end;} .hm-newsletter .elementor-field-type-submit .elementor-button{min-width:162px;min-height:39px;} /* Iconos sociales del pie */ .hm-social{display:flex;align-items:center;gap:6px;font-size:.7rem;letter-spacing:.05em;} .hm-social a{display:inline-flex;width:14px;height:14px;align-items:center;justify-content:center;color:#fff;} .hm-social a:hover{color:var(--hm-mint);} .hm-social svg{width:100%;height:100%;fill:currentColor;} /* ============================================================ ACCESIBILIDAD - respeta la preferencia de movimiento reducido ============================================================ */ @media (prefers-reduced-motion:reduce){ .hm-project-card,.hm-board-card,.hm-board-card img,.hm-board-card__short, .hm-choices .elementor-field-option label{transition:none !important;} } /* ============================================================ 18. AJUSTES DE MONTAJE Reglas que acompañan a cómo está armado cada widget en Elementor. Indican el área y la clase del contenedor. ============================================================ */ /* GLOBAL - bajada centrada bajo el titular de sección */ .hm-section-sub{ max-width:730px;width:100%;align-self:center; margin:26px auto 0;text-align:center; color:var(--hm-gray);font-size:.95rem;line-height:1.22; } .hm-section-sub p{margin:0;font-size:.95rem;} /* GLOBAL - botón de la marca fuera del widget Botón (p. ej. «Volver») */ .hm-btn{ display:inline-flex;align-items:center;justify-content:center; background:var(--hm-orange);color:#fff;border:0;cursor:pointer; padding:0 26px;border-radius:6px; font-size:.8rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase; transition:background .2s ease,transform .2s ease;min-width:199px;min-height:48px;} .hm-btn:hover{background:var(--hm-orange-dark);color:#fff;transform:translateY(-2px);} /* HOME - las tarjetas de proyecto usan imagen de fondo del contenedor */ .hm-project-card{background-size:cover;background-position:center;} .hm-project-card > *{position:relative;z-index:2;} .hm-project-card__title{margin:0;} /* HOME - miniaturas de la galería de país */ .hm-mini-gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--hm-radius-sm);} /* HOME / IMPACTO - el panel del mapa y su rejilla de dos columnas */ .hm-map-panel .e-n-tabs-content > .e-con{gap:40px;} /* NOSOTROS - media página con fotografía */ .hm-split__media img{aspect-ratio:535/556;object-fit:cover;width:100%;border-radius:var(--hm-radius);} /* JUNTA DIRECTIVA - la tarjeta usa imagen de fondo del contenedor */ .hm-board-card{background-size:cover;background-position:center;} .hm-board-card > *{position:relative;z-index:2;height:100%;} .hm-board-card .elementor-widget-container{height:100%;} /* VOLUNTARIADO - fichas explicativas de cada forma de sumarse */ .hm-vol-card__icon svg{width:38px;height:38px;color:var(--hm-green-800);flex:none;} .hm-vol-card h3{margin:0 0 4px;} /* FORMULARIOS - media página de fotografía y media de formulario */ .hm-form-page{min-height:830px;} .hm-form-body{justify-content:center;} @media (max-width:1024px){ .hm-form-page{min-height:0;} .hm-donate-layout{flex-direction:column;} } /* BLOG - pie del artículo */ .hm-article-foot{margin-top:50px;} .hm-article__cover img{aspect-ratio:16/7;object-fit:cover;border-radius:var(--hm-radius);width:100%;} @media (max-width:767px){ .hm-article-foot{flex-direction:column;align-items:flex-start;} } /* CARRUSELES - indicadores con el verde de la marca */ .hm-projects-carousel .swiper-pagination-bullet, .hm-testi-carousel .swiper-pagination-bullet{background:var(--hm-mint);opacity:1;} .hm-projects-carousel .swiper-pagination-bullet-active, .hm-testi-carousel .swiper-pagination-bullet-active{background:var(--hm-green-800);} /* ============================================================ 19. BLOG - Maquetación del cuerpo del artículo Clases usadas dentro del contenido de la entrada ============================================================ */ .hm-article-split{ display:grid;grid-template-columns:816fr 458fr; gap:27px;align-items:start;margin:0 0 23px; } .hm-article-split--rev{grid-template-columns:574fr 709fr;} .hm-article-split img{ width:100%;border-radius:var(--hm-radius); object-fit:cover;aspect-ratio:816/438; } .hm-article-split p, .hm-article-full p{font-size:.85rem;color:var(--hm-gray);line-height:1.22;} @media (max-width:1024px){ .hm-article-split, .hm-article-split--rev{grid-template-columns:1fr;gap:24px;} .hm-article-split--rev img{order:-1;} } /* ============================================================ 20. COLUMNAS Clase .hm-col en cada columna de una fila de Elementor. Reparten el ancho con flex, de modo que la separación entre columnas nunca las desborda (los porcentajes fijos sí lo hacían). .hm-col--2 = fila de dos · .hm-col--3 = fila de tres ============================================================ */ /* Se usa .e-con.hm-col para ganar a la regla base de los contenedores de Elementor, que fija flex:0 1 auto. */ .e-con.hm-col{flex:1 1 0;min-width:0;} @media (max-width:1024px){ .e-con.hm-col--2{flex:1 1 100%;} .e-con.hm-col--3{flex:1 1 calc(50% - 13px);} } @media (max-width:767px){ .e-con.hm-col{flex:1 1 100%;} } /* HERO - el contenido se alinea con la retícula de 1240 del sitio */ .hm-hero .swiper-slide-inner{max-width:1358px;margin-left:auto;margin-right:auto;} /* ============================================================ 21. CALIBRADO CONTRA LOS PSD (agosto 2026) Medidas tomadas de ../Diseno sobre lienzo de 1500 px que un widget de Elementor no puede resolver desde su panel. ============================================================ */ /* Boton de marca: centrado del contenido. La medida ya no es fija (ver bloque 25): el ancho y el alto los da el relleno. */ .elementor-widget-button .elementor-button, .hm-form .elementor-field-type-submit .elementor-button, .hm-btn{ display:inline-flex;align-items:center;justify-content:center; } /* Titular de pagina: en el diseno va siempre en una sola linea. El mas largo ("Materiales espirituales y educativos") mide 1108 px mas el relleno del resaltado, asi que se deja holgura hasta 1200. */ .hm-hl .elementor-heading-title{max-width:1200px;margin-left:auto;margin-right:auto;} /* Paginas de formulario: el titular acompaña al ancho de la columna del formulario (484). En ingles cabia a 73 px; en español no, y se salia por la derecha de los campos. Baja a 55 y se le deja el desborde justo para no partirse en dos lineas. */ @media (min-width:1025px){ /* El titular se alinea con la columna de campos (484), como en el PSD */ .hm-form-page .hm-hl{width:100% !important;max-width:484px !important;} .hm-form-page .hm-hl .elementor-heading-title{ font-size:3.2rem !important;line-height:1.08 !important; width:max-content;max-width:none;} } /* Anchos de bloque del PSD (el ancho de seccion es 1310) */ .hm-band img{max-width:1201px;margin-left:auto;margin-right:auto;} .hm-band--plain img{max-width:1143px;} .hm-country-photo img{max-width:1143px;margin-left:auto;margin-right:auto;} .hm-stats{max-width:1106px;margin-left:auto;margin-right:auto;} .hm-two-col{max-width:1205px;margin-left:auto;margin-right:auto;} .hm-split{max-width:1125px;margin-left:auto;margin-right:auto;} .hm-family-gallery{max-width:890px;margin-left:auto;margin-right:auto;} .hm-project-detail{max-width:890px;margin-left:auto;margin-right:auto;} .hm-mini-gallery{max-width:436px;} /* Galeria de Proyecto Familia: la segunda pequena es mas ancha (533/265) */ .hm-family-gallery > .hm-family-gallery__small:nth-child(3) img{aspect-ratio:533/265;} /* Blog: titular de tarjeta a 27 px con tracking cerrado */ .hm-blog-grid .elementor-post__title, .hm-blog-grid .elementor-post__title a{font-size:1.15rem;line-height:1.14;letter-spacing:-.08em;} .hm-blog-grid .elementor-post__excerpt p{font-size:.85rem;line-height:1.22;} /* Articulo: el titular rompe a 800 px, como en 14 INTERN BLOG */ .hm-article .elementor-heading-title{max-width:800px;} /* Interruptor de terminos: pista de 44 px, la perilla recorre 22 */ .hm-switch .elementor-field-option input[type="checkbox"]:checked::after{left:22px;} /* Movil: el boton deja de tener medida fija para no desbordar */ @media (max-width:767px){ .elementor-widget-button .elementor-button, .hm-form .elementor-field-type-submit .elementor-button, .hm-btn{min-width:0;} .hm-two-col,.hm-split,.hm-family-gallery,.hm-project-detail,.hm-stats{max-width:none;} .hm-family-gallery > .hm-family-gallery__small:nth-child(3) img{aspect-ratio:16/10;} } /* Banda de menu de 68 px: 24 + 20 de linea + 24 */ .hm-nav-band .elementor-nav-menu--main .elementor-item{padding-top:24px;padding-bottom:24px;} /* Newsletter del pie: etiqueta sobre linea, sin la altura de los campos del formulario */ .hm-newsletter .elementor-field-group{row-gap:0;} .hm-newsletter .elementor-field-group .elementor-field, .hm-newsletter .elementor-field-telephone{height:auto;min-height:0;} /* Enlaces del pie separados 58 px (en el diseno el hueco no es relleno del enlace) */ /* Con hueco de rejilla, el elemento oculto del menu movil dejaba un hueco final de 58 px, asi que la separacion va como margen entre elementos. */ .hm-footer-links .elementor-nav-menu{display:block;} .hm-footer-links .elementor-nav-menu > li{margin:0;} .hm-footer-links .elementor-nav-menu > li + li{margin-top:58px;} .hm-footer-links .elementor-nav-menu--main .elementor-item{font-size:.84rem;letter-spacing:.13em;padding:0;} /* El titular del pie mide 27 px, no los 55 del titular de bloque */ .hm-footer .elementor-widget-heading .elementor-heading-title{ font-size:1.45rem;line-height:1.1;letter-spacing:-.035em; } /* ============================================================ 22. AJUSTES FINOS DEL CALIBRADO Tamanos de componente que la tipografia global de Elementor pisaba, y anchos de rejilla del PSD. ============================================================ */ /* Los titulares de componente llevan su propio tamano: la tipografia global Titular de bloque (55 px) es solo para los titulares de bloque. */ .hm-testimonial__name .elementor-heading-title{font-size:1.05rem;line-height:1.1;letter-spacing:-.075em;} .hm-project-card__title .elementor-heading-title{font-size:1.7rem;line-height:1.1;letter-spacing:-.055em;} .hm-vol-card .elementor-heading-title{font-size:1rem;line-height:1.2;letter-spacing:0;} .hm-board-card__label strong{font-size:1.05rem;line-height:1.2;} .hm-article__meta{line-height:1.2;} /* La linea de datos son tres tramos: tiempo de lectura, separador y fecha */ .hm-article__meta .elementor-shortcode{display:flex;gap:10px;align-items:baseline;} .hm-article__meta span[aria-hidden]{opacity:.45;} /* wpautop mete un parrafo vacio detras de la imagen suelta del articulo y ese parrafo ocupaba la segunda celda de la rejilla, empujando el texto a una fila nueva por debajo de la foto. */ .hm-article-split > p:empty{display:none;} /* Rejillas: los anchos del PSD */ /* Mision y Vision: el 1123 es el ancho de la FILA (553 + 16 + 553 en el PSD). Antes la regla caia sobre cada columna y las dos tarjetas se apilaban por desbordar la fila. */ .e-con:has(> .e-con > .hm-mv-card), .e-con-inner:has(> .e-con > .hm-mv-card){max-width:1123px;margin-left:auto;margin-right:auto;} .hm-mv-card{min-height:453px;} .e-con:has(> .hm-board-card){max-width:1054px;margin-left:auto;margin-right:auto;} .e-con:has(> .e-con > .hm-board-card){max-width:1054px;margin-left:auto;margin-right:auto;} /* ------------------------------------------------------------ Filas que Elementor guarda con el ancho de columna en % (49,5 o 32,67) y la separacion aparte: la suma pasaba del contenedor y la ultima columna caia a la fila siguiente. Se reparte con flex, que ya descuenta la separacion. ------------------------------------------------------------ */ @media (min-width:1025px){ .hm-two-col > .e-con, .hm-split > .e-con, .hm-stats > .e-con, .e-con:has(> .e-con > .hm-mv-card) > .e-con{flex:1 1 0;min-width:0;} /* Junta directiva: tres tarjetas de 334 por fila (334x3 + 26x2 = 1054) */ .e-con:has(> .e-con > .hm-board-card) > .e-con{ flex:0 0 calc((100% - 52px)/3);min-width:0;} } /* Carruseles: el contenido mide 1310, no el ancho de la seccion */ .hm-testi-carousel .e-n-carousel{max-width:1310px;margin-left:auto;margin-right:auto;} .hm-projects-carousel .e-n-carousel{max-width:1375px;margin-left:auto;margin-right:auto;} .hm-testi-carousel .swiper-slide > .e-con{column-gap:20px;} /* Tres testimonios por diapositiva en una sola fila: con el ancho fijo de Elementor (428 px) la suma pasaba de 1310 y la tercera tarjeta bajaba. */ @media (min-width:1025px){ .hm-testi-carousel .swiper-slide > .e-con{flex-wrap:nowrap;} .hm-testi-carousel .swiper-slide > .e-con > .e-con{width:calc((100% - 40px)/3);flex:0 0 auto;} } /* Las tarjetas de proyecto guardan la proporcion 452x482 del diseno */ .hm-projects-carousel .swiper-slide{height:auto;} .hm-project-card{height:auto;} /* Foto del bloque partido: 535x556 */ .hm-split__media, .hm-split__media img{max-width:535px;} /* Tarjeta de proyecto: 452x482. La proporcion no se aplica dentro del carrusel, asi que se fija el alto, que es lo mismo con ancho fijo. */ @media (min-width:1025px){ .hm-project-card{min-height:482px;aspect-ratio:auto;} } /* ============================================================ 23. INTERRUPTOR DE TERMINOS La clase .hm-switch la pone Elementor sobre el propio input, no sobre un envoltorio, asi que las reglas del bloque 16 nunca llegaban a aplicarse y la casilla se veia sin estilo. ============================================================ */ /* El widget de formulario pinta el fondo de todo .elementor-field con una especificidad de 0-5-0, asi que el interruptor la iguala y la supera. */ input[type="checkbox"].hm-switch, .hm-form .elementor-field-group input[type="checkbox"].hm-switch.elementor-field, .elementor-field-group input[type="checkbox"].hm-switch.elementor-field{ appearance:none;-webkit-appearance:none; margin:0;flex:0 0 auto; width:44px;min-width:44px;height:24px;min-height:24px; padding:0;border:0; /* El widget de formulario pinta fondo y radio de todo .elementor-field con una especificidad de 0-6-0 que ninguna regla de tema iguala sin subir el peso; el interruptor no es algo que Elementor pueda configurar, asi que estas dos propiedades se marcan. */ border-radius:20px !important; background:var(--hm-green-800) !important; box-shadow:none; position:relative;cursor:pointer;transition:background .22s; } .elementor-field-group input[type="checkbox"].hm-switch::after, input[type="checkbox"].hm-switch::after{ content:"";position:absolute;top:2px;left:2px; width:20px;height:20px;border-radius:50%; background:var(--hm-orange);transition:left .22s; } input[type="checkbox"].hm-switch:checked::after{left:22px;} input[type="checkbox"].hm-switch:focus-visible{outline:2px solid var(--hm-orange);outline-offset:3px;} /* La etiqueta va al lado del interruptor, no debajo */ .elementor-field-type-acceptance .elementor-field-subgroup{margin:0;} .elementor-field-type-acceptance .elementor-field-option{ display:flex;align-items:center;gap:12px; } .elementor-field-type-acceptance .elementor-field-option label{ font-size:.9rem;line-height:1.22;margin:0;cursor:pointer; } /* Campo de telefono: el selector de pais tapaba el texto de ejemplo */ .hm-form .iti input.elementor-field-telephone, .hm-newsletter .iti input.elementor-field-telephone{padding-left:56px;} /* Boton del hero: 199x48 como el resto (el widget Slides tiene su propio boton) */ .hm-hero .elementor-slide-button{ min-width:199px;min-height:48px;padding:0 26px; display:inline-flex;align-items:center;justify-content:center; font-size:.8rem;letter-spacing:.17em;font-weight:500; } @media (max-width:767px){.hm-hero .elementor-slide-button{min-width:0;}} /* ============================================================ 24. TAMANOS CONTRA LA MAQUETA DE REFERENCIA https://www.promos.digital/Estructuras/HopeMission/diseno/ Titulares y parrafos que usan una tipografia global pero en la maqueta miden menos. La regla que Elementor genera para cada widget pesa 0-4-0 (.elementor-N .elementor-element-XXX .titulo), asi que las de titular hay que marcarlas para que lleguen; las de parrafo no, porque apuntan al

y no al envoltorio. ============================================================ */ /* Tarjeta de material (Materiales espirituales): 1,9 rem / 30,4 px */ .hm-material .elementor-widget-heading .elementor-heading-title{font-size:1.9rem !important;} /* Mision y Vision: 2 rem / 32 px */ .hm-mv-card .elementor-widget-heading .elementor-heading-title{font-size:2rem !important;} /* Proyecto Familia: titular de pais 1,8 rem y subtitulo 1 rem */ .hm-project-detail .elementor-widget-heading h3.elementor-heading-title{font-size:1.8rem !important;} .hm-project-detail .elementor-widget-heading h4.elementor-heading-title{font-size:1rem !important;} /* Titular del articulo del blog: 3 rem / 48 px */ .elementor-widget-theme-post-title .elementor-heading-title{font-size:3rem !important;} /* Parrafos de los proyectos: 0,92 rem / 14,72 px */ .hm-project-detail p{font-size:.92rem;} /* Enlace de utilidad de la cabecera: 0,82 rem (usa la tipografia global Texto) */ .hm-headerlink .elementor-heading-title, .hm-headerlink a{font-size:.82rem !important;} /* Etiqueta del contador de estadisticas: 1 rem (Elementor la trae a 19 px) */ .hm-stat .elementor-counter-title{font-size:1rem;} /* Opciones de voluntariado: 1 rem (el widget de formulario impone el tamano de campo) */ .elementor-field-subgroup.hm-choices .elementor-field-option label{font-size:1rem !important;} /* ============================================================ 25. SEGUNDA RONDA CONTRA LA MAQUETA (30-ago-2026) https://www.promos.digital/Estructuras/HopeMission/diseno/ ============================================================ */ /* --- Logotipo: el radio de 14 px del kit de Elementor es para las fotos de contenido, no para la marca. --- */ .hm-brand img, .hm-footer .hm-brand img, .hm-footer .elementor-widget-theme-site-logo img, .hm-header .elementor-widget-image img, .hm-footer .elementor-widget-image img{border-radius:0 !important;} /* --- Botones: la maqueta no usa medida fija; manda el relleno. .btn = 14/30 y radio 8 · .btn--sm (Donar de cabecera) = 11/22 --- */ .elementor-widget-button .elementor-button, .hm-form .elementor-field-type-submit .elementor-button, .hm-btn{ min-width:0;min-height:0; padding:14px 30px;border-radius:8px;line-height:1.6 !important; } .hm-header .elementor-widget-button .elementor-button{ padding:11px 22px !important;font-size:.72rem !important;line-height:1.6 !important; } /* El de la newsletter conserva su medida del PSD (162x39) */ .hm-newsletter .elementor-field-type-submit .elementor-button{ min-width:162px;min-height:39px;padding:0 20px; } /* Boton del hero: sin borde, mismo relleno y radio que el resto */ .hm-hero .elementor-slide-button, .hm-hero .elementor-slides .elementor-slide-button{ min-width:0;min-height:0;border:0; padding:14px 30px;border-radius:8px;line-height:1.6 !important; } /* --- Tarjetas de pais del carrusel: en reposo en blanco y negro, al pasar el cursor viran a sepia. --- */ .hm-project-card::before{transition:filter .35s ease;} .hm-project-card::after, .hm-project-card--mint::after, .hm-project-card--terra::after{ background:rgba(0,0,0,.38);transition:background .35s ease; } .hm-project-card:hover::before, .hm-project-card:focus-within::before{filter:grayscale(.2) sepia(.6);} .hm-project-card:hover::after, .hm-project-card:focus-within::after{background:rgba(198,92,48,.52);} @media (prefers-reduced-motion:reduce){ .hm-project-card::before,.hm-project-card::after{transition:none !important;} } /* --- Bolitas de los carruseles: 9 px como en la maqueta --- */ .hm-projects-carousel .swiper-pagination, .hm-testi-carousel .swiper-pagination{ --swiper-pagination-bullet-width:9px; --swiper-pagination-bullet-height:9px; --swiper-pagination-bullet-size:9px; --swiper-pagination-bullet-horizontal-gap:4.5px; } .hm-projects-carousel .swiper-pagination-bullet, .hm-testi-carousel .swiper-pagination-bullet{ width:9px;height:9px;margin:0 4.5px; } /* --- Submenu: caja blanca con sombra suave, como en la maqueta. Elementor anida el desplegable de escritorio (ul.sub-menu) dentro de .elementor-nav-menu--main y llama a sus enlaces .elementor-sub-item; el desplegable del movil es un