/* ========================================================================== SEPRI ClubCare — tema hijo de Blocksy Fuente de verdad: Fase 1 congelada (HANDOFF-FASE-1.md, index.html, assets/css/styles.css del mockup). Este archivo traslada ese sistema a WordPress; no lo rediseña. Etapa 1: fuentes autoalojadas, tokens y base tipográfica. Etapa 2: foco, niveles de fondo, botón CTA, header y footer de Blocksy. Etapa 3: ECG, hero, columnas del mockup, tabla y timeline (tanda A); íconos, botón navy, fila con foto, métricas, Qué cubrimos y Ecosistema (tanda B); La app con teléfono CSS, Modelo de contratación, Contacto y scroll effects globales (tanda C). Etapa 4: formularios WPForms (bloques 27–30). Etapa 4.5: dirección de arte por planos y scroll por capas (31+). ========================================================================== */ /* -------------------------------------------------------------------------- 0. FUENTES AUTOALOJADAS — sin dependencia de Google Fonts en cada carga Gelasio y Carlito son sustitutos métricos de Cambria y Calibri, las tipografías del Manual. Subconjunto latino, woff2. Gelasio normal es una fuente variable: un solo archivo cubre 400, 600 y 700. -------------------------------------------------------------------------- */ @font-face { font-family: 'Gelasio'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/gelasio-normal-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Gelasio'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/gelasio-italic-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Carlito'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/carlito-normal-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Carlito'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/carlito-normal-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Carlito'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/carlito-italic-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -------------------------------------------------------------------------- 1. TOKENS — copiados textualmente del mockup de Fase 1 -------------------------------------------------------------------------- */ :root { /* ---- Colores oficiales del Manual ---- */ --navy: #001F3F; --celeste: #4DA6D6; --naranja: #FF6B35; --offwhite: #F7F9FB; /* ---- Derivados. Existen sólo para contraste AA y para dar capas. Ninguno reemplaza a los cuatro de arriba. ---- */ --navy-800: #0A2C4E; /* paneles y huecos de foto sobre navy */ --navy-700: #143A61; /* hover de botón navy */ --celeste-texto: #1F6B94; /* el celeste puro no llega a AA como texto */ --celeste-claro: #8ECFEC; /* acento tipográfico sobre navy */ --celeste-lavado: #EEF6FB; /* cuarto nivel de fondo: profundidad sin blobs */ --celeste-tinte: #DBEDF7; --naranja-600: #E85520; /* hover */ --blanco: #FFFFFF; --tinta: #001F3F; --tinta-2: #55697D; /* texto secundario sobre claro — AA 5.67:1 */ --tinta-navy: #A9C2D9; /* texto secundario sobre navy */ --linea: #DDE4EC; --linea-fuerte: #C4D0DC; --linea-navy: rgba(255, 255, 255, 0.16); /* ---- Tipografía ---- Gelasio y Carlito son sustitutos métricos de Cambria y Calibri. */ --serif: 'Gelasio', Cambria, Georgia, serif; --sans: 'Carlito', Calibri, -apple-system, 'Segoe UI', Roboto, sans-serif; /* 38 → 58. El techo está medido, no elegido a ojo: a 58px la línea más larga del titular ("Prevención activa.") mide 533px y la columna de texto del hero da 559px. Por encima de eso el titular se parte solo. */ --fs-display: clamp(2.375rem, 1.8rem + 2.55vw, 3.625rem); --fs-h2: clamp(2rem, 1.72rem + 1.11vw, 2.625rem); /* 32 → 42 (VEP jerarquía, 28/09) */ --fs-h2-sec: clamp(1.5rem, 1.32rem + 0.9vw, 2rem); /* 24 → 32, jerarquía secundaria */ --fs-h3: clamp(1.125rem, 1.06rem + 0.35vw, 1.375rem);/* 18 → 22 */ --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* 18 → 20 */ --fs-body: 1.0625rem; /* 17 — piso de legibilidad para 50+ */ /* Piso de teléfono: nada de copy secundario por debajo de 15 px. El decisor institucional puede tener 50 años o más y llega desde WhatsApp, así que mobile no hereda la escala chica del desktop. Los valores de escritorio se restauran en el breakpoint de 900. */ --fs-small: 1rem; /* 16 en teléfono · 15 en desktop */ --fs-caption: 0.9375rem; /* 15 en teléfono · 13 en desktop */ --fs-eyebrow: 0.8125rem; /* 13 en teléfono · 12 en desktop */ /* Alto mínimo de cualquier control táctil */ --tap: 44px; /* ---- Firma ECG. Un solo juego de variables gobierna todas las apariciones; ver el bloque 6. ---- */ --ecg-color: #FF6B35; /* naranja institucional, único color del trazo */ --ecg-dur: 6s; /* recorrido de extremo a extremo */ --ecg-estela: 320px; /* largo de la estela en recorridos horizontales */ --ecg-estela-y: 42px; /* ídem en el riel, en unidades del viewBox */ --ecg-recorrido-y: 100px; /* alto del viewBox del conector */ --ecg-grosor: 2px; /* grosor del trazo */ /* ---- Ritmo ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --ancho: 1200px; --gutter: 20px; --seccion-y: clamp(56px, 8vw, 120px); --seccion-y-sec: clamp(44px, 5.5vw, 80px); /* secciones de jerarquía secundaria */ --header-h: 76px; /* ---- Formas ---- */ --r-sm: 4px; --r-md: 8px; --r-pill: 999px; /* Encuadre de las fotos. Provisional hasta tener los archivos finales: el recorte lo resuelve object-fit, así que cualquier proporción de origen entra sin romper el layout. */ --media-pos: center; } /* Escala de escritorio: se restauran los valores originales para no alterar la composición desktop ya aprobada. */ @media (min-width: 900px) { :root { --fs-small: 0.9375rem; /* 15 */ --fs-caption: 0.8125rem; /* 13 */ --fs-eyebrow: 0.75rem; /* 12 */ } } /* -------------------------------------------------------------------------- 2. BASE Blocksy toma la familia de su variable de pila por defecto; apuntarla a Carlito hace que header, footer, formularios y páginas legales hereden la tipografía de marca sin cargar fuentes desde Google. Elementor recibe las mismas familias desde sus Ajustes globales. -------------------------------------------------------------------------- */ :root { --theme-font-stack-default: var(--sans); } html { scroll-behavior: smooth; /* Blocksy ya descuenta la altura del header fijo al ir a un ancla; estos 12 px son el respiro entre el header y la sección, como en el mockup. Con la altura del header sumada acá, el destino quedaba 67 px más abajo. */ scroll-padding-top: 12px; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); color: var(--tinta); -webkit-font-smoothing: antialiased; } /* Contenido fuera de Elementor (páginas legales, /gracias): mismos titulares que la landing. */ .entry-content h1, .entry-content h2, .entry-content h3, .page-title { font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; color: var(--tinta); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Contenedor de Blocksy = .wrap del mockup: 1160 px de contenido y 20 px de margen lateral fijo. Blocksy sólo admite márgenes en porcentaje; esto alinea header y footer con las secciones de Elementor (1160 + 20 px). */ :root { --theme-normal-container-max-width: 1160px; --theme-container-edge-spacing: calc(100vw - 2 * var(--gutter)); } /* Oculto a la vista, disponible para lectores de pantalla */ .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. ANILLO DE FOCO SEGÚN EL FONDO Naranja sobre off-white da 2.70:1 y WCAG pide 3:1 para indicadores no textuales. Navy en claro (16.6:1), naranja en oscuro (5.81:1). Vive fuera del control (outline-offset), así que no lo afecta el color del botón. -------------------------------------------------------------------------- */ :focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: var(--r-sm); } .s-navy :focus-visible, #offcanvas :focus-visible, .ct-footer :focus-visible { outline-color: var(--naranja); } /* -------------------------------------------------------------------------- 4. NIVELES DE FONDO — clases para los Containers de sección Blanco → off-white → lavado celeste → navy. La clase da el fondo y el contexto (color de texto, anillo de foco); si en Elementor se elige otro fondo, gana el de Elementor. -------------------------------------------------------------------------- */ .s-blanco { background-color: var(--blanco); } .s-off { background-color: var(--offwhite); } .s-lavado { background-color: var(--celeste-lavado); } .s-navy { background-color: var(--navy); color: var(--blanco); } /* Ayudas tipográficas que dependen del contexto */ /* Antetítulos (30/09): naranja de marca en todo el sitio. !important porque Elementor pinta el color del widget con más especificidad. Sobre claro #FF6B35 da 2,8:1 (por debajo de AA para texto chico: excepción pedida por el cliente, como el texto blanco del botón). */ .eyebrow, .s-navy .eyebrow, .eyebrow .elementor-heading-title, .badge .elementor-heading-title { color: var(--naranja) !important; } .lead { color: var(--tinta-2); } .s-navy .lead { color: var(--tinta-navy); } .acento { color: var(--celeste-claro); } /* -------------------------------------------------------------------------- 5. BOTÓN CTA NARANJA — componente único para todo el sitio Una sola clase, .btn-cta, sirve para los tres orígenes posibles: - un enlace o botón que ya la lleva (header de Blocksy, WPForms); - un widget Botón de Elementor con la clase en "Avanzado > Clases CSS". No hace falta agregar ícono: la flecha la dibuja este componente. Normal: fondo naranja #FF6B35, texto y flecha blancos, flecha a la derecha. EXCEPCIÓN DE CONTRASTE ACEPTADA POR EL CLIENTE (29/09): blanco sobre #FF6B35 = 2,84:1, por debajo de AA (antes: navy 5,84:1). Hover / :focus-visible: fondo navy, texto y flecha blancos (16.6:1), la flecha pasa a la izquierda en un solo movimiento. El ancho no cambia: el texto se corre intercambiando el relleno izquierdo y el derecho. El borde es naranja (invisible sobre el fondo) en normal y navy en hover y foco: sobre las secciones navy el botón no dibuja contorno en ese estado. -------------------------------------------------------------------------- */ :root { --sepri-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13M11 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } body :is(a, button, input).btn-cta, body .btn-cta .elementor-button, body .btn-cta .wpforms-submit { --btn-flecha: 18px; --btn-gap: var(--sp-3); --btn-salto: calc(var(--btn-flecha) + var(--btn-gap)); --btn-y: 15px; --btn-x: 25px; --btn-dur: 0.3s; position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: var(--btn-y) calc(var(--btn-x) + var(--btn-salto)) var(--btn-y) var(--btn-x); background: var(--naranja); color: var(--blanco); border: 1px solid var(--naranja); border-radius: var(--r-pill); box-shadow: none; font-family: var(--sans); font-size: var(--fs-small); font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer; transform: none; transition: background-color var(--btn-dur) ease, color var(--btn-dur) ease, padding var(--btn-dur) ease; } /* Las dos flechas: la visible a la derecha y la gemela que entra por la izquierda. Dibujadas con máscara, heredan el color del texto. */ body :is(a, button, input).btn-cta::before, body :is(a, button, input).btn-cta::after, body .btn-cta .elementor-button::before, body .btn-cta .elementor-button::after { content: ''; /* Blocksy usa ::before para una sombra difusa oculta: se anula entera */ display: block; inset: auto; z-index: 1; opacity: 1; filter: none; border-radius: 0; box-shadow: none; position: absolute; top: 50%; width: var(--btn-flecha); height: var(--btn-flecha); margin-top: calc(var(--btn-flecha) / -2); background: currentColor; -webkit-mask: var(--sepri-flecha) center / contain no-repeat; mask: var(--sepri-flecha) center / contain no-repeat; transition: transform var(--btn-dur) ease; pointer-events: none; } body :is(a, button, input).btn-cta::after, body .btn-cta .elementor-button::after { right: var(--btn-x); } body :is(a, button, input).btn-cta::before, body .btn-cta .elementor-button::before { left: var(--btn-x); transform: translateX(calc(-1 * (var(--btn-x) + var(--btn-flecha)))); } /* Estado invertido: igual con teclado que con mouse */ body :is(a, button, input).btn-cta:focus-visible, body .btn-cta .elementor-button:focus-visible, body .btn-cta .wpforms-submit:focus-visible { transform: none; border-color: var(--navy); background: var(--navy); color: var(--blanco); padding-left: calc(var(--btn-x) + var(--btn-salto)); padding-right: var(--btn-x); } body :is(a, button, input).btn-cta:focus-visible::before, body .btn-cta .elementor-button:focus-visible::before { transform: none; opacity: 1; } body :is(a, button, input).btn-cta:focus-visible::after, body .btn-cta .elementor-button:focus-visible::after { transform: translateX(calc(var(--btn-x) + var(--btn-flecha))); } /* En táctil no hay hover: el estado normal queda estable */ @media (hover: hover) { body :is(a, button, input).btn-cta:hover, body .btn-cta .elementor-button:hover, body .btn-cta .wpforms-submit:hover { transform: none; /* Blocksy levanta los botones 3 px: acá no */ border-color: var(--navy); /* y les cambia el borde: acá sigue navy, igual que el fondo */ background: var(--navy); color: var(--blanco); padding-left: calc(var(--btn-x) + var(--btn-salto)); padding-right: var(--btn-x); } body :is(a, button, input).btn-cta:hover::before, body .btn-cta .elementor-button:hover::before { transform: none; opacity: 1; } body :is(a, button, input).btn-cta:hover::after, body .btn-cta .elementor-button:hover::after { transform: translateX(calc(var(--btn-x) + var(--btn-flecha))); } } /* Variante chica (header): relleno 11/19 y texto de nota */ body :is(a, button, input).btn-cta.btn-sm, body .btn-cta.btn-sm .elementor-button { --btn-y: 11px; --btn-x: 19px; font-size: var(--fs-caption); } /* Movimiento reducido: cambian los colores, nada se desplaza */ @media (prefers-reduced-motion: reduce) { body :is(a, button, input).btn-cta, body .btn-cta .elementor-button, body .btn-cta .wpforms-submit { transition: background-color var(--btn-dur) ease, color var(--btn-dur) ease; } body :is(a, button, input).btn-cta:is(:hover, :focus-visible), body .btn-cta .elementor-button:is(:hover, :focus-visible), body .btn-cta .wpforms-submit:is(:hover, :focus-visible) { padding-left: var(--btn-x); padding-right: calc(var(--btn-x) + var(--btn-salto)); } body :is(a, button, input).btn-cta:is(:hover, :focus-visible)::after, body .btn-cta .elementor-button:is(:hover, :focus-visible)::after { transform: none; } body :is(a, button, input).btn-cta:is(:hover, :focus-visible)::before, body .btn-cta .elementor-button:is(:hover, :focus-visible)::before { opacity: 1; transform: translateX(calc(-1 * (var(--btn-x) + var(--btn-flecha)))); } } /* -------------------------------------------------------------------------- 6. HEADER (Blocksy) — ajustes que el Personalizador no expone La estructura, el fondo off-white (desde el hero claro), el header fijo con encogimiento, el logo positivo y los colores del menú se configuran en Blocksy; esto sólo completa detalles del mockup. -------------------------------------------------------------------------- */ /* Botón del menú mobile: 46 px como en el mockup (Blocksy da 42, por debajo del mínimo táctil de 44). Se usa su propia variable, no se reescribe. */ .ct-header [data-id="trigger"]:not([data-design="simple"]) { --toggle-button-padding: 12px; } /* Subrayado naranja de 2 px bajo el texto, no en el borde del header */ .ct-header [data-id="menu"] > ul > li > a { padding-block: 6px; } /* Menú mobile a pantalla completa: tipografía grande con filete entre ítems, el CTA debajo y los datos de contacto al pie. */ #offcanvas .ct-panel-content-inner { display: flex; flex-direction: column; align-items: stretch; min-height: 100%; padding-inline: var(--gutter); } #offcanvas .mobile-menu { width: 100%; } #offcanvas .mobile-menu li { border-bottom: 1px solid var(--linea-navy); } #offcanvas .mobile-menu .ct-menu-link { font-family: var(--serif); min-height: var(--tap); } #offcanvas [data-id="button"] { margin-top: var(--sp-6); } #offcanvas [data-id="button"] .btn-cta { width: 100%; } #offcanvas [data-id="text"] { margin-top: auto; padding-top: var(--sp-6); } #offcanvas [data-id="text"] a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: underline; text-underline-offset: 4px; } /* -------------------------------------------------------------------------- 6b. HEADER FLOTANTE (VEP-1 v2) Blocksy deja el fondo de la fila transparente en los tres estados; la pieza la dibuja esta capa (::before de la fila), detrás del contenido. · Arriba, en otras páginas: banda off-white rectangular, como siempre. · Arriba, en la portada (header transparente): pieza off-white que nace en el borde izquierdo (se funde con el fondo) y termina en una curva 24 px después del borde del contenido, flotando 8 px bajo el borde de la pantalla: a su derecha y encima asoman la superficie celeste y la foto del hero. · Fijo, desktop: cápsula navy flotante, redondeada en los dos extremos. · Fijo, mobile: navy a todo el ancho con las esquinas inferiores suaves. Sin sombra, blur ni vidrio. El alto de la fila no cambia (76 → 68 px), así las anclas siguen descontando lo mismo. -------------------------------------------------------------------------- */ #header [data-row*="middle"] { position: relative; isolation: isolate; } #header [data-row*="middle"]::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--offwhite); border-radius: 0; pointer-events: none; transition: background-color 0.2s ease; } /* Fijo: navy en todos los anchos */ #header [data-sticky*="yes"] [data-row*="middle"]::before { background: var(--navy); } #header [data-sticky*="yes"] :focus-visible { outline-color: var(--naranja); } /* Mobile fijo: ancho completo, esquinas inferiores suaves */ #header [data-device="mobile"] [data-sticky*="yes"] [data-row*="middle"]::before { border-radius: 0 0 20px 20px; } /* Desktop arriba en la portada: la pieza termina en curva */ #header [data-device="desktop"] [data-transparent-row="yes"]::before { top: 8px; right: max(16px, calc(50% - 604px)); border-radius: 0 999px 999px 0; } #header [data-device="desktop"] [data-transparent-row="yes"] > .ct-container { padding-top: 8px; } @media (max-width: 1255px) { #header [data-device="desktop"] [data-transparent-row="yes"] > .ct-container { padding-right: 24px; } } /* Desktop fijo: cápsula flotante */ #header [data-device="desktop"] [data-sticky*="yes"] [data-row*="middle"]::before { top: 8px; left: max(8px, calc(50% - 604px)); right: max(8px, calc(50% - 604px)); border-radius: 999px; } #header [data-device="desktop"] [data-sticky*="yes"] [data-row*="middle"] > .ct-container { padding-top: 8px; } @media (max-width: 1255px) { #header [data-device="desktop"] [data-sticky*="yes"] [data-row*="middle"] > .ct-container { padding-inline: 24px; } } @media (prefers-reduced-motion: reduce) { #header [data-row*="middle"]::before { transition: none; } } /* -------------------------------------------------------------------------- 7. FOOTER (Blocksy) — tres columnas, disclaimer y pie Estructura, colores, divisores entre columnas y fila inferior salen del Footer Builder; los textos son bloques en Apariencia > Widgets. Esto da la tipografía y los íconos del mockup. -------------------------------------------------------------------------- */ :root { --icono-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6.6 3.5h3l1.6 4-2 1.4a12 12 0 0 0 5.9 5.9l1.4-2 4 1.6v3a2 2 0 0 1-2.2 2A16.8 16.8 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E"); --icono-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='2.8' y='5' width='18.4' height='14' rx='2'/%3E%3Cpath d='M3.6 6.6L12 12.6l8.4-6'/%3E%3C/svg%3E"); --icono-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M3.6 12h16.8M12 3.4c2.3 2.4 3.4 5.3 3.4 8.6S14.3 18.2 12 20.6c-2.3-2.4-3.4-5.3-3.4-8.6S9.7 5.8 12 3.4z'/%3E%3C/svg%3E"); } .ct-footer { border-top: 3px solid var(--naranja); padding-top: var(--seccion-y-sec); } .ct-footer [data-row="middle"] { padding-bottom: var(--sp-6); } /* Columnas: tres desde 760 px con la proporción del mockup, apiladas por debajo con un filete entre cada una. Blocksy corta en 690/1000; estas reglas usan sus mismas variables para cortar donde corta el diseño. */ [data-footer*="type-1"] .ct-footer [data-row*="top"] > div { --columns-gap: clamp(28px, 4vw, 56px); } @media (min-width: 760px) { [data-footer*="type-1"] .ct-footer [data-row*="top"] > div { --grid-template-columns: 1.15fr 1fr 1.05fr; } } @media (max-width: 759.98px) { [data-footer*="type-1"] .ct-footer [data-row*="top"] > div { --grid-template-columns: initial; --columns-gap: var(--sp-6); } .ct-footer [data-row*="top"] [data-column] + [data-column] { padding-top: var(--sp-6); border-top: 1px solid var(--linea-navy); } } .ct-footer .footer-logo { margin: 0; } .ct-footer .footer-logo img { height: 42px; width: auto; } .ct-footer .footer-tag { margin: var(--sp-4) 0 0; font-size: var(--fs-small); line-height: 1.7; color: var(--tinta-navy); } /* 8 px de margen + los 8 px que Blocksy pone entre widgets = los 16 del mockup */ .ct-footer .footer-titulo { margin: 0 0 var(--sp-2); font-family: var(--sans); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0; line-height: 1.4; color: var(--blanco); } .ct-footer .footer-fila { display: flex; align-items: center; gap: var(--sp-3); margin: 0; font-size: var(--fs-small); color: #D5E3EF; } .ct-footer .footer-fila::before { content: ''; flex: none; width: 20px; height: 20px; background: var(--celeste-claro); -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; } .ct-footer .footer-fila--tel { --icono: var(--icono-tel); } .ct-footer .footer-fila--mail { --icono: var(--icono-mail); } .ct-footer .footer-fila--web { --icono: var(--icono-web); } .ct-footer .footer-fila a { display: inline-flex; align-items: center; min-height: var(--tap); color: inherit; text-decoration: none; /* 10/10: sin subrayado en el footer */ } .ct-footer .footer-fila a:hover { color: var(--celeste-claro); text-decoration: none; } .ct-footer .footer-legal { margin: 0; font-size: var(--fs-caption); line-height: 1.8; color: var(--tinta-navy); } .ct-footer .disclaimer { margin: 0; max-width: none; padding-left: var(--sp-5); border-left: 3px solid var(--naranja); font-size: var(--fs-caption); line-height: 1.75; color: #BDD1E2; } .ct-footer .disclaimer strong { color: var(--blanco); } /* Menú legal sin enlaces publicados: fuera de la vista y del árbol de accesibilidad, para que no se anuncie una navegación vacía. Aparece solo cuando se publica la primera página legal. */ .ct-footer [data-id="menu"]:not(:has(li)) { display: none; } /* Menú legal: objetivo táctil completo aunque el texto sea chico */ .ct-footer [data-id="menu"] .ct-menu-link { display: inline-flex; align-items: center; min-height: var(--tap); } /* ========================================================================== ETAPA 3 · TANDA A — Hero, El modelo, Cómo funciona El contenido vive en widgets nativos de Elementor. Estas clases sólo dan la geometría y la identidad que Elementor no resuelve limpiamente, y los cortes del mockup (640 / 900 / 1024 / 1080) donde difieren de los suyos. ========================================================================== */ /* -------------------------------------------------------------------------- 8. RITMO DE SECCIÓN Y AJUSTES DE TEXTO -------------------------------------------------------------------------- */ .e-con.s { padding-top: var(--seccion-y); padding-bottom: var(--seccion-y); } .e-con.s-sec { padding-top: var(--seccion-y-sec); padding-bottom: var(--seccion-y-sec); } /* Los párrafos del Editor de texto no suman margen al final del bloque */ .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 9. FIRMA ECG — trazo vivo (idéntico al mockup de Fase 1) Un frente avanza de izquierda a derecha DIBUJANDO el ECG; detrás queda una estela que pierde opacidad hasta desaparecer. Delante del frente no hay nada y detrás tampoco queda línea. Color único #FF6B35; la única gradación es de opacidad. Todo es CSS: sin requestAnimationFrame ni scroll. -------------------------------------------------------------------------- */ .ecg { display: block; color: var(--ecg-color); } .ecg__svg { display: block; width: 100%; height: 100%; overflow: hidden; } .ecg__trazo { fill: none; stroke: var(--ecg-color); stroke-width: var(--ecg-grosor); stroke-linecap: butt; stroke-linejoin: miter; /* vértices en punta, nunca redondeados */ stroke-miterlimit: 10; vector-effect: non-scaling-stroke; } .ecg__ventana { x: 0; y: 0; width: var(--ecg-estela); height: 100%; animation: ecg-barrido var(--ecg-dur) linear infinite; will-change: transform; } @keyframes ecg-barrido { from { transform: translateX(calc(-1 * var(--ecg-estela))); } to { transform: translateX(100cqi); } } .ecg--x { container-type: inline-size; } .ecg--divisor { height: 34px; } .ecg--marca { width: 84px; height: 20px; flex: none; --ecg-estela: 150px; } .ecg__ventana--y { x: 0; y: 0; /* 24 unidades = el ancho del riel. Con 100% la ventana tomaba el ancho del SVG de definiciones (0 × 0) y el conector quedaba invisible. */ width: 24px; height: var(--ecg-estela-y); animation: ecg-barrido-y var(--ecg-dur) linear infinite; will-change: transform; } @keyframes ecg-barrido-y { from { transform: translateY(calc(-1 * var(--ecg-estela-y))); } to { transform: translateY(var(--ecg-recorrido-y)); } } @media (max-width: 639px) { .ecg { --ecg-estela: 200px; } } /* El Espaciador que hace de ancla ocupa exactamente lo que ocupa el trazo */ .elementor-widget-spacer.ecg-marca { flex: none; width: 84px; margin-top: 2px; } .tl__link { display: block; width: 100%; height: 100%; } .tl__link svg { display: block; width: 100%; height: 100%; } /* Movimiento reducido: sin barrido; queda un tramo corto y discreto del trazo, nunca una línea de extremo a extremo. */ @media (prefers-reduced-motion: reduce) { .ecg__ventana, .ecg__ventana--y { animation: none !important; } .ecg__ventana { transform: translateX(22%); } .ecg__ventana--y { transform: translateY(28px); } } /* -------------------------------------------------------------------------- 10. FOTOGRAFÍA — marco con proporción de diseño y anclaje del recorte -------------------------------------------------------------------------- */ .media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--media-pos); } /* El modelo: marco y archivo son 4:3 en todos los tamaños, no hay recorte */ .media--modelo { --media-pos: center; } .media--modelo img { aspect-ratio: 4 / 3; border-radius: var(--r-md); } /* -------------------------------------------------------------------------- 11. HERO — composición de la referencia (VEP-1 v2) Plano 1: fondo off-white, texto y panel de confianza, fijos. Plano 2: `hero.png` del cliente (profesional + círculo navy + puntos), una sola capa que se mueve con el sistema de capas (bloque 31, el hero es el ancla). El header de la portada es transparente: el hero empieza en y = 0. -------------------------------------------------------------------------- */ .e-con.hero { --hero-acento: var(--celeste-texto); --fs-hero: clamp(2.625rem, 2.07rem + 2.22vw, 3.875rem); /* 42 → 62 (VEP jerarquía, 28/09) */ --header-h: 76px; position: relative; /* Elementor fuerza flex-wrap en celular: con wrap la foto quedaba en 0 px */ flex-wrap: nowrap; /* Sólo recorta a los costados: el panel de confianza cruza el borde inferior y pisa el comienzo de El modelo */ z-index: 2; overflow-x: clip; background: var(--offwhite); color: var(--tinta); } .e-con.hero__texto { position: relative; z-index: 2; width: 100%; max-width: var(--ancho); margin-inline: auto; padding: calc(var(--header-h) + clamp(28px, 7vw, 56px)) var(--gutter) 0; } /* El global "H1 del hero" fija tipografía y tamaño con más especificidad. Gelasio 600 y tracking cerrado: titular contemporáneo, no de diario. Peso subido de 500 a 600 (28/09, jerarquía tipográfica) para que el H1 no compita con ningún H2 de la home. */ body .e-con.hero .hero__titulo .elementor-heading-title { font-size: var(--fs-hero); font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; } .hero__acento { color: var(--hero-acento); } /* Título con palabra rotativa (30/09 → 02/10): Fancy Text de EA Free. Mismo estilo que el H1 de antes. La palabra va en su propia línea (no empuja el resto del título al cambiar de largo) y en naranja de marca profundo (#E85520: 3,4:1 sobre el fondo, cumple AA para texto grande); el resto del título, navy. */ body .e-con.hero .hero__titulo .eael-fancy-text-container { margin: 0; color: var(--navy); font-family: var(--serif); font-size: var(--fs-hero); font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; text-align: left; text-wrap: balance; } /* Elementor genera por widget font-size 22px y line-height 1px para estos tres tramos, y el JS de EA pone display inline-block en línea: se fuerza acá (sólo dentro del título del Hero) */ body .e-con.hero .hero__titulo .eael-fancy-text-prefix, body .e-con.hero .hero__titulo .eael-fancy-text-strings, body .e-con.hero .hero__titulo .eael-fancy-text-suffix { font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit; } body .e-con.hero .hero__titulo .eael-fancy-text-prefix, body .e-con.hero .hero__titulo .eael-fancy-text-suffix { color: var(--navy) !important; } /* La palabra va en su propia línea: el prefijo corta la línea con un bloque vacío y la palabra queda en línea con su cursor de escritura (typed.js lo inserta como hermano, por eso la palabra no puede ser display:block) */ body .e-con.hero .hero__titulo .eael-fancy-text-prefix { display: inline !important; } body .e-con.hero .hero__titulo .eael-fancy-text-prefix::after { content: ''; display: block; } body .e-con.hero .hero__titulo .eael-fancy-text-strings { display: inline-block !important; min-height: 1.06em; color: var(--naranja-600) !important; } /* EA dibuja su propio cursor ("|" en ::after de la palabra) además del que inserta typed.js: eran dos barras. Se anula el de EA y queda uno solo. */ body .e-con.hero .hero__titulo .eael-fancy-text-strings::after { content: none !important; animation: none !important; } /* Cursor: barra fina naranja dibujada con CSS (el "|" de la serif se veía doble) */ body .e-con.hero .hero__titulo .typed-cursor { display: inline-block !important; width: 0.055em; height: 0.8em; margin-left: 0.07em; overflow: hidden; background: var(--naranja-600); color: transparent !important; font-size: inherit !important; line-height: 1 !important; vertical-align: -0.04em; } /* A veces el JS de EA arma dos escritores sobre el mismo título: sólo se ve un cursor. Con movimiento reducido no hay cursor. */ body .e-con.hero .hero__titulo .typed-cursor ~ .typed-cursor { display: none !important; } @media (prefers-reduced-motion: reduce) { body .e-con.hero .hero__titulo .typed-cursor { display: none !important; } } body .e-con.hero .hero__titulo .eael-fancy-text-suffix { display: block !important; } .hero__titulo .clearfix { display: none; } body .e-con.hero .hero__p { max-width: 48ch; font-size: 1.125rem; line-height: 1.6; } .hero__p strong { font-weight: 700; color: var(--tinta); } /* Botones: apilados a todo el ancho en teléfono, en fila desde 560 px (el corte del mockup). Lo usan también Respaldo y Contratación. */ .e-con.btn-grupo { flex-direction: column; } .btn-grupo .elementor-widget-button, .btn-grupo .elementor-button { width: 100%; } @media (min-width: 560px) { .e-con.btn-grupo { flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); } .btn-grupo .elementor-widget-button, .btn-grupo .elementor-button { width: auto; } } /* Franja de confianza (referencia 2, refinada): UNA banda celeste compacta. Cada atributo en horizontal: círculo blanco de 42 px con el PNG del cliente (widget Imagen, 21 px, centrado) y a su lado título + descripción en Carlito. Título navy (6,11:1), descripción navy-800 (5,22:1). Sin separadores: sólo espacio. Teléfono: lista de tres filas; desde 640 px, una fila de tres. */ .e-con.hero__datos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: clamp(36px, 6vw, 56px); padding: 20px; border: 0; border-radius: 20px; background: var(--celeste); } .e-con.hero__dato { --ico: 42px; display: grid; grid-template-columns: var(--ico) minmax(0, 1fr); column-gap: 12px; row-gap: 1px; align-content: center; min-height: var(--ico); padding: 0; } .hero__dato > .elementor-widget { grid-column: 2; } .hero__dato > .elementor-widget.hero__dato-ico { grid-column: 1; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: var(--ico); height: var(--ico); margin: 0; border-radius: 50%; background: var(--blanco); } .hero__dato-ico img { display: block; width: 21px; height: 21px; object-fit: contain; } /* Carlito sólo existe en regular y bold (no hay semibold): bold a 15 px */ body .e-con.hero .hero__dato-titulo .elementor-heading-title { margin: 0; padding: 0; font-family: var(--sans); font-size: 0.9375rem; font-weight: 700; line-height: 1.25; color: var(--navy); } body .e-con.hero .hero__dato-txt, body .e-con.hero .hero__dato-txt p { font-family: var(--sans); font-size: 0.84375rem; line-height: 1.4; color: var(--navy-800); } /* Desde 640 px: tres columnas, cada una con el ícono arriba del texto. Columnas fijas (1fr): el texto se parte dentro de su columna y nunca la desborda. */ @media (min-width: 640px) { .e-con.hero__datos { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; padding: 24px 32px; } .e-con.hero__dato { grid-template-columns: minmax(0, 1fr); align-content: start; } .hero__dato > .elementor-widget { grid-column: 1; } .hero__dato > .elementor-widget.hero__dato-ico { grid-row: auto; margin-bottom: 10px; } } /* Plano visual: `hero.png` del cliente (profesional recortada, círculo navy y puntos ya compuestos) en un widget Imagen nativo. No se enmascara, no se deforma ni se le agregan efectos: sólo se ubica y escala con su proporción. Su base es un corte recto del círculo: el contenedor la recorta contra un borde real (el pie del hero en teléfono/tablet, el pie del panel en desktop), con 16 px de reserva para el parallax. */ .e-con.hero__media { position: relative; z-index: 1; flex: none; width: auto; align-self: stretch; padding: 0; margin: clamp(32px, 8vw, 56px) 0 0 var(--gutter); overflow: clip; pointer-events: none; } .hero__media > .elementor-widget-image.hero__asset { --capa-a: -16px; /* Sangra hasta un 8 % por la derecha: sólo círculo, la tablet queda adentro (en el archivo le sobran 86 de 694 px a su derecha). */ width: min(108%, 600px); max-width: none; margin: 0 -8% -16px auto; transform: translate3d(0, calc(var(--capa-p, 0) * var(--capa-k) * var(--capa-a)), 0); } .hero__asset img { display: block; width: 100%; height: auto; max-width: none; } @media (min-width: 1024px) { .e-con.hero { --asset-h: clamp(440px, 47vw, 720px); --solape: clamp(32px, 4vw, 56px); --p-izq: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); min-height: clamp(760px, 100svh, 920px); } .e-con.hero__texto { flex: 1 0 auto; /* 47% → 56% (28/09, jerarquía): el H1 subió a 62px y necesitaba más ancho para cortar en 4 líneas naturales en vez de 6. hero__media es absoluto y la foto se ancla a la derecha por altura (--asset-h), no por el ancho de esta columna, así que ensancharla no la achica; verificado sin superposición en 1024/1280/1440. */ width: 56%; max-width: none; margin: 0; padding-top: calc(var(--header-h) + clamp(48px, 6.5vw, 96px)); padding-bottom: 0; padding-left: var(--p-izq); padding-right: clamp(24px, 3vw, 48px); } .hero__texto > .btn-grupo { margin-bottom: clamp(40px, 4.5vw, 64px); } /* El panel baja al pie de la columna, corre hasta el borde derecho de la pantalla y cruza el borde inferior del hero. La profesional queda por delante de su tramo derecho (referencia 2); los datos ocupan sólo el tramo libre de la izquierda. */ .e-con.hero__datos { position: relative; z-index: 3; margin-top: auto; margin-bottom: calc(-1 * var(--solape)); width: calc(100vw - var(--p-izq)); max-width: none; padding-right: calc(var(--asset-h) * 0.93 + 40px); column-gap: 20px; padding-block: 24px; border-radius: 20px 0 0 20px; } .e-con.hero__media { position: absolute; z-index: 3; top: var(--header-h); right: 0; bottom: calc(-1 * var(--solape)); left: 40%; margin: 0; } .hero__media > .elementor-widget-image.hero__asset { position: absolute; right: calc(var(--asset-h) * -0.093); bottom: -16px; width: auto; height: calc(var(--asset-h) + 16px); margin: 0; } .hero__asset img { width: auto; height: 100%; } } @media (min-width: 1024px) and (max-width: 1279px) { .e-con.hero { --asset-h: 44vw; } } /* -------------------------------------------------------------------------- 12. COLUMNAS DEL MOCKUP — cortes propios donde Elementor corta en 1024 El modelo abre en 43/57 desde 900 px (así el título de la apertura cae sobre la columna de texto del argumento y la bajada sobre la de la foto). Cómo funciona abre en 0.82/1.18 desde 1080 px. -------------------------------------------------------------------------- */ @media (min-width: 900px) { .e-con.cols-43-57 { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); column-gap: clamp(40px, 5vw, 72px); row-gap: 0; } .e-con.cols-43-57.cols-arriba { align-items: start; } .e-con.cols-43-57.cols-centro { align-items: center; } } /* Cómo funciona: la composición vive en el bloque 31 (cápsula navy) */ /* -------------------------------------------------------------------------- 13. TABLA COMPARATIVA — Containers y widgets nativos Teléfono: cada criterio es una tarjeta con las dos posturas enfrentadas y rotuladas, sin scroll lateral. Desde 760 px: tabla de dos columnas. -------------------------------------------------------------------------- */ .e-con.tabla { row-gap: var(--sp-5); } .e-con.tabla__cab { display: none; } .e-con.tabla__fila { border: 1px solid var(--linea-fuerte); border-radius: var(--r-md); overflow: hidden; } .e-con.tabla__celda { padding: var(--sp-5); } .e-con.tabla__celda--trad { border-bottom: 1px solid var(--linea); } .e-con.tabla__celda--sepri { background: var(--celeste-tinte); border-left: 3px solid var(--celeste); } /* Ícono alineado con la primera línea, no con el centro del párrafo */ .tabla .elementor-icon-list-item { align-items: flex-start; } .tabla .elementor-icon-list-icon { margin-top: 5px; } @media (min-width: 760px) { .e-con.tabla { row-gap: 0; } .e-con.tabla__cab { display: flex; flex-direction: row; } .elementor-widget-heading.tabla__th { width: 50%; padding: clamp(14px, 1.6vw, 20px) clamp(18px, 2vw, 28px); border-bottom: 1px solid var(--linea); background: var(--blanco); } .elementor-widget-heading.tabla__th--sepri { background: var(--celeste-tinte); border-bottom-color: var(--celeste); } .e-con.tabla__fila { flex-direction: row; border: 0; border-radius: 0; } .e-con.tabla__celda { width: 50%; padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 28px); border-bottom: 1px solid var(--linea); } .e-con.tabla__celda--trad { border-right: 1px solid var(--linea); } .e-con.tabla__fila:last-child .tabla__celda { border-bottom: 0; } /* El rótulo de cada celda sólo hace falta cuando no hay encabezado */ .elementor-widget-heading.tabla__rotulo { display: none; } } /* -------------------------------------------------------------------------- 14. CÓMO FUNCIONA — ver bloque 34 (Interactive Circle de EA). -------------------------------------------------------------------------- */ /* ========================================================================== ETAPA 3 · TANDA B — Respaldo institucional, Qué cubrimos, Ecosistema ========================================================================== */ /* -------------------------------------------------------------------------- 15. ÍCONOS DE LÍNEA DE LA MARCA Los mismos trazos del mockup, dibujados con máscara: heredan el color del texto. Se asignan con una clase `icono-*` sobre el widget. Font Awesome Free no tiene equivalentes (no hay estómago, y cerebro/pulmón son rellenos), y así no hace falta habilitar la subida de SVG. -------------------------------------------------------------------------- */ :root { --icono-corazon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5S3.5 15 3.5 9.4A4.9 4.9 0 0 1 12 6.2a4.9 4.9 0 0 1 8.5 3.2c0 5.6-8.5 11.1-8.5 11.1z'/%3E%3C/svg%3E"); --icono-cerebro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2v15.6'/%3E%3Cpath d='M12 5.5a3 3 0 0 0-5.6 1.2A2.9 2.9 0 0 0 4.2 11a3 3 0 0 0 1.3 4.6A3 3 0 0 0 12 18M12 5.5a3 3 0 0 1 5.6 1.2A2.9 2.9 0 0 1 19.8 11a3 3 0 0 1-1.3 4.6A3 3 0 0 1 12 18'/%3E%3C/svg%3E"); --icono-pulmon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v8'/%3E%3Cpath d='M12 8.5c-1.3-1.6-3.2-1.4-4 .4-.9 2-1.5 4.4-1.6 6.7-.1 2 .8 3.4 2.5 3.7 1.6.3 3.1-.7 3.1-2.4z'/%3E%3Cpath d='M12 8.5c1.3-1.6 3.2-1.4 4 .4.9 2 1.5 4.4 1.6 6.7.1 2-.8 3.4-2.5 3.7-1.6.3-3.1-.7-3.1-2.4z'/%3E%3C/svg%3E"); --icono-gota: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2c3.4 4 5.6 6.9 5.6 9.6A5.6 5.6 0 0 1 6.4 12.8c0-2.7 2.2-5.6 5.6-9.6z'/%3E%3C/svg%3E"); --icono-estomago: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 3.5v5c0 3.6 1.9 5.6 4.6 6.2 2.6.6 4.1 2 4.1 3.6a3.2 3.2 0 0 1-6.4.2'/%3E%3Cpath d='M6.5 3.5h4'/%3E%3C/svg%3E"); --icono-hueso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.6 16.4L16.4 7.6'/%3E%3Cpath d='M6.6 15.4a2.3 2.3 0 1 0-2.1 3.5 2.3 2.3 0 1 0 3.5-2.1M17.4 8.6a2.3 2.3 0 1 0 2.1-3.5 2.3 2.3 0 1 0-3.5 2.1'/%3E%3C/svg%3E"); --icono-escudo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6l7.5 3v6.2c0 4.6-3.1 8.4-7.5 9.7-4.4-1.3-7.5-5.1-7.5-9.7V5.6z'/%3E%3Cpath d='M12 8.4v6M9 11.4h6'/%3E%3C/svg%3E"); --icono-pulso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10'%3E%3Cpath d='M3 26h9l3-6 3.5 12 4-22 4 20 3-4h13.5'/%3E%3C/svg%3E"); --icono-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2.4'/%3E%3Ccircle cx='5' cy='18' r='2.4'/%3E%3Ccircle cx='19' cy='18' r='2.4'/%3E%3Cpath d='M10.5 7L6.5 15.7M13.5 7l4 8.7M7.4 18h9.2'/%3E%3C/svg%3E"); } .icono-corazon { --icono: var(--icono-corazon); } .icono-cerebro { --icono: var(--icono-cerebro); } .icono-pulmon { --icono: var(--icono-pulmon); } .icono-gota { --icono: var(--icono-gota); } .icono-estomago { --icono: var(--icono-estomago); } .icono-hueso { --icono: var(--icono-hueso); } .icono-escudo { --icono: var(--icono-escudo); } .icono-pulso { --icono: var(--icono-pulso); } .icono-red { --icono: var(--icono-red); } /* -------------------------------------------------------------------------- 16. BOTÓN NAVY — secundario, sobre fondos claros Misma forma que el CTA; la flecha avanza 3 px al pasar el mouse. -------------------------------------------------------------------------- */ body .btn-navy .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); min-height: var(--tap); padding: 16px 26px; background: var(--navy); color: var(--blanco); border: 0; border-radius: var(--r-pill); font-family: var(--sans); font-size: var(--fs-small); font-weight: 700; line-height: 1; text-decoration: none; transition: background-color 0.16s ease; } body .btn-navy .elementor-button::after { content: ''; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--sepri-flecha) center / contain no-repeat; mask: var(--sepri-flecha) center / contain no-repeat; transition: transform 0.16s ease; } @media (hover: hover) { body .btn-navy .elementor-button:hover { background: var(--navy-700); color: var(--blanco); } body .btn-navy .elementor-button:hover::after { transform: translateX(3px); } } @media (prefers-reduced-motion: reduce) { body .btn-navy .elementor-button:hover::after { transform: none; } } /* -------------------------------------------------------------------------- 17. RESPALDO — tarjeta blanca con foto superpuesta y 4 cifras (29/09) Composición: foto a la izquierda con un bloque celeste desplazado detrás; a la derecha una tarjeta blanca con el titular, la bajada, las cuatro cifras y el botón. La foto pisa el borde izquierdo de la tarjeta. Debajo, una gran elipse navy (`#respaldo::before`) hace de suelo y la tarjeta la cruza. Teléfono: foto arriba y tarjeta que la pisa por abajo. Las cifras siguen siendo Encabezados con la clase `contador` (sepri.js las anima una sola vez; el valor final está en el HTML). El bloque `.metricas` es el que observa el script. El widget Counter de Essential Addons es de la versión Pro y no está instalado: se usa "Dato curioso" (Funfact) de ElementsKit Lite. -------------------------------------------------------------------------- */ .contador .elementor-heading-title { font-variant-numeric: tabular-nums; } #respaldo { position: relative; isolation: isolate; } #respaldo::before { content: ''; position: absolute; z-index: -1; top: auto; left: -25%; right: -25%; bottom: -55%; height: 80%; border-radius: 50%; background: var(--navy); pointer-events: none; } .e-con.fila { gap: 0; } .e-con.fila--izq { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); } /* En el DOM el texto (con el H2) va antes que la foto: se lee el título primero. A la vista, la foto va primero. */ .e-con.fila--izq > .fila__media { order: -1; } /* Foto + bloque celeste detrás */ .e-con.fila__media { position: relative; isolation: isolate; z-index: 2; padding: 0; } .e-con.fila__media::before { --capa-a: 14px; content: ''; position: absolute; z-index: -1; left: -12px; top: -12px; width: 64%; height: 58%; background: var(--celeste); border-radius: 24px; transform: translate3d(0, calc(var(--capa-p, 0) * var(--capa-k) * var(--capa-a)), 0); pointer-events: none; } .fila__media .elementor-widget-image { --capa-a: -8px; transform: translate3d(0, calc(var(--capa-p, 0) * var(--capa-k) * var(--capa-a)), 0); } /* El edificio y las dos personas están hacia la derecha del archivo */ .media--respaldo { --media-pos: 68% center; } .media--respaldo img { aspect-ratio: 4 / 3; border-radius: 24px; } /* Tarjeta blanca */ .e-con.fila__texto { position: relative; z-index: 1; margin: -28px 8px 0; padding: calc(28px + clamp(24px, 6vw, 36px)) clamp(20px, 5vw, 32px) clamp(28px, 6vw, 36px); background: var(--blanco); border: 1px solid var(--linea); border-radius: 24px; } /* Cifras */ .e-con.metricas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; } .e-con.cifra-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 8px; padding: 16px 18px; background: var(--celeste-lavado); border: 1px solid var(--linea); border-radius: 16px; } /* Cada cifra es un widget "Dato curioso" (Funfact) de ElementsKit Lite: ícono, número (con prefijo/sufijo) y leyenda en un solo widget editable. Su marcado es .elementskit-funfact-inner > .funfact-icon + .funfact-content (número + leyenda). Se reordena con grilla: ícono y número en la primera fila, leyenda debajo a todo el ancho. */ .cifra-card__fun .ekit-wid-con .elementskit-funfact-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 8px; } .cifra-card__fun .ekit-wid-con .elementskit-funfact .funfact-content { display: contents; } .cifra-card__fun .ekit-wid-con .elementskit-funfact .funfact-icon { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--celeste-tinte); } .cifra-card__fun .ekit-wid-con .elementskit-funfact .funfact-icon svg, .cifra-card__fun .ekit-wid-con .elementskit-funfact .funfact-icon i { display: block; width: 20px; height: 20px; margin: 0; font-size: 20px; line-height: 1; fill: var(--naranja-600); /* naranja de marca; el más hondo, para que se lea sobre el círculo */ color: var(--naranja-600); } .cifra-card__fun .ekit-wid-con .elementskit-funfact .funfact-content .number-percentage-wraper { grid-column: 2; grid-row: 1; font-family: var(--serif); font-size: clamp(2rem, 1.6rem + 1.7vw, 2.75rem); font-weight: 700; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; } .cifra-card__fun .ekit-wid-con .elementskit-funfact .funfact-title { grid-column: 1 / -1; grid-row: 2; margin: 0; font-family: var(--sans); font-size: var(--fs-small); font-weight: 400; line-height: 1.4; color: var(--tinta-2); } @media (min-width: 560px) { .e-con.metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .e-con.fila--izq { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.4fr); align-items: center; } .media--respaldo img { aspect-ratio: 4 / 5; } /* La foto pisa 72 px del borde izquierdo de la tarjeta */ .e-con.fila__texto { width: auto; max-width: none; margin: 0 0 0 -72px; padding: clamp(36px, 3.4vw, 48px) clamp(28px, 3.4vw, 48px) clamp(36px, 3.4vw, 48px) calc(72px + clamp(28px, 3vw, 44px)); } } /* -------------------------------------------------------------------------- 19. QUÉ CUBRIMOS — tarjetas con sombra suave (29/09) Encabezado centrado y, debajo, seis tarjetas blancas de esquinas amplias con ícono de Elementor (Font Awesome) en un círculo naranja institucional. Sombra difusa y baja, tintada en navy; al pasar el cursor la tarjeta sube unos píxeles y la sombra se abre un poco. Es una excepción acordada al "sin sombras" del resto del sitio, sólo para esta sección. La tarjeta es el `.elementor-icon-box-wrapper` (el marcado optimizado de Elementor no trae `.elementor-widget-container`): el widget exterior queda libre para el reveal del sistema global (`sr-item`, opacity/transform), que si no pisaría la transición del hover. Escritorio 3 × 2 · tablet 2 × 3 · teléfono 1 columna, en horizontal. -------------------------------------------------------------------------- */ .e-con.cubre { display: flex; flex-direction: column; align-items: stretch; } .e-con.cubre__intro { max-width: 46rem; margin-inline: auto; align-items: center; text-align: center; } .cubre__intro .elementor-widget-text-editor { max-width: 56ch; } .e-con.cubre__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(32px, 5vw, 48px); } @media (min-width: 560px) { .e-con.cubre__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } @media (min-width: 900px) { .e-con.cubre__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } } .elementor-widget-icon-box.cubre__item { display: block; } body .cubre__item > .elementor-icon-box-wrapper { height: 100%; box-sizing: border-box; padding: 32px 26px 30px; background: var(--blanco); border: 1px solid rgba(0, 31, 63, 0.05); border-radius: 24px; box-shadow: 0 1px 2px rgba(0, 31, 63, 0.04), 0 14px 34px -10px rgba(0, 31, 63, 0.12); transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } @media (hover: hover) { body .cubre__item:hover > .elementor-icon-box-wrapper { translate: 0 -5px; border-color: rgba(0, 31, 63, 0.08); box-shadow: 0 2px 4px rgba(0, 31, 63, 0.05), 0 24px 46px -12px rgba(0, 31, 63, 0.18); } } @media (prefers-reduced-motion: reduce) { body .cubre__item > .elementor-icon-box-wrapper { transition: box-shadow 0.2s ease; } body .cubre__item:hover > .elementor-icon-box-wrapper { translate: none; } } body .cubre__item .elementor-icon-box-wrapper { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } /* Escritorio ancho (≥ 1180): titular y bajada a un lado, las seis tarjetas (3 × 2) al otro. Debajo de 1180 se mantiene el encabezado centrado arriba. */ @media (min-width: 1180px) { .e-con.cubre { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); column-gap: clamp(40px, 5vw, 72px); align-items: center; } .e-con.cubre__intro { max-width: none; margin-inline: 0; align-items: flex-start; text-align: left; } .e-con.cubre__lista { margin-top: 0; gap: 20px; } body .cubre__item > .elementor-icon-box-wrapper { padding: 30px 18px 28px; } body .cubre__item .elementor-icon-box-title { font-size: 1.125rem; } } body .cubre__item .elementor-icon-box-icon { display: flex; justify-content: center; margin: 0; } body .cubre__item .elementor-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--naranja); color: var(--blanco); font-size: 26px; } body .cubre__item .elementor-icon svg { display: block; width: 26px; height: 26px; fill: var(--blanco); } body .cubre__item .elementor-icon-box-content { width: 100%; } body .cubre__item .elementor-icon-box-title { margin: 0 0 8px; font-family: var(--sans); font-size: 1.25rem; font-weight: 700; line-height: 1.25; } body .cubre__item .elementor-icon-box-description { margin: 0; font-size: var(--fs-small); line-height: 1.55; text-wrap: balance; } /* Teléfono: tarjeta horizontal (ícono a la izquierda), más compacta */ @media (max-width: 559.98px) { body .cubre__item > .elementor-icon-box-wrapper { padding: 20px 18px; border-radius: 20px; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 8px; text-align: left; } body .cubre__item .elementor-icon-box-content { display: contents; } body .cubre__item .elementor-icon-box-icon { grid-column: 1; grid-row: 1; } body .cubre__item .elementor-icon { width: 52px; height: 52px; font-size: 22px; } body .cubre__item .elementor-icon svg { width: 22px; height: 22px; } body .cubre__item .elementor-icon-box-title { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 1.125rem; text-align: left; } body .cubre__item .elementor-icon-box-description { grid-column: 1 / -1; grid-row: 2; text-wrap: pretty; text-align: left; } } .elementor-widget-text-editor.cubre__nota { max-width: 68ch; margin: 8px auto 0; text-align: center; } .cubre__nota strong { color: var(--tinta); } .e-con.cubre__lista > .cubre__nota { grid-column: 1 / -1; } /* -------------------------------------------------------------------------- 20. ECOSISTEMA — tres tarjetas ilustradas (30/09, rediseño total) No es un servicio aislado: Grupo Se.Pr.i. → SEPRI ClubCare → Nursy. Cada tarjeta es un fondo ilustrado del cliente (WebP con transparencia: logo en círculo, esquina con muesca y arco decorativo) que va como widget Imagen nativo, con un Encabezado (h3) y un Texto encima. El nombre de la marca vive en el `alt` de la imagen. Todo escala con el ancho de la tarjeta (unidades cqw): el texto siempre cae entre el logo y la muesca, y no invade el arco de la esquina inferior derecha. Fondo gris frío (#E2E6EA) para que la tarjeta clara de Grupo se despegue, textos navy. Entre tarjetas, flechas naranjas con aire. Cada tarjeta lleva un botón "+ Info" que llena su muesca (es un .btn-cta con los colores de la tarjeta: mismo hover navy y la flecha que cruza) y al pasar el mouse sube 5 px con más sombra, igual que "Qué cubrimos". Menos de 1200 px: una columna, con las flechas hacia abajo. -------------------------------------------------------------------------- */ .e-con.eco { display: flex; flex-direction: column; align-items: stretch; gap: clamp(36px, 5vw, 56px); } .e-con.eco__intro { max-width: 44rem; align-items: flex-start; text-align: left; } .eco__intro .elementor-widget-text-editor { max-width: 52ch; } .s.eco-seccion { background-color: #E2E6EA; } /* gris frío: despega la tarjeta clara de Grupo */ .e-con.eco__tarjetas { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; } /* Flecha entre tarjetas: círculo naranja + flecha blanca de la marca (rotate en vez de transform: el reveal usa transform) */ .elementor-widget-spacer.eco__flecha { width: 38px; height: 38px; margin-block: 6px; border-radius: 50%; background: var(--naranja); rotate: 90deg; } .elementor-widget-spacer.eco__flecha .elementor-spacer { display: none; } .elementor-widget-spacer.eco__flecha::after { content: ''; display: block; width: 100%; height: 100%; background: var(--blanco); -webkit-mask: var(--sepri-flecha) center / 18px 18px no-repeat; mask: var(--sepri-flecha) center / 18px 18px no-repeat; } @media (min-width: 1200px) { .e-con.eco__tarjetas { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0; } .elementor-widget-spacer.eco__flecha { margin-inline: clamp(18px, 2vw, 28px); margin-block: 0; rotate: none; } } .e-con.eco-card { position: relative; width: 100%; max-width: 420px; aspect-ratio: 720 / 664; container-type: inline-size; padding: 0; } .eco-card__fondo, .eco-card__fondo .elementor-widget-container, .eco-card__fondo img { display: block; width: 100%; height: 100%; } .eco-card__fondo { position: absolute; inset: 0; margin: 0; } .eco-card__fondo img { object-fit: contain; } /* Zona de texto: debajo del logo (40 % de alto) y por encima de la muesca (85 %), sin llegar al arco inferior derecho (ancho 62 %) */ .e-con.eco-card__texto { position: absolute; z-index: 1; top: 44%; left: 9%; width: 62%; gap: 0.5cqw; padding: 0; color: var(--navy); } .eco-card__titulo, .eco-card__titulo .elementor-heading-title { margin: 0; color: var(--navy); font-family: var(--f-display, 'Gelasio', Georgia, serif); font-size: clamp(18px, 6.4cqw, 27px); font-weight: 600; line-height: 1.15; } .eco-card__txt, .eco-card__txt p { margin: 0; color: var(--navy); font-size: clamp(14px, 4.4cqw, 18px); line-height: 1.38; } .eco-card__txt p { margin-block: 0.6em 0; } @media (max-width: 1199.98px) { /* En una columna la tarjeta llega a 420 px: se puede leer más grande y el texto ocupa algo más de ancho sin tocar el arco */ .e-con.eco-card__texto { width: 64%; } } /* Sombra propia de la silueta (sigue la muesca) y hover como "Qué cubrimos": la tarjeta sube 5 px y la sombra se abre */ .e-con.eco-card { transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .eco-card__fondo img { filter: drop-shadow(0 8px 12px rgba(0, 31, 63, 0.10)); transition: filter 0.35s ease; } @media (hover: hover) { .e-con.eco-card:hover { translate: 0 -5px; } .e-con.eco-card:hover .eco-card__fondo img { filter: drop-shadow(0 18px 22px rgba(0, 31, 63, 0.18)); } } @media (prefers-reduced-motion: reduce) { .e-con.eco-card { transition: none; } .e-con.eco-card:hover { translate: none; } .eco-card__fondo img { transition: none; } } /* Botón "+ Info": llena la muesca inferior izquierda (ancho hasta la curva, menos la separación) con la forma de la tarjeta. Es un .btn-cta (mismo componente y mismo hover del sitio: fondo navy, texto blanco y la flecha que cruza); acá sólo cambian el tamaño y los colores del estado normal, que son los de la tarjeta. Medidas en cqw sobre el ancho de la tarjeta: muesca = 38,3 × 14 cqw; separación 2,4. Sin enlace todavía. */ .elementor-widget-button.eco-card__btn { position: absolute; z-index: 2; left: 0; bottom: 0; width: 35.9cqw; } body .eco-card__btn .elementor-button { --btn-flecha: 16px; --btn-x: 3.6cqw; width: 100%; min-height: 0; height: 11.6cqw; padding-block: 0; border-radius: 4.4cqw; font-size: clamp(13px, 4cqw, 16px); } body .eco-card__btn .elementor-button:not(:hover):not(:focus-visible) { background: var(--eco-btn, var(--offwhite)); border-color: var(--eco-btn, var(--offwhite)); color: var(--navy); } body .eco-card__btn .elementor-button-content-wrapper { display: inline-flex; align-items: center; } .eco-card--grupo { --eco-btn: #F7F7F6; } .eco-card--clubcare { --eco-btn: #DB6734; } .eco-card--nursy { --eco-btn: #D0DFF0; } /* El reveal (opacity/transform, con escalón) pisa el transition de la tarjeta: se repite acá con el hover (translate) sin demora */ .sepri-reveal body:not(.elementor-editor-active) .e-con.eco-card.sr-item { transition: opacity var(--sr-dur) var(--sr-ease) calc(var(--sr-i, 0) * var(--sr-paso)), transform var(--sr-dur) var(--sr-ease) calc(var(--sr-i, 0) * var(--sr-paso)), translate 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0s; } /* ========================================================================== ETAPA 3 · TANDA C — La app, Modelo de contratación, Contacto ========================================================================== */ /* -------------------------------------------------------------------------- 21. ÍCONOS DE LA TANDA C y LISTA DE VERIFICACIÓN Mismo sistema que el bloque 15. La lista `checks` es una Lista de íconos nativa sin ícono: el tilde de la marca lo dibuja esta hoja. -------------------------------------------------------------------------- */ :root { --icono-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E"); --icono-pantalla: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='14' height='10' rx='1.5'/%3E%3Cpath d='M6 18.5h7'/%3E%3Crect x='14.5' y='11' width='7' height='10' rx='1.5'/%3E%3C/svg%3E"); --icono-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-6.1 7-11.2A7 7 0 1 0 5 10.3c0 5.1 7 11.2 7 11.2z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); --icono-ficha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h7l5 5v12H6z'/%3E%3Cpath d='M13 3.5v5h5M9 13h6M9 16.5h6'/%3E%3C/svg%3E"); /* Isotipo del logo provisorio: el pulso blanco sobre el círculo degradé */ --iso-pulso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M9 25h5.5l2-4 3.5-13 4 22 3-9 2 4H37' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10'/%3E%3C/svg%3E"); } .icono-pantalla { --icono: var(--icono-pantalla); } .icono-pin { --icono: var(--icono-pin); } .icono-ficha { --icono: var(--icono-ficha); } .icono-tel { --icono: var(--icono-tel); } .icono-mail { --icono: var(--icono-mail); } .checks .elementor-icon-list-items { margin: 0; padding: 0; } .checks .elementor-icon-list-items .elementor-icon-list-item { display: flex; align-items: flex-start; gap: var(--sp-3); margin: 0; padding: var(--sp-4) 0; border-top: 1px solid var(--linea); } .checks .elementor-icon-list-items .elementor-icon-list-item:first-child { border-top: 0; } .checks .elementor-icon-list-item::before { content: ''; flex: none; width: 20px; height: 20px; margin-top: 3px; background: var(--celeste-texto); -webkit-mask: var(--icono-check) center / contain no-repeat; mask: var(--icono-check) center / contain no-repeat; } .checks .elementor-icon-list-text { align-self: auto; padding: 0; } /* La app (30/09): cada verificación es una fila-tarjeta: fondo blanco, borde fino, círculo naranja con el tilde blanco y un pequeño desplazamiento al pasar el mouse. Sólo dentro de .app__texto: Modelo de contratación conserva la lista simple. */ :root { --icono-check-blanco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.7 3.7 7.3-8.2'/%3E%3C/svg%3E"); } .app__texto .checks .elementor-icon-list-items { display: grid; gap: 10px; } .app__texto .checks .elementor-icon-list-items .elementor-icon-list-item, .app__texto .checks .elementor-icon-list-items .elementor-icon-list-item:first-child { align-items: center; gap: 14px; padding: 14px 18px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, background-color 0.3s ease; } /* Elementor le quita el relleno inferior a todos los ítems menos al último (el "espacio entre ítems" de la Lista de íconos): sin esto el círculo quedaba descentrado en los tres primeros */ .app__texto .checks .elementor-icon-list-items .elementor-icon-list-item { padding-block: 14px !important; margin-block: 0 !important; } .app__texto .checks .elementor-icon-list-item::before { width: 28px; height: 28px; margin-top: 0; border-radius: 50%; background: var(--naranja) var(--icono-check-blanco) center / 16px 16px no-repeat; -webkit-mask: none; mask: none; } .app__texto .checks .elementor-icon-list-text { font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); line-height: 1.4; color: var(--navy); } @media (hover: hover) { .app__texto .checks .elementor-icon-list-items .elementor-icon-list-item:hover { translate: 5px 0; border-color: rgba(255, 107, 53, 0.45); background: var(--celeste-lavado); } } /* El reveal escalonado pisa el transition: se repite con el hover */ .sepri-reveal body:not(.elementor-editor-active) .app__texto .checks .elementor-icon-list-item.sr-item { transition: opacity var(--sr-dur) var(--sr-ease) calc(var(--sr-i, 0) * var(--sr-paso)), transform var(--sr-dur) var(--sr-ease) calc(var(--sr-i, 0) * var(--sr-paso)), translate 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0s, border-color 0.3s ease 0s, background-color 0.3s ease 0s; } @media (prefers-reduced-motion: reduce) { .app__texto .checks .elementor-icon-list-items .elementor-icon-list-item:hover { translate: none; } } /* Contenedor reservado para un formulario de WPForms (Etapa 4). Mientras está vacío no ocupa lugar. */ .e-con.form-slot:not(:has(*)) { display: none; } /* -------------------------------------------------------------------------- 22. LA APP — composición de Fase 1: texto 1.3 / teléfono 0.7 desde 1080 -------------------------------------------------------------------------- */ /* El panel celeste sangra hasta el borde de la pantalla: la sección recorta lo que sobra sin crear scroll horizontal ni ensanchar el documento. */ .e-con.app-seccion { overflow-x: clip; } .e-con.app { gap: var(--sp-8); } @media (min-width: 1080px) { .e-con.app { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); column-gap: clamp(40px, 6vw, 88px); align-items: center; } } .elementor-widget-heading.badge { align-self: flex-start; width: auto; margin-bottom: var(--sp-3); padding: 0; /* 30/09: sin recuadro; sólo texto y punto naranjas */ background: none; } .badge .elementor-heading-title { display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.14em; text-transform: uppercase; } .badge .elementor-heading-title::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--naranja); } .nota--centro { text-align: center; } /* -------------------------------------------------------------------------- 23. TELÉFONO DE LA APP — mockup de iPhone (imagen con transparencia) Reemplaza (30/09) a la carcasa 100 % CSS. Sin parallax: el teléfono queda fijo, apenas inclinado (--tel-rot), y aparece una sola vez subiendo desde abajo con el reveal global (clase scroll-reveal en la imagen, con recorrido y duración propios). Con reduced-motion se muestra directamente. -------------------------------------------------------------------------- */ .e-con.app__visual { align-items: center; gap: var(--sp-5); } .e-con.app__escena { --tel-w: 280px; --tel-rot: -2deg; position: relative; isolation: isolate; width: 100%; align-items: center; padding: clamp(36px, 6vw, 56px) 0; } @media (min-width: 768px) { .e-con.app__escena { --tel-w: 320px; --tel-rot: -3deg; } } @media (min-width: 1080px) { .e-con.app__escena { --tel-w: 360px; --tel-rot: -4deg; } } /* Panel en lavado celeste: una banda que sale del borde de la pantalla con la curva del hero, no una tarjeta. El teléfono lo interrumpe y sobresale por arriba y por abajo. */ .app__escena::before { content: ''; position: absolute; z-index: -1; top: 24%; bottom: 22%; width: auto; /* Elementor da al ::before de los Containers */ height: auto; /* el tamaño de su capa de fondo */ opacity: 1; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); background: var(--celeste-tinte); border-radius: clamp(72px, 16vw, 120px) 0 0 clamp(36px, 8vw, 64px); } @media (min-width: 768px) { .app__escena::before { left: 8%; right: calc(-1 * max(var(--gutter), (100vw - 1160px) / 2)); } } @media (min-width: 1080px) { .app__escena::before { left: -14%; border-radius: clamp(96px, 10vw, 160px) 0 0 clamp(48px, 5vw, 88px); } } .e-con.telefono__mov { position: relative; flex: none; width: var(--tel-w); max-width: 100%; padding: 0; transform: rotate(var(--tel-rot)); transform-origin: 50% 60%; } /* Entrada: sube desde abajo, suave y una sola vez (reveal global) */ .telefono__img.scroll-reveal { --sr-dist: 64px; --sr-dur: 1s; } .telefono__img, .telefono__img .elementor-widget-container { width: 100%; } .telefono__img img { display: block; width: 100%; height: auto; /* Sombra física del objeto (excepción aprobada, sólo el teléfono) */ filter: drop-shadow(0 22px 26px rgba(0, 31, 63, 0.22)); } /* -------------------------------------------------------------------------- 24. MODELO DE CONTRATACIÓN -------------------------------------------------------------------------- */ .e-con.contrato { gap: var(--sp-7); padding-top: var(--sp-7); border-top: 2px solid var(--navy); } @media (min-width: 900px) { .e-con.contrato { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(40px, 5vw, 80px); align-items: start; } } /* -------------------------------------------------------------------------- 25. CONTACTO — datos a la izquierda, Formulario A a la derecha (Etapa 4) -------------------------------------------------------------------------- */ .e-con.contacto { gap: var(--sp-8); } @media (min-width: 1080px) { .e-con.contacto { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: clamp(40px, 5vw, 80px); align-items: start; } } .e-con.datos { gap: 0; } .e-con.datos__item { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; border-top: 1px solid var(--linea-navy); } .e-con.datos__item:first-child { border-top: 0; padding-top: 0; } .datos__item::before { content: ''; position: static; /* Elementor lo posiciona como capa de fondo */ flex: none; width: 24px; height: 24px; background: var(--naranja); /* 10/10: sólo los íconos van en naranja institucional */ -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; } .e-con.datos__txt { flex: 1 1 0; min-width: 0; } .datos__rotulo .elementor-heading-title { letter-spacing: 0.08em; text-transform: uppercase; } /* Teléfono y email se tocan con el pulgar: el área llega a 44 px */ .datos__valor a { display: inline-flex; align-items: center; min-height: var(--tap); color: inherit; text-decoration: none; /* 10/10: sin subrayado en los datos de contacto */ overflow-wrap: anywhere; } .datos__valor a:hover { color: var(--celeste-claro); text-decoration: none; } /* -------------------------------------------------------------------------- 26. SCROLL EFFECTS — sistema global Clases sobre Containers o widgets nativos: scroll-reveal aparece subiendo 24 px scroll-reveal-left entra desde 20 px a la izquierda scroll-reveal-right entra desde 20 px a la derecha scroll-stagger sus ítems aparecen uno detrás de otro 600 ms, una sola vez, sólo opacity y transform. El estado oculto existe sólo si el script del marcó con `sepri-reveal` (JS activo, fuera del editor de Elementor). Con reduced-motion, todo en su lugar. -------------------------------------------------------------------------- */ /* Etapa 5: 20 px / 560 ms / 80 ms entre ítems en desktop; en teléfono el recorrido baja a 14 px. Desaceleración natural, sin rebote ni escala. */ :root { --sr-dur: 0.56s; --sr-ease: cubic-bezier(0.22, 1, 0.36, 1); --sr-paso: 80ms; --sr-dist: 20px; --sr-dist-x: 16px; } @media (max-width: 767.98px) { :root { --sr-dist: 14px; --sr-dist-x: 12px; } } .sepri-reveal body:not(.elementor-editor-active) :is(.scroll-reveal, .scroll-reveal-left, .scroll-reveal-right, .sr-item) { transition: opacity var(--sr-dur) var(--sr-ease), transform var(--sr-dur) var(--sr-ease); transition-delay: calc(var(--sr-i, 0) * var(--sr-paso)); } .sepri-reveal body:not(.elementor-editor-active) .scroll-reveal:not(.is-revealed), .sepri-reveal body:not(.elementor-editor-active) .scroll-stagger:not(.is-revealed) .sr-item { opacity: 0; transform: translate3d(0, var(--sr-dist), 0); } .sepri-reveal body:not(.elementor-editor-active) .scroll-reveal-left:not(.is-revealed) { opacity: 0; transform: translate3d(calc(-1 * var(--sr-dist-x)), 0, 0); } .sepri-reveal body:not(.elementor-editor-active) .scroll-reveal-right:not(.is-revealed) { opacity: 0; transform: translate3d(var(--sr-dist-x), 0, 0); } /* Qué cubrimos: pasos más cortos (70 ms), sin cascada lenta. En teléfono, una columna larga: el grupo se muestra directamente. */ .cubre__lista { --sr-paso: 70ms; } @media (max-width: 767.98px) { .sepri-reveal body:not(.elementor-editor-active) .cubre__lista.scroll-stagger .sr-item { opacity: 1; transform: none; transition: none; } } @media (prefers-reduced-motion: reduce) { .sepri-reveal body :is(.scroll-reveal, .scroll-reveal-left, .scroll-reveal-right, .sr-item) { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================================== ETAPA 4 — FORMULARIOS (WPForms Lite, estilos base de WPForms) Especificación visual: bloque 18 del mockup. Los dos formularios llevan la clase `sepri-form` (Ajustes > General > Clases CSS del formulario); cada campo, su clase de ancho y de autocompletado. ========================================================================== */ /* -------------------------------------------------------------------------- 27. CAMPOS, ETIQUETAS, FOCO Y ERRORES -------------------------------------------------------------------------- */ :root { /* Error: el Manual no define un rojo. Derivados sólo para validación, con contraste AA sobre blanco/off-white (6.4:1) y sobre navy (8.4:1). */ --error: #B3261E; --error-navy: #FFB4A9; } .sepri-form .wpforms-form { margin: 0; } .sepri-form .wpforms-field-container { display: grid; gap: var(--sp-5); } @media (min-width: 560px) { .sepri-form .wpforms-field-container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sepri-form .wpforms-field.campo--full { grid-column: 1 / -1; } } .sepri-form .wpforms-field-container .wpforms-field { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; min-width: 0; } .sepri-form .wpforms-field-label { margin: 0; padding: 0; font-family: var(--sans); font-size: var(--fs-caption); font-weight: 700; line-height: 1.4; letter-spacing: 0.03em; color: var(--tinta); } .sepri-form .wpforms-required-label { color: inherit; font-weight: 700; } .sepri-form .wpforms-field input[type="text"], .sepri-form .wpforms-field input[type="email"], .sepri-form .wpforms-field textarea { display: block; width: 100%; max-width: none; min-height: 52px; /* cómodo para el pulgar */ height: auto; margin: 0; padding: 16px; font-family: var(--sans); font-size: var(--fs-body); /* 17 px: nunca menos de 16, o iOS hace zoom */ line-height: 1.4; color: var(--tinta); background: var(--blanco); border: 1px solid var(--linea-fuerte); border-radius: var(--r-sm); box-shadow: none; transition: border-color 0.16s ease; } .sepri-form .wpforms-field textarea { min-height: 148px; line-height: 1.65; resize: vertical; } .sepri-form .wpforms-field :is(input, textarea)::placeholder { color: var(--tinta-2); opacity: 1; } /* Foco: el borde celeste del mockup más el anillo global del sitio (navy en claro, naranja en navy), así el foco se ve aunque el celeste no llegue a 3:1 sobre blanco. */ .sepri-form .wpforms-field :is(input[type="text"], input[type="email"], textarea):focus { border-color: var(--celeste); border-width: 2px; padding: 15px; outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: none; } .s-navy .sepri-form .wpforms-field :is(input, textarea):focus { outline-color: var(--naranja); } /* Errores: texto propio bajo el campo (con role="alert" de WPForms) y borde de 2 px en el color de error */ .sepri-form .wpforms-field :is(input[type="text"], input[type="email"], textarea).wpforms-error { border: 2px solid var(--error); padding: 15px; } .sepri-form .wpforms-field :is(em, label).wpforms-error, .sepri-form .wpforms-error-container, .sepri-form .wpforms-error-alert { display: block; margin: 0; padding: 0; font-family: var(--sans); font-style: normal; font-size: var(--fs-caption); font-weight: 700; line-height: 1.5; color: var(--error); background: none; border: 0; } .s-navy .sepri-form .wpforms-field :is(input[type="text"], input[type="email"], textarea).wpforms-error { border-color: var(--error-navy); } .s-navy .sepri-form :is(.wpforms-field em.wpforms-error, .wpforms-field label.wpforms-error, .wpforms-error-container, .wpforms-error-alert) { color: var(--error-navy); } .sepri-form .wpforms-error-container { margin-bottom: var(--sp-5); } /* -------------------------------------------------------------------------- 28. CONSENTIMIENTO Casilla de 26 px con la etiqueta entera como zona táctil. En La app es discreta: casilla y texto más chicos, sin perder contraste ni vínculo. -------------------------------------------------------------------------- */ /* La casilla la dibuja Blocksy (appearance: none); se usan sus variables: borde claro y visible sobre navy, relleno naranja al marcarla y tilde navy (5.84:1 sobre naranja). En error, el borde toma el color de error. */ .sepri-form { --theme-form-selection-field-initial-color: rgba(255, 255, 255, 0.7); --theme-form-selection-field-active-color: var(--naranja); } .sepri-form .sepri-consent--discreto { --theme-form-selection-field-initial-color: var(--tinta-2); } .sepri-form .sepri-consent input[type="checkbox"]::before { top: -3px; width: 11px; height: 6px; border-color: var(--navy); } .sepri-form .sepri-consent--discreto input[type="checkbox"]::before { width: 9px; height: 5px; } .sepri-form .sepri-consent li input[type="checkbox"].wpforms-error { border: 2px solid var(--error); } .s-navy .sepri-form .sepri-consent li input[type="checkbox"].wpforms-error { border-color: var(--error-navy); } .sepri-form .sepri-consent ul { margin: 0; padding: 0; list-style: none; } .sepri-form .sepri-consent li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--sp-4); margin: 0; padding: var(--sp-2) 0; } .sepri-form .sepri-consent input[type="checkbox"] { flex: none; width: 26px; height: 26px; margin: 1px 0 0; accent-color: var(--naranja); cursor: pointer; } .sepri-form .sepri-consent .wpforms-field-label-inline { flex: 1 1 0; min-width: 0; margin: 0; font-family: var(--sans); font-size: var(--fs-caption); font-weight: 400; line-height: 1.7; color: var(--tinta-navy); cursor: pointer; } .sepri-form .sepri-consent .wpforms-field-label-inline a { color: var(--celeste-claro); text-decoration: underline; text-underline-offset: 3px; } .sepri-form .sepri-consent li > :is(em, label).wpforms-error { flex-basis: 100%; margin-top: var(--sp-2); } .sepri-form .sepri-consent input[type="checkbox"]:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; } .sepri-form .sepri-consent--discreto li { gap: 0 var(--sp-3); padding: 0; } .sepri-form .sepri-consent--discreto input[type="checkbox"] { width: 22px; height: 22px; margin-top: 0; } .sepri-form .sepri-consent--discreto .wpforms-field-label-inline { color: var(--tinta-2); line-height: 1.6; } .sepri-form .sepri-consent--discreto .wpforms-field-label-inline a { color: var(--celeste-texto); } .sepri-form .sepri-consent--discreto input[type="checkbox"]:focus-visible { outline-color: var(--navy); } /* -------------------------------------------------------------------------- 29. ENVÍO — el botón es el CTA global (`btn-cta`) a todo el ancho -------------------------------------------------------------------------- */ .sepri-form .wpforms-submit-container { position: relative; margin: var(--sp-5) 0 0; padding: 0; } body .sepri-form button.wpforms-submit.btn-cta { width: 100%; } .sepri-form .wpforms-submit-spinner { position: absolute; top: 50%; right: -34px; margin-top: -13px; } @media (max-width: 559.98px) { .sepri-form .wpforms-submit-spinner { right: 50%; top: auto; bottom: -34px; margin: 0 -13px 0 0; } } /* -------------------------------------------------------------------------- 30. UBICACIÓN DE CADA FORMULARIO A: panel navy-800 dentro de Contacto. B: debajo del título del acceso anticipado, sobre off-white. -------------------------------------------------------------------------- */ .e-con.form-slot.form-a:has(*) { padding: var(--sp-5); background: var(--navy-800); border: 1px solid var(--linea-navy); border-radius: var(--r-md); } @media (min-width: 560px) { .e-con.form-slot.form-a:has(*) { padding: clamp(24px, 3vw, 40px); } } .s-navy .sepri-form .wpforms-field-label { color: #D5E3EF; } /* ========================================================================== ETAPA 4.5 · AD-A — dirección de arte: profundidad por planos Hero, El modelo y Cómo funciona. Una sola familia de formas: la del portal del hero (rectángulo con una o dos esquinas de radio amplio). Colores del sistema: celeste sólido, celeste tinte y navy. Sin degradés, glow ni sombras nuevas. ========================================================================== */ /* -------------------------------------------------------------------------- 31. SCROLL POR CAPAS — sistema global Un elemento con clase `capas` es el ancla de un grupo de planos: sepri.js escribe en él --capa-p (-1 cuando asoma por abajo, 0 centrado, 1 cuando sale por arriba). Cada plano define su amplitud en px con --capa-a: positiva = plano lejano (va más lento que la página), negativa = plano cercano (va más rápido). --capa-k escala por ancho: 1 desktop, 0.5 tablet, 0 teléfono. Sólo transform; sin JS, con reduced-motion o en el editor el valor es 0 y todo queda en su pose de diseño. -------------------------------------------------------------------------- */ :root { --capa-k: 0; } @media (min-width: 768px) { :root { --capa-k: 0.5; } } @media (min-width: 1080px) { :root { --capa-k: 1; } } @media (prefers-reduced-motion: reduce) { :root { --capa-k: 0; } } .e-con.clip-x { overflow-x: clip; } /* -------------------------------------------------------------------------- 33. EL MODELO — VEP-2: cabecera editorial + fotografía limpia Fotografía a todo el ancho del contenido, sin panel superpuesto (retirado el 29/09: repetía las tres capas que explica "Cómo funciona"). La comparación ("Reaccionar...") pasa a título editorial chico sobre la tabla. -------------------------------------------------------------------------- */ .e-con.modelo-cabecera__titulo { row-gap: 0; } /* Cabecera: el H2 en una sola línea en escritorio (columna ensanchada a 56/44 sólo para esta fila; la foto de abajo no se toca). */ @media (min-width: 900px) { .e-con.modelo-cabecera.cols-43-57 { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); } .modelo-cabecera__titulo h2 { font-size: clamp(1.4rem, calc(2.7vw - 0.1rem), 1.9375rem); white-space: nowrap; } } .elementor-widget-image.modelo-escena__foto { --media-pos: 28% 30%; } .elementor-widget-image.modelo-escena__foto img { --capa-a: -8px; aspect-ratio: 1160 / 540; border-radius: 24px clamp(64px, 8vw, 120px) 24px 24px; transform: translate3d(0, calc(var(--capa-p, 0) * var(--capa-k) * var(--capa-a)), 0); } @media (max-width: 767.98px) { .elementor-widget-image.modelo-escena__foto img { aspect-ratio: 4 / 3; } } .e-con.modelo-escena { isolation: isolate; } /* Comparación: título + bajada sobre la tabla. El total foto→título y bajada→tabla lo da el row-gap del contenedor padre (48 px); el margen negativo acerca la tabla a su bajada (32 px en escritorio, 24 px en teléfono). */ .e-con.modelo-comparacion__intro { row-gap: 8px; margin-bottom: -16px; } @media (max-width: 767.98px) { .e-con.modelo-comparacion__intro { margin-bottom: -24px; } } /* "Reaccionar cuando ya pasó...": H3 semántico. Misma familia y peso que los H2 (Tipografía Global "H2" del widget) pero en la escala de H2 secundario (--fs-h2-sec, 24 → 32 px, la misma de "Qué cubrimos"): es el título de una subsección, no la apertura de la sección. !important porque el estilo del widget lo fija Elementor con mayor especificidad. Una sola línea desde 900 px (≈25,5 em → 32 px = 816 px). */ .modelo-comparacion__titulo .elementor-heading-title { margin: 0; font-size: var(--fs-h2-sec) !important; } @media (min-width: 900px) { .modelo-comparacion__titulo .elementor-heading-title { white-space: nowrap; } } /* Tabla: el encabezado ClubCare en celeste sólido, texto navy (6.1:1) */ @media (min-width: 760px) { .elementor-widget-heading.tabla__th--sepri { background: var(--celeste); border-bottom-color: var(--navy); } } /* -------------------------------------------------------------------------- 34. CÓMO FUNCIONA — Interactive Circle de Essential Addons (preset 2, semicírculo). Reemplaza al timeline de VEP-3/3.1 (29/09). Tres ítems (presencia → triage IA → Nursy), uno activo a la vez: el JS del widget alterna `.active`; acá sólo se viste. Sin autoplay (nada se mueve solo). Íconos: Font Awesome de Elementor, por el control del widget. · ≥ 900 px: semicírculo con los tres botones sobre el arco y el texto del ítem activo dentro. Ancho por el control "Circle Width" (780 / 640 en tablet). · < 900 px: el arco no entra ni deja leer: los tres botones pasan a una fila (pestañas) y el texto del activo va en un panel debajo. Se logra sin tocar el marcado: `.eael-circle-item` pasa a `display: contents` y sus hijos se ubican en una grilla de 3 columnas (fila 1 botones, fila 2 panel). EA usa ids y !important propios: por eso los !important. Selectores con prefijo `body .como-circulo` para superar a los de EA. -------------------------------------------------------------------------- */ .e-con.como-seccion { position: relative; isolation: isolate; overflow: clip; } .e-con.como-seccion::before, .e-con.como-seccion::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; } .e-con.como-seccion::before { width: 640px; height: 640px; left: -320px; top: -180px; border: 10px solid rgba(77, 166, 214, 0.06); } .e-con.como-seccion::after { width: 460px; height: 460px; right: -240px; bottom: -160px; border: 2px solid rgba(77, 166, 214, 0.07); border-left-color: transparent; border-bottom-color: transparent; rotate: 205deg; } @media (max-width: 767px) { .e-con.como-seccion::after { display: none; } .e-con.como-seccion::before { opacity: 0.7; } } /* Encabezado centrado sobre el círculo */ .e-con.como-stack { row-gap: clamp(8px, 2vw, 24px); } .e-con.como__intro { max-width: 46rem; margin-inline: auto; align-items: center; text-align: center; } .como__intro .elementor-widget-text-editor { max-width: 56ch; } /* Escritorio ancho (≥ 1240): textos a la izquierda, semicírculo a la derecha (29/09). Así la sección no crece en altura. Debajo de 1240 se mantiene la composición apilada y centrada. */ @media (min-width: 1240px) { .e-con.como-stack { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(32px, 3vw, 48px); align-items: center; } .e-con.como__intro { max-width: none; margin-inline: 0; align-items: flex-start; text-align: left; } body .e-con.como-stack .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 { margin-top: 0; } } /* --- Botones (comunes a semicírculo y pestañas) --- */ body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn { box-shadow: none; background: transparent; cursor: pointer; border-radius: 50%; transition: none; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-icon-shapes { display: none; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon { padding: 0; background: var(--navy-700); border: 2px solid rgba(142, 207, 236, 0.32); box-sizing: border-box; transition: background-color 0.25s ease, border-color 0.25s ease; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon .eael-circle-btn-icon-inner { gap: 6px; background: none; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon .eael-circle-btn-icon-inner svg { width: 26px; min-width: 26px; height: 26px; min-height: 26px; fill: var(--celeste-claro); transition: fill 0.25s ease; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon .eael-circle-btn-icon-inner .eael-circle-btn-txt { font-family: var(--sans); font-size: 0.9375rem; font-weight: 700; line-height: 1.15; color: var(--blanco); transition: color 0.25s ease; } /* Hover / activo: naranja de marca con texto e ícono navy (5,84:1) */ body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn:hover .eael-circle-btn-icon, body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn.active .eael-circle-btn-icon { background: var(--naranja); border-color: var(--naranja); } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn:hover .eael-circle-btn-icon .eael-circle-btn-icon-inner svg, body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn.active .eael-circle-btn-icon .eael-circle-btn-icon-inner svg { fill: var(--navy); } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn:hover .eael-circle-btn-icon .eael-circle-btn-icon-inner .eael-circle-btn-txt, body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn.active .eael-circle-btn-icon .eael-circle-btn-icon-inner .eael-circle-btn-txt { color: var(--navy); } /* Hover sobre un ítem que no es el activo: sólo se ilumina el borde */ body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn:hover:not(.active) .eael-circle-btn-icon { background: var(--navy-800); border-color: var(--celeste-claro); } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn:hover:not(.active) .eael-circle-btn-icon .eael-circle-btn-icon-inner svg { fill: var(--celeste-claro); } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn:hover:not(.active) .eael-circle-btn-icon .eael-circle-btn-icon-inner .eael-circle-btn-txt { color: var(--blanco); } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn:focus-visible { outline: 3px solid var(--celeste-claro); outline-offset: 4px; } /* --- Texto del ítem --- */ body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn-content { transition: opacity 0.3s ease, visibility 0.3s ease; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-content { color: var(--tinta-navy); font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55; text-align: center; } body .como-circulo .eael-circle-content h3 { margin: 0 0 10px; font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--blanco); text-transform: none; } body .como-circulo .eael-circle-content p { margin: 0; } /* --- Semicírculo (escritorio) --- */ @media (min-width: 900px) { body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 { margin-top: 44px; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info { padding: 52px 52px 0; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner { border: 3px solid rgba(142, 207, 236, 0.32); background: var(--navy-800); } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn { width: 92px; height: 92px; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon .eael-circle-btn-icon-inner svg { width: 26px; min-width: 26px; height: 26px; min-height: 26px; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon .eael-circle-btn-icon-inner .eael-circle-btn-txt { font-size: 0.875rem; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn-content .eael-circle-content { padding: 0 clamp(32px, 4.5vw, 52px) 30px; } body .como-circulo .eael-circle-content h3 { font-size: clamp(1.125rem, 0.95rem + 0.55vw, 1.375rem); } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-content { font-size: 1rem; } } /* --- Animación (escritorio, sólo con movimiento permitido) --------------- Entrada única al llegar a la vista (sepri.js pone `como-in`): el arco sube y se asienta, los tres botones aparecen con un pequeño rebote, uno tras otro. Al activar un ítem: anillo que late dos veces en el botón y texto que entra desde abajo. Hover: el botón se eleva y crece, el ícono crece un poco (sin girar). Se usan las propiedades `translate` y `scale` (no `transform`) porque EA centra cada botón con `transform: translate(-50%, -50%)`. El estado oculto previo a la entrada sólo existe con `sepri-reveal` (JS activo, fuera del editor); sin JS o con reduced-motion todo se ve completo. */ @media (min-width: 900px) and (prefers-reduced-motion: no-preference) { @keyframes comoArco { from { opacity: 0; translate: 0 32px; scale: 0.94; } to { opacity: 1; translate: 0 0; scale: 1; } } @keyframes comoBoton { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } } @keyframes comoTexto { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } } @keyframes comoLatido { 0% { opacity: 0.65; scale: 1; } 100% { opacity: 0; scale: 1.5; } } /* Estado previo a la entrada */ .sepri-reveal body:not(.elementor-editor-active) .como-circulo:not(.como-in) .eael-circle-inner, .sepri-reveal body:not(.elementor-editor-active) .como-circulo:not(.como-in) .eael-circle-btn { opacity: 0; } /* Entrada */ body .como-circulo.como-in .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner { animation: comoArco 0.85s cubic-bezier(0.22, 1, 0.36, 1) backwards; } body .como-circulo.como-in .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn { animation: comoBoton 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; } body .como-circulo.como-in .eael-circle-item:nth-child(1) .eael-circle-btn { animation-delay: 0.45s !important; } body .como-circulo.como-in .eael-circle-item:nth-child(2) .eael-circle-btn { animation-delay: 0.6s !important; } body .como-circulo.como-in .eael-circle-item:nth-child(3) .eael-circle-btn { animation-delay: 0.75s !important; } /* Texto del ítem activo: entra cada vez que se activa */ body .como-circulo.como-in .eael-circle-btn-content.active .eael-circle-content > * { animation: comoTexto 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s backwards; } body .como-circulo.como-in .eael-circle-btn-content.active .eael-circle-content > p { animation-delay: 0.18s; } /* Hover / foco del botón */ body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn { transition: translate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } body .como-circulo .eael-circle-btn .eael-circle-btn-icon-inner svg { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), fill 0.25s ease; } body .como-circulo .eael-circle-btn:hover, body .como-circulo .eael-circle-btn:focus-visible { translate: 0 -6px; scale: 1.08; } body .como-circulo .eael-circle-btn:hover .eael-circle-btn-icon-inner svg, body .como-circulo .eael-circle-btn:focus-visible .eael-circle-btn-icon-inner svg { transform: scale(1.15); } /* Anillo que late en el botón recién activado (dos veces, no en bucle) */ body .como-circulo .eael-circle-btn.active::after { content: ''; position: absolute; inset: -3px; border: 2px solid var(--naranja); border-radius: 50%; pointer-events: none; animation: comoLatido 1.4s ease-out 0.2s 2 backwards; } } /* --- Pestañas (teléfono y tablet vertical) --- */ @media (max-width: 899.98px) { body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 { margin-top: 28px; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info { padding: 0 !important; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(8px, 2.5vw, 16px); row-gap: 18px; width: 100% !important; height: auto !important; border: 0 !important; border-radius: 0 !important; background: none; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-item { display: contents; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; height: auto !important; grid-row: 1; border-radius: 18px; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-item:nth-child(1) .eael-circle-btn { grid-column: 1; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-item:nth-child(2) .eael-circle-btn { grid-column: 2; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-item:nth-child(3) .eael-circle-btn { grid-column: 3; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon { border-radius: 18px; padding: 14px 6px 12px; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon .eael-circle-btn-icon-inner { gap: 8px; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon .eael-circle-btn-icon-inner svg { width: 24px; min-width: 24px; height: 24px; min-height: 24px; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon .eael-circle-btn-icon-inner .eael-circle-btn-txt { font-size: 0.875rem; overflow-wrap: anywhere; } /* Panel del ítem activo, ancho completo bajo las pestañas */ body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn-content { position: static !important; grid-column: 1 / -1; grid-row: 2; display: none !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; border-radius: 0 !important; opacity: 1; visibility: visible; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn-content.active { display: block !important; } body .como-circulo .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn-content .eael-circle-content { display: block; height: auto !important; margin: 0 !important; overflow: visible; padding: clamp(20px, 5vw, 32px) !important; border: 1px solid rgba(142, 207, 236, 0.28) !important; border-radius: 20px !important; background: var(--navy-800) !important; text-align: left; } } @media (prefers-reduced-motion: reduce) { body .como-circulo :is(.eael-circle-inner, .eael-circle-btn, .eael-circle-content > *)::after, body .como-circulo .eael-circle-btn-icon, body .como-circulo .eael-circle-btn svg, body .como-circulo .eael-circle-btn-icon .eael-circle-btn-icon-inner .eael-circle-btn-txt, body .como-circulo .eael-circle-btn-content { transition: none !important; } } /* ========================================================================== ETAPA 4.5 · AD-B — Respaldo, Qué cubrimos, Ecosistema Mismo lenguaje que AD-A: planos, celeste como superficie, curvas de la familia del portal y superposición controlada. ========================================================================== */ /* 35. RESPALDO — ver bloque 17 (tarjeta con foto superpuesta y cifras). */ /* 36. QUÉ CUBRIMOS — ver bloque 19 (tarjetas con sombra suave). */ /* 37. ECOSISTEMA — ver bloque 20 (esquema de derivación). */ /* ========================================================================== ETAPA 4.5 · AD-C — La app y transiciones ========================================================================== */ /* -------------------------------------------------------------------------- 38. LA APP — planos alrededor del teléfono Plano 1 off-white (fijo) · plano 2 la banda celeste tinte existente · plano 2b un arco celeste sólido que asoma por arriba y detrás del teléfono · plano 3 el teléfono (bloque 23: fijo, con entrada desde abajo; desde 30/09 sin parallax propio) · plano 4 texto y formulario, fijos. Ancla de capas: `app__escena`. En teléfono los planos quedan quietos. -------------------------------------------------------------------------- */ .app__escena::before { --capa-a: 12px; transform: translate3d(0, calc(var(--capa-p, 0) * var(--capa-k) * var(--capa-a)), 0); } .e-con.app__escena::after { --capa-a: 8px; content: ''; position: absolute; z-index: -1; top: 8%; left: 50%; right: max(4%, 50% - var(--tel-w) / 2 - 24px); /* no más allá del teléfono */ height: 22%; background: var(--celeste); border-radius: var(--r-md) clamp(64px, 16vw, 110px) var(--r-md) var(--r-md); transform: translate3d(0, calc(var(--capa-p, 0) * var(--capa-k) * var(--capa-a)), 0); pointer-events: none; } @media (min-width: 1080px) { .e-con.app__escena::after { top: 5%; left: 42%; right: -4%; height: 30%; border-radius: var(--r-md) clamp(80px, 9vw, 140px) var(--r-md) var(--r-md); } } /* -------------------------------------------------------------------------- 39. TRANSICIÓN ECOSISTEMA → LA APP Sin remate: se retiró el saliente navy (29/09), no aportaba nada. El corte entre las dos secciones es recto. -------------------------------------------------------------------------- */ .e-con.app-seccion { position: relative; isolation: isolate; } /* ========================================================================== ETAPA 5 — COMPORTAMIENTO ========================================================================== */ /* -------------------------------------------------------------------------- 40. CTA STICKY — aparece pasado el hero, se retira en Contacto Es el mismo componente .btn-cta: esta clase sólo lo ubica y lo hace entrar y salir. Ni color, ni forma, ni tipografía propios. Oculto, queda fuera de la pantalla, de los clics y del orden de tabulación. Teléfono: barra a lo ancho al pie. Desde 640 px: píldora abajo a la derecha. -------------------------------------------------------------------------- */ body a.sticky-cta.btn-cta { position: fixed; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); z-index: 90; opacity: 0; transform: translateY(12px); visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s, background-color var(--btn-dur) ease, color var(--btn-dur) ease, padding var(--btn-dur) ease; } body a.sticky-cta.btn-cta.visible { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s, background-color var(--btn-dur) ease, color var(--btn-dur) ease, padding var(--btn-dur) ease; } @media (min-width: 640px) { body a.sticky-cta.btn-cta { left: auto; right: clamp(20px, 2.4vw, 32px); bottom: clamp(20px, 2.4vw, 32px); } } @media (prefers-reduced-motion: reduce) { body a.sticky-cta.btn-cta, body a.sticky-cta.btn-cta.visible { transform: none; transition: none; } } /* Desde 1000 px el header de Blocksy muestra su CTA fijo: el flotante no existe (ni visible, ni enfocable, ni en el árbol de accesibilidad) */ @media (min-width: 1000px) { body a.sticky-cta.btn-cta, body a.sticky-cta.btn-cta.visible { display: none; } } /* ========================================================================== ETAPA 6A — PÁGINAS DE SOPORTE (/gracias/) Y LEGALES Sin dirección de arte compleja y sin efectos: lectura y claridad. ========================================================================== */ /* -------------------------------------------------------------------------- 41. GRACIAS — un panel navy con la curva del portal y su lámina celeste -------------------------------------------------------------------------- */ .e-con.gracias { padding-top: var(--seccion-y); padding-bottom: var(--seccion-y); isolation: isolate; } .e-con.gracias__panel { --lamina: clamp(12px, 1.8vw, 24px); position: relative; /* sin isolation: la lámina (z-index -1) debe quedar detrás del fondo navy */ width: 100%; max-width: 820px; gap: var(--sp-5); padding: clamp(32px, 7vw, 80px) clamp(24px, 6vw, 72px); border-radius: var(--r-md) clamp(56px, 10vw, 150px) var(--r-md) clamp(40px, 6vw, 96px); } .e-con.gracias__panel::before { content: ''; position: absolute; z-index: -1; top: var(--lamina); left: calc(-1 * var(--lamina)); right: var(--lamina); bottom: calc(-1 * var(--lamina)); width: auto; height: auto; opacity: 1; background: var(--celeste); border-radius: inherit; pointer-events: none; } .gracias__texto { max-width: 52ch; } .e-con.gracias__acciones { margin-top: var(--sp-3); } /* -------------------------------------------------------------------------- 42. PÁGINAS LEGALES — ancho de lectura, índice y marcas de pendiente -------------------------------------------------------------------------- */ .e-con.legal-pagina { padding-top: var(--seccion-y-sec); padding-bottom: var(--seccion-y); } .e-con.legal { width: 100%; max-width: 46rem; margin-inline: auto; } .legal__meta { margin-top: var(--sp-3); } .elementor-widget-text-editor.legal__aviso { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--celeste-lavado); border-left: 3px solid var(--celeste); border-radius: var(--r-sm); } .elementor-widget-text-editor.legal__indice { margin-top: var(--sp-6); padding: var(--sp-5) 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); } .legal__indice .legal__indice-titulo { margin: 0 0 var(--sp-2); font-weight: 700; font-size: var(--fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); } .legal__indice ol { margin: 0; padding-left: 0; list-style: none; } .legal__indice li { margin: 0; } .legal__indice a { display: inline-flex; align-items: center; min-height: var(--tap); } .elementor-widget-heading.legal__h2 { margin-top: var(--sp-7); scroll-margin-top: 96px; /* el header fijo no tapa el título */ } .elementor-widget-text-editor.legal__texto { margin-top: var(--sp-4); } .legal__texto p { margin: 0 0 var(--sp-4); } .legal__texto h3 { margin: var(--sp-5) 0 var(--sp-2); font-family: var(--sans); font-size: var(--fs-body); font-weight: 700; line-height: 1.4; color: var(--tinta); } .legal__texto ul { margin: 0 0 var(--sp-4); padding-left: 1.25em; } .legal__texto li { margin: 0 0 var(--sp-2); padding-left: 0.25em; } .legal__texto li::marker { color: var(--celeste-texto); } .legal :is(.legal__texto, .legal__indice, .legal__aviso) a { color: var(--celeste-texto); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; } .legal :is(.legal__texto, .legal__indice, .legal__aviso) a:hover { color: var(--navy); } /* Dato que falta: visible y legible (navy sobre celeste tinte, 14.6:1) */ mark.pendiente { padding: 0 4px; background: var(--celeste-tinte); color: var(--tinta); font-weight: 700; border-radius: 2px; } /* ========================================================================== VEP-1 v2 — FORMAS AMBIENTALES DE MARCA ========================================================================== */ /* -------------------------------------------------------------------------- 43. FORMAS AMBIENTALES — un sistema, no decoración Círculos derivados del isotipo: anillo, disco y arco (anillo abierto). Un Container vacío `forma forma--{tipo} forma--{lugar}` al final de su sección, detrás del contenido y recortado por los bordes de la sección. Profundidad con el sistema de capas (la sección es el ancla): --capa-a es la amplitud; el recorrido total mientras la sección cruza la pantalla es 2 × --capa-a. Cinco en desktop (el anillo del hero se retiró con hero.png, que trae su propio círculo), una en teléfono. Estáticas en teléfono y con reduced-motion (--capa-k = 0). -------------------------------------------------------------------------- */ /* La sección (con o sin .e-con-inner) es el contexto: la forma pinta sobre su fondo y debajo del contenido, y queda recortada por sus bordes. */ .e-con:has(> .e-con.forma), .e-con:has(> .e-con-inner > .e-con.forma) { isolation: isolate; overflow: clip; } .e-con.forma { --d: 600px; --trazo: 8px; --op: 0.08; position: absolute; z-index: -1; width: var(--d); height: var(--d); min-height: 0; max-width: none; margin: 0; padding: 0; box-sizing: border-box; border-radius: 50%; pointer-events: none; transform: translate3d(0, calc(var(--capa-p, 0) * var(--capa-k) * var(--capa-a, 0px)), 0); } .e-con.forma--anillo, .e-con.forma--arco { background: none; border: var(--trazo) solid rgb(77 166 214 / var(--op)); } /* Arco: el anillo sin su cuarto inferior izquierdo */ .e-con.forma--arco { border-left-color: transparent; border-bottom-color: transparent; rotate: var(--giro, 0deg); } .e-con.forma--disco { background: rgb(77 166 214 / var(--op)); border: 0; } /* will-change sólo mientras la sección está cerca de la pantalla */ .capas--activa .e-con.forma, .capas--activa.hero .hero__asset { will-change: transform; } /* El modelo: gran arco de trazo fino que entra por la izquierda */ .e-con.forma--modelo { --d: 700px; --trazo: 2px; --op: 0.18; --capa-a: 6px; --giro: 20deg; left: -575px; top: 380px; } /* Respaldo: arco muy tenue que entra por la derecha, arriba */ .e-con.forma--respaldo { --d: 820px; --trazo: 8px; --op: 0.06; --capa-a: -7px; --giro: 200deg; right: -700px; top: 40px; } /* Ecosistema (fondo gris): disco celeste que entra por la izquierda; más presente que el resto (0,18) porque sobre el gris no se distinguía */ .e-con.forma--eco { --d: 560px; --op: 0.18; --capa-a: 5px; left: -430px; top: -40px; } /* Contratación: arco casi ambiental por la derecha, abajo */ .e-con.forma--contrato { --d: 700px; --trazo: 6px; --op: 0.07; --capa-a: -5px; --giro: 160deg; right: -560px; top: 110px; } /* Contacto (navy): anillo discreto por la izquierda, arriba */ .e-con.forma--contacto { --d: 420px; --trazo: 16px; --op: 0.07; --capa-a: 6px; left: -305px; top: 56px; } /* Teléfono: sólo el anillo de Contacto, arriba a la derecha, lejos del texto, más chico y quieto */ @media (max-width: 767px) { .e-con.forma--modelo, .e-con.forma--respaldo, .e-con.forma--contrato, .e-con.forma--eco { display: none; } .e-con.forma--contacto { --d: 200px; --trazo: 12px; left: auto; right: -130px; top: -70px; } } /* ========================================================================== VEP-2.1 — TABLA COMPARATIVA (EA Data Table) ========================================================================== */ /* -------------------------------------------------------------------------- 44. TABLA COMPARATIVA — EA Data Table Free adaptado a marca (VEP-2.1, pasada de estilo sobre la Data Table Style 02 de Essential Addons) 3 columnas reales (Criterio · Modelo tradicional · SEPRI ClubCare). Toda la tabla en Carlito (es UI, no contenido editorial): tipografía y relleno por los controles nativos del widget (Elementor genera su propio