/** Colors **/ /** Body **/ /** Buttons **/ /** Forms **/ /** Fonts **/ /* Fuentes servidas desde el theme (font-display: swap). Oxygen y Schoolbell: Google Fonts (OFL). Switzer: Fontshare (uso comercial gratuito). */ @font-face{font-family:'Oxygen';font-style:normal;font-weight:400;font-display:swap;src:url("https://51203560.fs1.hubspotusercontent-na1.net/hubfs/51203560/raw_assets/public/acervia-theme/fonts/oxygen-400-0.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Oxygen';font-style:normal;font-weight:400;font-display:swap;src:url("https://51203560.fs1.hubspotusercontent-na1.net/hubfs/51203560/raw_assets/public/acervia-theme/fonts/oxygen-400-1.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:'Oxygen';font-style:normal;font-weight:700;font-display:swap;src:url("https://51203560.fs1.hubspotusercontent-na1.net/hubfs/51203560/raw_assets/public/acervia-theme/fonts/oxygen-700-2.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Oxygen';font-style:normal;font-weight:700;font-display:swap;src:url("https://51203560.fs1.hubspotusercontent-na1.net/hubfs/51203560/raw_assets/public/acervia-theme/fonts/oxygen-700-3.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:'Schoolbell';font-style:normal;font-weight:400;font-display:swap;src:url("https://51203560.fs1.hubspotusercontent-na1.net/hubfs/51203560/raw_assets/public/acervia-theme/fonts/schoolbell-400-4.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:'Switzer';font-style:normal;font-weight:400;font-display:swap;src:url("https://51203560.fs1.hubspotusercontent-na1.net/hubfs/51203560/raw_assets/public/acervia-theme/fonts/switzer-400.woff2") format('woff2');} @font-face{font-family:'Switzer';font-style:normal;font-weight:500;font-display:swap;src:url("https://51203560.fs1.hubspotusercontent-na1.net/hubfs/51203560/raw_assets/public/acervia-theme/fonts/switzer-500.woff2") format('woff2');} @font-face{font-family:'Switzer';font-style:normal;font-weight:600;font-display:swap;src:url("https://51203560.fs1.hubspotusercontent-na1.net/hubfs/51203560/raw_assets/public/acervia-theme/fonts/switzer-600.woff2") format('woff2');} @font-face{font-family:'Switzer';font-style:normal;font-weight:700;font-display:swap;src:url("https://51203560.fs1.hubspotusercontent-na1.net/hubfs/51203560/raw_assets/public/acervia-theme/fonts/switzer-700.woff2") format('woff2');} :root { /* === Design system AcervoIA (fuente: marketing/branding/tokens.css) === */ /* Base */ --cream: #FFFEF7; /* fondo principal */ --sand: #F1F0E9; /* tarjetas y secciones alternas */ --ink: #101731; /* texto principal, bandas oscuras de demo */ --ink-78: rgba(16, 23, 49, .78); /* párrafos */ --ink-45: rgba(16, 23, 49, .45); /* texto de apoyo, revelado por scroll */ --line: rgba(16, 23, 49, .12); /* bordes */ --pure-white: #FFFFFF; /* Marca */ --coral: #FF5757; --coral-600: #D13A3A; /* botón principal con texto crema (contraste AA) */ --brand-gradient: linear-gradient(120deg, #FF5757 0%, #FFC2A8 50%, #A5EBD6 100%); /* Acento por servicio: pastel (relleno, botones de servicio) / strong (íconos, líneas, puntos) */ --diag: #FFD98A; --diag-strong: #C99212; --brain: #A5C8EB; --brain-strong: #2F6FB5; --agente: #A5EBD6; --agente-strong: #1E9E78; --backoff: #CDBEF4; --backoff-strong: #6B4FD8; --retainer: #FFC2A8; --retainer-strong:#E0703F; /* Layout: ancho del contenedor de contenido (fondos y video van a todo el ancho) */ --container: 1280px; /* Botones más rectos (proporción cuadrada, no píldora) y azul de contraste invertido */ --radius-btn: 10px; --blue: var(--brain-strong); --blue-deep: #14335F; /* azul oscuro de los paneles de resultado de las calculadoras */ /* Tipografía */ --font: 'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif; /* texto e interfaz */ --font-head: 'Oxygen', 'Switzer', system-ui, sans-serif; /* títulos */ --font-hand: 'Schoolbell', cursive; /* anotaciones a mano */ /* === Alias heredados (los módulos existentes los usan; se migran poco a poco a los nombres nuevos) === */ --white: var(--cream); /* "blanco" de página = crema; texto sobre tinta = crema */ --gray-900: var(--ink); --gray-800: var(--ink); --gray-700: var(--ink-78); --gray-500: var(--ink-45); --gray-300: var(--line); --gray-100: var(--sand); --accent-diagnostico: var(--diag-strong); --tint-diagnostico: var(--diag); --accent-brain: var(--brain-strong); --tint-brain: var(--brain); --accent-agente: var(--agente-strong); --tint-agente: var(--agente); --accent-backoffice: var(--backoff-strong); --tint-backoffice: var(--backoff); --accent-retainer: var(--retainer-strong); --tint-retainer: var(--retainer); } /* Variables semánticas del theme. Los valores salen de css/tokens.css (fuente: marketing/branding/tokens.css). */ :root { /* Alias semánticos del theme, mapeados a los tokens de css/tokens.css */ --acervia-primary: var(--ink); --acervia-secondary: var(--sand); --acervia-accent: var(--coral-600); --acervia-text: var(--ink); --acervia-white: var(--cream); --color-primary: var(--ink); --color-accent: var(--coral-600); --color-bg: var(--cream); --color-surface: var(--sand); --color-surface-2: var(--sand); --color-text: var(--ink); --color-muted: var(--ink-45); --color-border: var(--line); /* Tipografía (Oxygen, Switzer y Schoolbell) */ /* --font, --font-head y --font-hand viven en css/tokens.css */ /* Forma y movimiento */ --radius-sm: 8px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 100px; --transition: all 0.25s ease; --touch-target: 44px; --nav-h: 72px; --gutter: clamp(16px, 4vw, 60px); } /* CSS variables */ :root { --column-gap: 2.13%; --column-width-multiplier: 8.333; } /* Mobile layout */ .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12{ min-height: 1px; width: 100%; } /* Desktop layout */ @media (min-width: 993px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); } .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); } .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100)); } .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100)); } .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)); } .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100)); } .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100)); } .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100)); } .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100)); } .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100)); } } .bg-overlay-editor, .shape-divider-editor { background: repeating-linear-gradient(45deg, rgba(16, 23, 49, 1.0) , rgba(16, 23, 49, 1.0) 10px, rgba(69, 74, 93, 1.0) 10px, rgba(69, 74, 93, 1.0) 20px); } :root { --primary: #101731; --secondary: #454A5D; --tertiary: #F1F0E9; --heading: #101731; --body: #454A5D; --light: #FFFFFF; --dark: #101731; } *, *:before, *:after { box-sizing: border-box; } body, html { moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } p, pre, blockquote, ol, ul, dl { margin-top: 0; } ul { list-style-position: inside; } h1, h2, h3, h4, h5, h6 { margin-top: 0; } img { max-width: 100%; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } .container-fluid.body-container { padding: 0; } .content-wrapper, .container { max-width: none; } .dnd-section { padding: 64px 20px; } .dnd-section .widget-type-cell { padding-left: 0px; padding-right: 0px; } @media (max-width: 992px) { .dnd-section { padding-top: 64px; padding-bottom: 64px; padding-right: 20px; padding-left: 20px; } .dnd-section .widget-type-cell { padding-left: 0px; padding-right: 0px; } } .dnd-section > .row-fluid { max-width: none; margin-left: auto; margin-right: auto; } @media (max-width: 992px) { .dnd-section .widget-type-cell { padding-left: 0px; padding-right: 0px; } } body, html { font-size: 18px; color: #454A5D; font-family: Arial; font-style: normal; font-weight: normal; text-decoration: none; line-height: 1.4em; letter-spacing: 0em; } @media(max-width: 992px) { body, html { font-size: 16px; } } @media(max-width: 768px) { body, html { font-size: 16px; } } /** Paragraphs */ p { margin-bottom: 1.8em; } /* Anchor Links */ a:hover, a:focus { text-decoration: underline; } a { font-size: 18px; color: #101731; text-transform: none; line-height: 1.4em; letter-spacing: 0em; } @media(max-width: 992px) { a { font-size: 16px; } } @media(max-width: 767px) { a { font-size: 16px; } } a:hover, a:focus { color: #101731; } a:active { color: #101731; } strong { font-weight: 700; } code { vertical-align: bottom; } pre { overflow: auto; -ms-overflow-style: scrollbar; } /* Headings */ h1, h2, h3, h4, h5, h6 { margin-top: 0; word-break: normal; } h1 { font-size: 71px; color: #101731; font-family: Arial; font-style: normal; font-weight: 800; text-decoration: none; text-transform: none; line-height: 1.2em; letter-spacing: 0em; margin-bottom: 0.5em; } @media(max-width: 992px) { h1 { font-size: 61px; } } @media(max-width: 768px) { h1 { font-size: 49px; } } h2 { font-size: 51px; color: #101731; font-family: Arial; font-style: normal; font-weight: 700; text-decoration: none; text-transform: none; line-height: 1.2em; letter-spacing: 0em; margin-bottom: 0.64em; } @media(max-width: 992px) { h2 { font-size: 44px; } } @media(max-width: 768px) { h2 { font-size: 41px; } } h3 { font-size: 42px; color: #101731; font-family: Arial; font-style: normal; font-weight: 700; text-decoration: none; text-transform: none; line-height: 1.2em; letter-spacing: 0em; margin-bottom: 0.5em; } @media(max-width: 992px) { h3 { font-size: 36px; } } @media(max-width: 768px) { h3 { font-size: 33px; } } h4 { font-size: 32px; color: #101731; font-family: Arial; font-style: normal; font-weight: 500; text-decoration: none; text-transform: none; line-height: 1.2em; letter-spacing: 0em; margin-bottom: 0.5em; } @media(max-width: 992px) { h4 { font-size: 26px; } } @media(max-width: 768px) { h4 { font-size: 26px; } } h5 { font-size: 24px; color: #101731; font-family: Arial; font-style: normal; font-weight: 500; text-decoration: none; text-transform: none; line-height: 1.2em; letter-spacing: 0em; margin-bottom: 0.5em; } @media(max-width: 992px) { h5 { font-size: 20px; } } @media(max-width: 768px) { h5 { font-size: 20px; } } h6 { font-size: 20px; color: #101731; font-family: Arial; font-style: normal; font-weight: 500; text-decoration: none; text-transform: none; line-height: 1.2em; letter-spacing: 0em; margin-bottom: 0.5em; } @media(max-width: 992px) { h6 { font-size: 18px; } } @media(max-width: 768px) { h6 { font-size: 18px; } } blockquote { margin-top: 0rem; border-left-style: solid; padding-left: 15px; color: #454A5D; font-family: Arial; font-style: normal; font-weight: normal; text-decoration: none; text-transform: none; line-height: 1.2em; letter-spacing: 0em; margin-bottom: 0.5em; margin-left: 2em; border-left-color: #101731; border-left-width: 3px; } /** Lists **/ .body-container-wrapper li { color: #454A5D; font-family: Arial; font-style: normal; font-weight: normal; text-decoration: none; text-transform: none; line-height: 1.4em; letter-spacing: 0em; margin-bottom: 0.2em; } /****************** BUTTONS GENERAL STYLES ***********************/ button, .button, .hs-button { -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; letter-spacing: 0; text-align: center; text-decoration: none; position: relative; z-index: 2; transform: scale(1); outline: none; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } button:not(.button--simple), .button:not(.button--simple), .hs-button:not(.button--simple){ position:relative; overflow:hidden; } button:disabled, .button:disabled, .hs-button:disabled { pointer-events: none; opacity:.5; } button:hover, button:focus, button:active, .button:hover, .button:focus, .button:active, .hs-button:hover, .hs-button:focus, .hs-button:active { text-decoration: none; } /* Hover Transition Button */ button:not(.button--simple)::before, button:not(.button--simple)::after, .button:not(.button--simple)::before, .button:not(.button--simple)::after, .hs-button:not(.button--simple)::before, .hs-button:not(.button--simple)::after{ content: none; position: absolute; transition: all 0.3s ease; z-index: -1; } /* Simple Button */ .button.button--simple, .hs-button.button--simple { background: transparent; border: none; border-radius: 0; position: relative; text-decoration: none; } .button.button--simple:after, .hs-button.button--simple:after { content: none; left: 0; position: absolute; width: 100%; } .button.button--simple:hover, .button.button--simple:focus, .hs-button.button--simple:hover, .hs-button.button--simple:focus, .button.button--simple:active, .hs-button.button--simple:active{ background: transparent; border: none; } /**************** END BUTTONS GENERAL STYLES *********************/ /****************** BUTTONS ALIGNMENT ***********************/ .button--center { text-align:center } .button--right { text-align:right } .button--left { text-align:left } @media (max-width:992px){ .button--center-tablet { text-align:center } .button--right-tablet { text-align:right } .button--left-tablet { text-align:left } } @media (max-width:765px){ .button--center-mobile { text-align:center } .button--right-mobile { text-align:right } .button--left-mobile { text-align:left } } /**************** END BUTTONS ALIGNMENT *********************/ /****************** BUTTONS & ICONS POSITION ***********************/ /* Common styles for svg and img */ .button .button__icon svg, .hs-button .button__icon svg { fill: inherit; display: block; height: 1.1rem; margin-right: 1rem; } .button .button__icon.image-icon img, .hs-button .button__icon.image-icon img { display: block; height: 1.1rem; margin-right: 1rem; } .button.button--icon-right .button__icon, .hs-button.button--icon-right .button__icon { order: 1; } .button.button--icon-right .button__icon svg, .hs-button.button--icon-right .button__icon svg { margin-right: 0; margin-left: 1rem; } .button.button--icon-right .button__icon.image-icon img, .hs-button.button--icon-right .button__icon.image-icon img { margin-right: 0; margin-left: 1rem; } .button:not(.button--icon-right) .button__icon, .hs-button:not(.button--icon-right) .button__icon { order: 0; } /* Resetting svg height to auto for specific class */ .button .button__icon.code-svg svg, .hs-button .button__icon.code-svg svg { height: auto; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .button .button__icon svg, .hs-button .button__icon svg { width: 1.1rem; } } /**************** END BUTTONS & ICONS POSITION *********************/ /****************** PRIMARY BUTTON ***********************/ button, .button, .button.button--primary { font-family: Arial, sans-serif; font-style: normal; font-weight: 500; text-decoration: none; background: rgba(16, 23, 49, 1.0) ; border: 1px solid #101731; border-radius: 0px; color: #ffffff; fill: #ffffff; padding: 0.7em 0.9em; text-transform: uppercase; font-size: 18px; line-height: 1em; -webkit-box-shadow: unset; box-shadow: unset; } button:active, button:focus, .button:focus, .button:active, .button.button--primary:active, .button.button--primary:focus { ; background: rgba(69, 74, 93, 1.0) ; border: 1px solid #454A5D; color: #FFFFFF; fill: #FFFFFF; transform: scale(1.03); } button:hover, .button:hover, .button.button--primary:hover { ; border: 1px solid #454A5D; color: #FFFFFF; fill: #FFFFFF; } button:not(.button--secondary):not(.button--tertiary):not(.button--simple):not(.button--outline):hover, .button:not(.button--secondary):not(.button--tertiary):not(.button--simple):not(.button--outline):hover, .button.button--primary:hover { transform: scale(1.03); } button:hover, .button:hover, .button.button--primary:hover { background: rgba(69, 74, 93, 1.0) ; } /**************** END PRIMARY BUTTON *********************/ /****************** SECONDARY BUTTON ***********************/ .button.button--secondary { font-family: Arial, sans-serif; font-style: normal; font-weight: 500; text-decoration: none; background: rgba(69, 74, 93, 1.0) ; border: 1px solid #454A5D; border-radius: 0px; color: #ffffff; fill: #ffffff; padding: 0.7em 0.9em; text-transform: none; font-size: 18px; line-height: 1em; -webkit-box-shadow: unset; box-shadow: unset; } .button.button--secondary:active, .button.button--secondary:focus { ; background: rgba(69, 74, 93, 0.0) ; border: 1px solid #454A5D; color: #454A5D; fill: #454A5D; transform: scale(1.03); } .button.button--secondary:hover { ; border: 1px solid #454A5D; color: #454A5D; fill: #454A5D; transform: scale(1.03); } .button.button--secondary:hover { background: rgba(69, 74, 93, 0.0) ; } /**************** END SECONDARY BUTTON *********************/ /****************** TERTIARY BUTTON ***********************/ .button.button--tertiary { font-family: Arial, sans-serif; font-style: normal; font-weight: 500; text-decoration: none; background: rgba(241, 240, 233, 1.0) ; border: 1px solid #F1F0E9; border-radius: 0px; color: #ffffff; fill: #ffffff; padding: 0.7em 0.9em; text-transform: none; font-size: 18px; line-height: 1em; -webkit-box-shadow: unset; box-shadow: unset; } .button.button--tertiary:active, .button.button--tertiary:focus { ; background: rgba(241, 240, 233, 0.0) ; border: 1px solid #F1F0E9; color: #F1F0E9; fill: #F1F0E9; transform: scale(1.03); } .button.button--tertiary:hover { ; border: 1px solid #F1F0E9; color: #F1F0E9; fill: #F1F0E9; transform: scale(1.03); } .button.button--tertiary:hover { background: rgba(241, 240, 233, 0.0) ; } /**************** END TERTIARY BUTTON *********************/ /****************** OUTLINE BUTTON ***********************/ .button.button--outline { font-family: Arial, sans-serif; font-style: normal; font-weight: 500; text-decoration: none; background: rgba(16, 23, 49, 0.0) ; border: 1px solid #101731; border-radius: 0px; color: #101731; fill: #101731; padding: 0.7em 0.9em; text-transform: none; font-size: 18px; line-height: 1em; -webkit-box-shadow: unset; box-shadow: unset; } .button.button--outline:active, .button.button--outline:focus { ; background: rgba(16, 23, 49, 1.0) ; border: 1px solid #101731; color: #ffffff; fill: #ffffff; transform: scale(1.03); } .button.button--outline:hover { ; border: 1px solid #101731; color: #ffffff; fill: #ffffff; } .button.button--outline:hover { background: rgba(16, 23, 49, 1.0) ; } /**************** END OUTLINE BUTTON *********************/ /**************** SIMPLE BUTTON *********************/ .button.button--simple { font-family: Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; color: #101731; fill: #101731; text-transform: uppercase; font-size: 18px; line-height: 1em; padding-left: 0; padding-right: 0; -webkit-box-shadow: unset; box-shadow: unset; } .button.button--simple:after { content: none; } .button.button--simple:hover, .button.button--simple:focus { border: none; color: #454A5D; fill: #454A5D; } .button.button--simple:hover:after, .button.button--simple:focus:after, .button.button--simple:active:after { content: none; } /**************** END SIMPLE BUTTON *********************/ /**************** BUTTON SIZING *********************/ .button.button--small { padding: 0.5em 1em; font-size: 16px; line-height: 1em; } .button.button--large { padding: 0.9em 0.9em; font-size: 18px; line-height: 1em; } @media (max-width: 992px) { button, .button, .hs-button { font-size: 18px; } .button.button--small { font-size: 16px; } .button.button--large { font-size: 18px; } } @media (max-width: 765px) { button, .button, .hs-button { font-size: 16px; } .button.button--small { font-size: 14px; } .button.button--large { font-size: 18px; } } /**************** END BUTTON SIZING *********************/ form { min-height: 28px; } .widget-type-form { min-height: 28px; } form fieldset { max-width: 100%!important; } .hs-form label { display: block; float: none; width: auto; font-weight: normal; text-align: left; line-height: 1.2; padding-top: 0; margin-bottom: 10px; } form.hs-form .hs-error-msgs label { margin-top: .5rem; color: rgba(242, 84, 91, 1.0) ; } /* Membership error message */ .form-input-validation-message ul { padding-left: 0; margin: 0; } .form-input-validation-message ul li { line-height: 1rem; } .hs-input { display: inline-block; width: 100%; padding: 9px 10px; font-weight: normal; color: #454A5D; background-color: var(--pure-white); border: 1px solid #FFFFFF; box-sizing: border-box; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; font-size: 14px; } .hs-input[type=checkbox], .hs-input[type=radio] { cursor: pointer; width: auto; height: auto; padding: 0; margin: 3px 5px 3px 0px; line-height: normal; border: none; } .hs-input[type=file] { background-color: var(--pure-white); padding: initial; border: initial; line-height: initial; box-shadow: none; } .hs-input input, .hs-input textarea { transition: border 0.2s linear; } .hs-input:focus { outline: none; border-color: #101731; } textarea.hs-input { height: auto; } select[multiple].hs-input { height: inherit; } form .legal-consent-container .hs-form-booleancheckbox-display>span { margin-left: 0px; } input.hs-input.error, div.field.error input, div.field.error textarea, div.field.error .chzn-choices, textarea.hs-input.error, select.hs-input.error { border-color: rgba(242, 84, 91, 1.0) ; } input.hs-input.error:focus, div.field.error input:focus, div.field.error textarea:focus, div.field.error .chzn-choices:focus, textarea.hs-input.error:focus, select.hs-input.error:focus { border-color: rgba(242, 84, 91, 1.0) ; } .actions { padding: 0; margin-top: 1.5rem; } .inputs-list { margin: 0 0 5px; width: 100%; padding-left: 0; } .inputs-list > li { display: block; padding: 0; width: 100%; padding-top: 0; } .inputs-list label { display: block; float: none; width: auto; padding: 0; line-height: 18px; text-align: left; white-space: normal; font-weight: normal; } .inputs-list:first-child { padding-top: 6px; } .inputs-list > li + li { padding-top: 2px; } .inputs-list label > input, .inputs-list label > span { vertical-align: middle; } ul.no-list { list-style: none; } .hs-form-field { margin-bottom: 16px; } .hs-field-desc { margin: 0px 0px 6px; font-size: 14px; } .hs-form-required { color: #F2545B; margin-left: 4px; } .hs-richtext { margin-bottom: 3px; line-height: 1.2; font-size: ; } .hs-richtext hr { text-align: left; margin-left: 0; width: 91%; } .grecaptcha-badge { margin: 0 auto; } .email-correction, .email-validation { padding-top: 3px; font-size: 12px; } .email-correction a, .email-validation a { cursor: pointer; } @media (max-width: 400px), (min-device-width: 320px) and (max-device-width: 480px) { .email-correction form .form-columns-2 .hs-form-field, .email-correction form .form-columns-3 .hs-form-field, .email-validation form .form-columns-2 .hs-form-field, .email-validation form .form-columns-3 .hs-form-field { float: none; width: 100%; } .email-correction form .form-columns-2 .hs-form-field .hs-input, .email-correction form .form-columns-3 .hs-form-field .hs-input, .email-validation form .form-columns-2 .hs-form-field .hs-input, .email-validation form .form-columns-3 .hs-form-field .hs-input { width: 90%; } .email-correction form .form-columns-2 .hs-form-field input[type=checkbox], .email-correction form .form-columns-2 .hs-form-field input[type=radio], .email-correction form .form-columns-3 .hs-form-field input[type=checkbox], .email-correction form .form-columns-3 .hs-form-field input[type=radio], .email-validation form .form-columns-2 .hs-form-field input[type=checkbox], .email-validation form .form-columns-2 .hs-form-field input[type=radio], .email-validation form .form-columns-3 .hs-form-field input[type=checkbox], .email-validation form .form-columns-3 .hs-form-field input[type=radio] { width: 24px; } } .hs-button, .hs-form-field input[type=text], .hs-form-field input[type=email], .hs-form-field input[type=phone], .hs-form-field input[type=number], .hs-form-field input[type=tel], .hs-form-field input[type=date], .hs-form-field textarea { -webkit-appearance: none; -moz-appearance: none; line-height: 1; } /* Force single column fields to full width inside of fieldsets */ fieldset.form-columns-1 .hs-input:not(.hs-fieldtype-intl-phone) .hs-input:not([type=radio]):not([type=checkbox]), fieldset.form-columns-1 .input>.hs-input, .hs-dateinput input { width: 100% !important; } /** Remove Extra padding on fields inside fieldsets */ @media (max-width: 480px) { fieldset.form-columns-1 .input, fieldset.form-columns-2 .input, fieldset.form-columns-3 .input { margin-right: 0!important; } } fieldset.form-columns-3 .hs-form-field:last-of-type .input, fieldset.form-columns-2 .hs-form-field:last-of-type .input, fieldset.form-columns-1 .hs-form-field:last-of-type .input { margin-right: 0!important; } form, .submitted-message, .hs-richtext { font-family: Arial; } form.hs-form label { font-size: 18px; color: #454A5D; text-transform: none; line-height: 1.2em; } @media(max-width: 992px) { form.hs-form label { font-size: 16px; } } @media(max-width: 767px) { form.hs-form label { font-size: 16px; } } .widget-type-form .form-title { color: #101731; } form legend { color: #454A5D; } form.hs-form fieldset.form-columns-3 .hs-form-field { width: 33.3%; } form input, form .hs-input, form select, form textarea { border-color: #FFFFFF; color: #454A5D; font-size: 18px; text-transform: none; line-height: 1.2em; } @media(max-width: 992px) { form input, form .hs-input, form select, form textarea { font-size: 16px; } } @media(max-width: 767px) { form input, form .hs-input, form select, form textarea { font-size: 16px; } } form .inputs-list input[type=checkbox]+span:before, form .inputs-list input[type=radio]+span:before { border-color: #FFFFFF; } form input:focus, form .hs-input:focus, form select:focus, form textarea:focus { border-color: #101731; } .fn-date-picker .pika-table thead th { color: #FFFFFF; } .hs-input:-moz-placeholder, .hs-input::-webkit-input-placeholder, .hs-field-desc, .hs-dateinput:before, .hs-richtext { color: #454A5D; } .fn-date-picker td.is-today .pika-button { color: #101731; } .fn-date-picker td.is-selected .pika-button { background: #454A5D; } .fn-date-picker td .pika-button:hover { background-color: #454A5D !important; } form input[type=submit], form .hs-button { white-space: pre-wrap; } .hs-input:-moz-placeholder { color: #FFFFFF ; } .hs-input::-webkit-input-placeholder { color: #FFFFFF ; } form input[type=submit], form .hs-button { font-family: Arial, sans-serif; font-style: normal; font-weight: 500; text-decoration: none; background-color: rgba(16, 23, 49, 1.0) ; border: 1px solid #101731; border-radius: 0px; color: #ffffff; fill: ; padding: 0.7em 0.9em; text-transform: uppercase; -webkit-box-shadow: unset; box-shadow: unset; } form input[type=submit]:hover, form input[type=submit]:focus, form .hs-button:hover, form .hs-button:focus { background-color: rgba(69, 74, 93, 1.0) ; border: 1px solid #454A5D; color: #FFFFFF; transform: scale(1.03); } form input[type=submit]:active, form .hs-button:active { background-color: rgba(149, 154, 173, 100); border: 1px solid #454A5D; border-color: #959aad; } form input[type=submit], form .hs-button { padding: 0.7em 0.9em; font-size: 18px; } @media (max-width: 992px) { form input[type=submit], form .hs-button { font-size: 18px; } } @media (max-width: 768px) { form input[type=submit], form .hs-button { font-size: 16px; } } /* === AcervoIA: base global de formularios HubSpot (rectos, tokens). El detalle de cada formulario vive en su modulo. === */ form.hs-form-private .hs-input:not([type="checkbox"]):not([type="radio"]) { border-radius: var(--radius-btn); } form.hs-form-private .hs-error-msgs, form.hs-form-private .hs-error-msgs label { color: var(--coral-600); font-size: 13px; } form.hs-form-private .hs-form-required { color: var(--coral-600); } form.hs-form-private input:focus-visible, form.hs-form-private select:focus-visible, form.hs-form-private textarea:focus-visible { outline: 2px solid var(--coral-600); outline-offset: 0; } /* Menus: el navbar y el drawer viven en modules/acervia-navbar.module/module.css. Regla global: nunca subrayado en navegacion. */ .acervia-nav a, .acervia-nav__drawer a, .rf a { text-decoration: none; } table { margin-bottom: 1rem; border: 1px solid var(--line); } th, td { padding: 0.75rem; vertical-align: top; border: 1px solid var(--line); } thead th, thead td { color: var(--cream); background-color: var(--ink); border-color: var(--ink-78); border-bottom-width: 2px; } thead th { vertical-align: bottom; border-bottom: 2px solid var(--line); } tbody + tbody { border-top: 2px solid var(--line); } th, td { background-color: rgba(255, 255, 255, 1.0); border: 1px solid rgba(69, 74, 93, 1.0); color: rgba(69, 74, 93, 1.0); } thead th, thead td { background-color: rgba(16, 23, 49, 1.0); color: rgba(255, 255, 255, 1.0); } tfoot td { background-color: rgba(255, 255, 255, 1.0); color: rgba(69, 74, 93, 1.0); } table, tbody + tbody { border-color: rgba(69, 74, 93, 1.0); } /* Footer global: banda ink a todo el ancho y enlaces sin subrayado. El diseno completo vive en modules/acervia-footer.module/module.css */ .rf { background: var(--ink); color: rgba(255, 254, 247, .72); } .rf a, .rf a:hover, .rf a:focus, .rf a:active { text-decoration: none; } .footer .featured-image__image { max-width: 250px; } .position-relative { position: relative; } .blog-post .container { padding-right: 0px; padding-left: 0px; } @media (max-width: 992px) { .blog-post .container { padding-right: 20px; padding-left: 20px; } } .hs-inline-edit.lang-en .blog-post__body { min-width: 500px; } .blog-post__sidebar { position: -webkit-sticky; position: sticky; align-self: flex-start; max-width: 395px; min-width: 395px; } @media (max-width: 992px){ .blog-post__sidebar { margin: 0 auto; min-width: 100%; } } .blog-post__main-container{ margin-top: 64px; margin-bottom: 64px; } .blog-post__columns{ display: flex; column-gap: 22px; justify-content: space-between; } @media (max-width: 992px){ .blog-post__columns{ flex-wrap: wrap; flex-direction: column; } } .blog-post__hero { padding: 226px 0 64px; position: relative; background-size: cover; } @media (max-width: 992px) { .blog-post__hero{ padding: 64px 0; } } .blog-post__hero-overlay { background-color: rgba(16, 23, 49, 60%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .blog-post__hero-content { position: relative; z-index: 2; } @media (max-width: 992px) { .blog-post__hero-content { padding: 0 24px; } .blog-post__main-container { padding: 0px 24px; } } .blog-post__tags{ margin-bottom: 6px; display: flex; flex-wrap: wrap; column-gap: 12px; } .blog-post__tag-link { text-decoration: none; } .blog-post__tags a { background-color: #F1F0E9; border-radius: 0px; color: var(--cream); font-size: 14px; font-weight: 500; padding: 4px 12px; display: inline-block; } .blog-post__tags a:hover, .blog-post-hero__author a:hover { text-decoration: none; } .blog-post-hero__author { display: flex; align-items: center; gap: 10px; } .blog-post-hero__author a { color: var(--cream); } .blog-post__hero-content h1{ color: var(--cream); margin: 0; } .blog-post__container{ display: flex; column-gap: 36px; } @media (max-width: 992px){ .blog-post__container{ flex-direction: column-reverse; } } .blog-post__social-sharing{ margin-top: 0; z-index: 1; } .blog-post__progress { position: -webkit-sticky; position: sticky; align-self: flex-start; top: 20px; z-index: 3; } @media (min-width: 992px) { #hs_cos_wrapper_blog-social-sharing { position: -webkit-sticky; position: sticky; align-self: flex-start; top: 20px; z-index: 3; } } @media (max-width: 992px){ .blog-post__social-sharing { margin-top: 64px; } } .blog-post__content{ min-width: 300px; } .blog-post__content h2{ margin: 0; } .blog-post__meta { color: var(--cream); font-size: 16px; font-weight: 500; display: flex; align-items: center; column-gap: 12px; padding: 16px 0 0px; flex-wrap: wrap; row-gap: 12px; } .blog-post__meta path { fill: var(--cream); } .blog-post__author-name { text-decoration: none; color: var(--cream); font-size: 16px; font-weight: 500; } .blog-post__author-name:hover { text-decoration: none; color:var(--cream); } @media (max-width: 500px){ .blog-post__author-name{ width: 80%; } } .blog-post__meta-time { padding: 0 12px; position: relative; } .blog-post__meta-time:before, .blog-post__meta-time:after { background-color: var(--pure-white); content: ""; height: 16px; position: absolute; top: 50%; transform: translateY(-50%); width: 1px; } .blog-post__meta-time:before { left: 0; } .blog-post__meta-time:after { right: 0; } @media (max-width: 765px){ .blog-post__meta-time:before { content: none; } .blog-post__meta-time { padding-left: 0; } .blog-post-hero__author { width: 100%; } } .blog-post__meta-time, .blog-post__meta-date { display: flex; align-items:center; column-gap: 12px; } .blog-post__meta img { object-fit: contain; } .blog-post__author-avatar { border-radius: 50%; } .blog-post__featured-image { max-width: 100%; height: 449px; object-fit: cover; margin-bottom: 48px; } .blog__post_tags-bottom { margin-top: 43px; padding: 12px 0; border-top: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1); } .blog-post__related-posts { position: relative; background-color: var(--sand); padding: 64px 0; } .blog-post-1 .blog-post-1__tag-link, .blog-post-3 .blog-post-3__tag-link { background-color: rgba(241, 240, 233, 1.0) ; } .blog-post__tags h6 { margin-bottom: 0px; color: var(--cream); } .blog-post__newsletter-form { padding: 64px 24px; max-width: 620px; margin: 0 auto; } .blog-post__navigation { display: flex; justify-content: space-between; align-items: center; } @media (max-width: 767px) { .blog-post__navigation { flex-direction: column; align-items: start; row-gap: 12px; } .blog-post__tag-link{ margin-bottom:12px; } } .blog-post__navigation .button .button__icon svg, .hs-button .button__icon svg{ height: 0.9rem; } .system-container { position: relative; background-repeat: no-repeat; background-position: top left, top right; background-size: auto; min-height: 60vh; display: grid; width: 100%; align-content: center; } .error-page { border-radius: 24px; border: 1px solid var(--line); background: var(--pure-white); padding: 20px; width: 100%; } .systems-page .form-input-validation-message ul li { line-height: unset; } .system-container .system-container__aligment { display:flex; justify-content:center; align-items:center; margin:0 auto; max-width: 706px; padding: 57px 0; width: 100%; } .system-container p { margin-bottom: 20px; } .system-container .shadow, .system-container .email-prefs { box-shadow: -4px 9px 25px -6px rgba(0, 0, 0, 0.1); background: var(--pure-white); } .system-container .system-container__box { padding: 32px; margin: 32px auto 0; } .system-container .system-container__card { max-width: 398px; } .system-container .width-70{ max-width: 77%; } .system-container .width-50{ max-width:50%; } .system-container .width-40{ max-width:40%; } .system-container .actions { margin-bottom: 20px; } .system-container input[type="email"], .system-container input[type="password"], .system-container input[type="text"] { width:100% !important; margin-top: 0 !important; height: 100% !important; border-radius: 0; font-size: inherit!important; } .system-container input:not(.hs-button) { display: inline-block; padding: 9px 10px!important; font-weight: normal; color: #454A5D; background-color: var(--pure-white); border: 1px solid var(--ink-45); box-sizing: border-box; } .system-container label { display: block; float: none; width: auto; font-weight: normal; padding-top: 0; margin-bottom: 10px; } .system-container--password form { display: flex; align-items: center; } .system-container .password-prompt input.hs-button.primary.large { margin-top: 0; } .error-page__line { margin: 20px auto; display: block; background: var(--coral); width: 85px; height: 4px; } .system-container__social { margin-top: 32px; } @media screen and (max-width: 1280px) { .system-container .width-70{ max-width:75%; } .system-container .width-50{ max-width:75%; } .system-container .width-40{ max-width:75%; } } @media screen and (max-width: 767px) { .error-page { background: transparent; padding: 0; } .system-container .system-container__aligment { padding: 68px 24px; } .system-container .width-70{ max-width: 100%; } } .system-container .social-links__link { background-color: var(--pure-white); box-shadow: 0px 8px 32px rgb(17 17 26 / 5%), 0px 4px 16px rgb(17 17 26 / 5%); padding: 8px; margin: 0 5px; } .system-container .social-links span, .system-container .social-links__link { display: inline-grid; } .system-container .social-links svg { width: 20px; height: 20px; display: inline-block; color: var(--coral-600); fill: var(--coral-600); } input[type="password"] { display: inline-block; width: 100%; padding: 9px 10px; font-weight: normal; color: ; background-color: var(--pure-white); border: 1px solid; box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } .system-container .error-page__404, .system-container .error-page__500{ position: absolute; font-size: 10rem; margin-left: auto; margin-right: auto; left: 0; right: 0; text-align: center; z-index: 1; } .system-container h1 { margin-bottom: 0; } .system-container .error-page_heading { color: var(--coral-600); font-size: 100px; line-height: 1; } .system-container .error-page__404, .system-container .error-page__500 { color: rgba(16, 23, 49, 0.2); } .system-preferences .page-header h1:after, .system-unsuscribe .page-header h1:after, .system-container-confirmation .page-header h2:after { content: ""; display: block; width: 85px; height: 4px; background: var(--coral); margin: 20px auto; } .system-preferences .page-header { text-align: center; } .system-container .email-prefs { margin-top: 60px; padding: 40px 32px; } .system-container .email-prefs span { color: var(--ink); font-weight: bold; display: flex; } .system-container .item-inner p { margin-bottom: 2em; } .system-container .email-prefs input[type="checkbox"] { display: inline-block; } .system-container .email-prefs input[type="checkbox"]+span:before { content: none; } .system-container .email-prefs input[type="checkbox"]+span { padding-left: 12px; } .system-container .subscribe-options label { display: flex; } .system-unsuscribe form { padding: 20px 32px; background: var(--pure-white); box-shadow: -4px 9px 25px -6px rgba(0, 0, 0, 0.1); max-width: 500px; margin: 12px auto; } .system-container__search .hs-search-field { padding: 32px; max-width: 610px; margin: 12px auto 62px; box-shadow: -4px 9px 25px -6px rgba(0, 0, 0, 0.1); } .system-container .hs-search-results__listing li { border-bottom: 1px solid; margin-bottom: 20px; } .system-container.system-container__search .system-container__aligment { max-width: 860px; } .success { padding: 10px; text-transform: uppercase; color: var(--ink-78); border: 2px solid; display: inline-block; margin: 44px auto 0; } /* ============================================================ AcervoIA - CSS global Reset base, secciones, píldoras, botones, animaciones. Colores solo vía variables de css/tokens.css. Mobile first: sin scroll horizontal desde 360 px. ============================================================ */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); background: var(--cream); color: var(--ink-78); overflow-x: hidden; } /* === TIPOGRAFÍA: Oxygen para títulos, Switzer para texto; tamaños fluidos === */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); color: var(--ink); } h1, .h1 { font-weight: 700; letter-spacing: -0.04em; font-size: clamp(40px, 5vw + 1.5rem, 74px); line-height: 1.04; } h2, .h2 { font-weight: 400; letter-spacing: -0.03em; font-size: clamp(28px, 2vw + 1.4rem, 40px); line-height: 1.12; } h3, .h3 { font-weight: 400; letter-spacing: -0.03em; font-size: clamp(20px, 1vw + 1rem, 26px); line-height: 1.2; } h4, h5, h6 { font-weight: 400; letter-spacing: -0.02em; line-height: 1.25; } p, li { font-family: var(--font); } /* Enlaces de texto: subrayado animado (se activa en el cuerpo de las páginas) */ a { color: var(--ink); } a:hover, a:focus { color: var(--ink); text-decoration: none; } a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; } .acv-link-u { position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; text-decoration: none; } .acv-link-u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .acv-link-u:hover::after, .acv-link-u:focus-visible::after { transform: scaleX(1); } .hs-legal__section a, .acv-prose a, .blog-post__body a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--coral); } /* La barra de navegación es fija: el contenido se desplaza su altura */ .body-wrapper { padding-top: var(--nav-h); } img, video, svg, iframe { max-width: 100%; } table { max-width: 100%; } /* Logo: wordmark SVG. 'Acervo' ink + 'IA' con degradado de firma; el descriptor mide lo mismo que el logo (textLength). */ .acervia-logo { display: inline-flex; line-height: 0; } .acervia-logo-svg { display: block; width: clamp(140px, 14vw, 176px); height: auto; overflow: visible; } .acervia-logo-word { font-family: var(--font-head); font-weight: 700; fill: var(--ink); } .acervia-logo-ia { fill: var(--coral); } .acervia-logo-desc { font-family: var(--font); fill: var(--ink-78); } .acervia-logo-svg text, .acervia-logo-svg tspan { text-decoration: none; } a:hover .acervia-logo, a:focus .acervia-logo, a:hover .acervia-logo-svg { text-decoration: none; } /* === SECCIONES === */ .acervia-section { padding: clamp(48px, 8vw, 100px) var(--gutter); } .acervia-section--gray { background: var(--sand); } .acervia-section__inner { max-width: var(--container); margin: 0 auto; } .section-label, .acervia-section-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-78); margin-bottom: 16px; } .section-title, .acervia-section-title { font-family: var(--font-head); font-size: clamp(28px, 2vw + 1.4rem, 40px); font-weight: 400; line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 clamp(24px, 4vw, 40px); } /* Texto con degradado de firma: solo hero del home, logo y piezas de marca */ .acervia-gradient-text { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* === PÍLDORAS === */ .pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .pill--primary { background: var(--sand); color: var(--ink); border: 1px solid var(--line); } .pill--muted { background: var(--sand); color: var(--ink-78); border: 1px solid var(--line); } /* === BOTONES: sistema unico === Radio var(--radius-btn) (10px), min-height 48px, Switzer 500, sin subrayado. Variantes: .btn--primary (coral-600 + crema), .btn--secondary (contorno ink), .btn--ghost-dark (contorno crema, sobre fondo oscuro). Tamanos: .btn--sm (44px), .btn--md (48px, por defecto), .btn--lg (56px). La flecha animada es .btn-arrow (css/acervia-motion.css). */ .btn, .btn-primary, .btn-secondary, .btn-ghost-dark { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-height: 48px; padding: 14px 22px; font-family: var(--font); font-size: 15px; font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none; white-space: normal; border: 1.5px solid transparent; border-radius: var(--radius-btn); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease; } .btn:hover, .btn:focus, .btn-primary:hover, .btn-secondary:hover, .btn-ghost-dark:hover { text-decoration: none; } .btn--sm { min-height: 44px; padding: 10px 18px; font-size: 14px; } .btn--md { min-height: 48px; padding: 14px 22px; font-size: 15px; } .btn--lg { min-height: 56px; padding: 16px 28px; font-size: 16px; } .btn--primary, .btn-primary { background: var(--coral-600); color: var(--cream); border-color: var(--coral-600); } .btn--primary:hover, .btn--primary:focus-visible, .btn-primary:hover, .btn-primary:focus-visible { background: var(--coral-600); color: var(--cream); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(209, 58, 58, .28); } .btn--secondary, .btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--secondary:hover, .btn--secondary:focus-visible, .btn-secondary:hover, .btn-secondary:focus-visible { background: var(--ink); color: var(--cream); } .btn--ghost-dark, .btn-ghost-dark { background: transparent; color: var(--cream); border-color: rgba(255, 254, 247, .45); } .btn--ghost-dark:hover, .btn--ghost-dark:focus-visible, .btn-ghost-dark:hover, .btn-ghost-dark:focus-visible { background: rgba(255, 254, 247, .12); color: var(--cream); border-color: var(--cream); } .btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost-dark:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .btn--ghost-dark:focus-visible, .btn-ghost-dark:focus-visible { outline-color: var(--cream); } /* Enlace de texto discreto (antes .btn-ghost) */ .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--touch-target); font-family: var(--font); font-size: 15px; font-weight: 500; color: var(--ink-78); text-decoration: none; transition: color .2s ease; } .btn-ghost:hover { color: var(--ink); text-decoration: none; } @media (max-width: 560px) { .btn--block-sm { width: 100%; } } @media (prefers-reduced-motion: reduce) { .btn, .btn-primary, .btn-secondary, .btn-ghost-dark { transition: none; } .btn--primary:hover, .btn-primary:hover { transform: none; } } /* Flecha animada para botones propios del theme (el motion global trae .btn-arrow). */ .acv-btn--arrow::after { content: "92"; display: inline-block; margin-left: 10px; transition: transform .25s ease; } .acv-btn--arrow:hover::after, .acv-btn--arrow:focus-visible::after { transform: translateX(5px); } @media (prefers-reduced-motion: reduce) { .acv-btn--arrow::after { transition: none; } .acv-btn--arrow:hover::after { transform: none; } } /* Botones del editor de HubSpot (modulos button, formularios): rectos, Switzer 500. Sin servicio = coral-600 + crema. */ .button, .hs-button, input[type="submit"] { font-family: var(--font); font-weight: 500; border-radius: var(--radius-btn); } .button:not(.button--secondary):not(.button--tertiary):not(.button--outline):not(.button--simple), .hs-button, input[type="submit"] { background: var(--coral-600); color: var(--cream); border-color: var(--coral-600); } .button:not(.button--secondary):not(.button--tertiary):not(.button--outline):not(.button--simple):hover, .hs-button:hover, input[type="submit"]:hover { background: var(--coral-600); color: var(--cream); box-shadow: 0 10px 24px rgba(209, 58, 58, .28); } .button.button--outline, .button.button--secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); } .button.button--outline:hover, .button.button--secondary:hover { background: var(--ink); color: var(--cream); } /* === ANIMACIONES === */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } /* === SCROLL REVEAL === Solo se oculta cuando js/main.js puso la clase .js en el elemento raiz (html): sin JS todo es visible. */ .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.7,.2,1); } .js [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* === TOQUE MINIMO (44 px) === */ .button, .hs-button, input[type="submit"], select, input[type="text"], input[type="email"], input[type="tel"] { min-height: var(--touch-target); } /* === FULL WIDTH: sin padding lateral en contenedores del layout === Cada módulo pone su propio margen lateral con var(--gutter); los contenedores del theme no suman otro. */ .container-fluid, .container-fluid.body-container, .body-container-wrapper, .dnd-section, .dnd-section > .row-fluid, .dnd-section .widget-type-cell, .row-fluid [class*="span"] { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } /* El hero va debajo del navbar (glass): sin separación superior del body cuando la página tiene hero */ .body-wrapper:has(.acv-hero-top) { padding-top: 0; } /* === Títulos: las palabras nunca se parten a la mitad; solo se rompe una palabra si de verdad no cabe === */ h1, h2, h3, h4, [class*='__title'], [class*='-title'], .acv-title { word-break: normal; overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; } .acv-nw { white-space: nowrap; } /* Rendimiento: las secciones bajo el pliegue no se estilizan ni maquetan hasta acercarse (no incluye héroes, frase, demos ni nada con ScrollTrigger) */ .acv-sec, .acv-tabs-nicho, .acv-calc-dest, .acv-integral, .acv-opera, .acv-metricas, .acv-faq, .acv-cta, .home-def, .home-precios, .rf { content-visibility: auto; contain-intrinsic-size: auto 600px; } /* === Seguridad: todo boton es recto (10px). Excluye chips, tags, puntos, toggles, tabs, cerrar y hamburguesa. === */ a[class*='btn']:not([class*='chip']):not([class*='tag']):not([class*='dot']):not([class*='toggle']):not([class*='tab']):not([class*='close']):not([class*='hamburger']):not([class*='pill']), button:not([class*='chip']):not([class*='tag']):not([class*='dot']):not([class*='toggle']):not([class*='tab']):not([class*='close']):not([class*='hamburger']):not([class*='pill']), .hs-button:not([class*='chip']):not([class*='tag']):not([class*='dot']), input[type='submit']:not([class*='chip']):not([class*='tag']):not([class*='dot']), [class*='__cta']:not([class*='chip']):not([class*='tag']):not([class*='dot']):not([class*='toggle']):not([class*='tab']):not([class*='close']):not([class*='title']):not([class*='text']):not([class*='wrap']):not([class*='row']):not([class*='band']):not([class*='inner']):not([class*='note']):not([class*='sub']), [class*='__btn']:not([class*='chip']):not([class*='tag']):not([class*='dot']):not([class*='toggle']):not([class*='tab']):not([class*='close']):not([class*='hamburger']):not([class*='pill']) { border-radius: var(--radius-btn); } /* AcervoIA motion: estilos globales de animacion (propiedad del agente de motion). Solo transform y opacity. */ /* Boton con flecha que se desplaza al hover/foco. Uso: clase btn-arrow en el enlace y span.btn-arrow__icon con el svg */ .btn-arrow { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; font-family: var(--font); font-weight: 500; font-size: 16px; line-height: 1; text-decoration: none; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; } .btn-arrow:hover, .btn-arrow:focus-visible { transform: translateY(-2px); } .btn-arrow:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .btn-arrow__icon { display: inline-flex; transition: transform .25s ease; } .btn-arrow:hover .btn-arrow__icon, .btn-arrow:focus-visible .btn-arrow__icon { transform: translateX(5px); } .btn-arrow--primary { background: var(--coral-600); color: var(--cream); } .btn-arrow--primary:hover, .btn-arrow--primary:focus-visible { box-shadow: 0 10px 24px rgba(209, 58, 58, .28); color: var(--cream); } .btn-arrow--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); } .btn-arrow--ghost:hover, .btn-arrow--ghost:focus-visible { background: var(--ink); color: var(--cream); } /* Enlace con subrayado animado */ .link-underline { position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; text-decoration: none; } .link-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .link-underline:hover::after, .link-underline:focus-visible::after { transform: scaleX(1); } .link-underline:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 4px; } .link-underline__icon { display: inline-flex; transition: transform .25s ease; } .link-underline:hover .link-underline__icon, .link-underline:focus-visible .link-underline__icon { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .btn-arrow, .btn-arrow__icon, .link-underline::after, .link-underline__icon { transition: none; } .btn-arrow:hover, .btn-arrow:focus-visible { transform: none; } } /* AcervoIA: componentes compartidos del contenido (tablas, chips, iconos y nota de actualización). Propiedad del agente de contenido. Todo con tokens de css/tokens.css; sin alias heredados. Tablas: tarjeta con radio 16px, encabezado con relleno, primera columna en sand, columna AcervoIA destacada, cebra y hover de fila, y en móvil (menos de 720px) cada fila se apila como tarjeta usando data-label. */ /* Acento por servicio (mismas variables que los módulos; permite usar el componente sin otro módulo en la página) */ .acv-acc--none{--acc:var(--coral);--acc-tint:var(--sand)} .acv-acc--diagnostico{--acc:var(--diag-strong);--acc-tint:var(--diag)} .acv-acc--brain{--acc:var(--brain-strong);--acc-tint:var(--brain)} .acv-acc--agente{--acc:var(--agente-strong);--acc-tint:var(--agente)} .acv-acc--backoffice{--acc:var(--backoff-strong);--acc-tint:var(--backoff)} .acv-acc--retainer{--acc:var(--retainer-strong);--acc-tint:var(--retainer)} .acv-acc--integral{--acc:var(--coral);--acc-tint:rgba(255,87,87,.12)} /* Texto solo para lectores de pantalla */ .acv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Chips informativos (tiempo, IVA, producto): pueden ser redondeados */ .acv-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .acv-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 12px;border-radius:var(--radius-pill);background:var(--cream);border:1px solid var(--line);font-family:var(--font);font-size:13px;font-weight:600;line-height:1.25;color:var(--ink)} .acv-chip svg{display:block;flex:0 0 14px;width:14px;height:14px;fill:none;stroke:var(--acc,var(--ink));stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .acv-chip--acc{background:var(--acc-tint,var(--sand));border-color:var(--acc,var(--line))} .acv-chip--ink{background:var(--ink);border-color:var(--ink);color:var(--cream)} .acv-chip--ink svg{stroke:var(--cream)} /* Botón fantasma (secundario) con el radio recto del sistema de botones */ .acv-btn.acv-btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)} .acv-btn.acv-btn--ghost:hover,.acv-btn.acv-btn--ghost:focus-visible{background:var(--ink);color:var(--cream)} .acv-btn.acv-btn--ghost::after{content:none} /* Nota "Actualizado en ..." dentro del contenedor, alineada con el contenido (cierra la sección de preguntas) */ .acv-upd{padding:0 var(--gutter) clamp(32px,5vw,56px);background:var(--sand);font-family:var(--font);box-sizing:border-box} .acv-upd__inner{max-width:var(--container);margin:0 auto} .acv-upd .acv-chip{background:var(--cream)} /* Iconos sí / no dentro de celdas */ .acv-cell{display:flex;align-items:flex-start;gap:10px;min-width:0} .acv-cell>span:last-child{min-width:0} .acv-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;margin-top:1px;border-radius:50%;box-sizing:border-box} .acv-ic svg{display:block;width:12px;height:12px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .acv-ic--yes{background:var(--acc-tint,var(--sand));border:1.5px solid var(--acc,var(--ink))} .acv-ic--no{background:var(--sand);border:1.5px solid var(--line)} .acv-ic--no svg{stroke:var(--ink-45)} /* ===== Tarjeta de tabla ===== */ .acv-tcard{--tbl-head:var(--ink);--tbl-head-ink:var(--cream);--tbl-us:var(--acc-tint);width:100%;box-sizing:border-box;background:var(--cream);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 32px rgba(16,23,49,.08);overflow:hidden} .acv-tcard--tint{--tbl-head:var(--acc-tint);--tbl-head-ink:var(--ink)} .acv-tcard *,.acv-tcard *::before,.acv-tcard *::after{box-sizing:border-box} @supports (background:color-mix(in srgb,red 50%,blue)){.acv-tcard{--tbl-us:color-mix(in srgb,var(--acc-tint) 45%,var(--cream))}} .acv-table{width:100%;max-width:100%;margin:0;border:0;border-collapse:separate;border-spacing:0;table-layout:auto;font-family:var(--font);font-size:15px;line-height:1.55;color:var(--ink-78)} .acv-table th,.acv-table td{padding:18px 20px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink-78);text-align:left;vertical-align:top;overflow-wrap:break-word} .acv-table thead th{background:var(--tbl-head);color:var(--tbl-head-ink);border-bottom:0;font-size:14px;font-weight:700;line-height:1.3;vertical-align:middle} .acv-table tbody th{width:20%;min-width:150px;background:var(--sand);border-right:1px solid var(--line);color:var(--ink);font-family:var(--font-head);font-size:16px;font-weight:700;letter-spacing:-.01em} .acv-table tbody tr:nth-child(even) td{background:rgba(16,23,49,.03)} .acv-table tbody tr:hover td{background:rgba(16,23,49,.06)} .acv-table tbody tr:hover th{background:var(--sand);box-shadow:inset 3px 0 0 var(--acc,var(--ink))} .acv-table tbody tr:last-child th,.acv-table tbody tr:last-child td{border-bottom:0} .acv-table strong{color:var(--ink)} .acv-table a{color:var(--ink);font-weight:700} /* Columna AcervoIA destacada: pastel, bordes laterales y borde superior fuerte, con pastilla */ .acv-table th.is-us,.acv-table td.is-us{border-left:2px solid var(--acc);border-right:2px solid var(--acc)} .acv-table td.is-us,.acv-table tbody tr:nth-child(even) td.is-us,.acv-table tbody tr:hover td.is-us{background:var(--tbl-us);color:var(--ink)} .acv-table thead th.is-us{background:var(--acc-tint);color:var(--ink);border-top:4px solid var(--acc)} .acv-table tbody tr:last-child td.is-us{border-bottom:2px solid var(--acc)} .acv-table__pill{display:block;width:max-content;max-width:100%;margin:0 0 6px;padding:2px 10px;border-radius:var(--radius-pill);background:var(--ink);color:var(--cream);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} /* Precios: nombre del servicio con punto de su color, precio y unidad */ .acv-tsvc{display:flex;align-items:center;gap:10px;margin-bottom:6px} .acv-tsvc i{flex:0 0 12px;width:12px;height:12px;border-radius:50%;background:var(--acc)} .acv-tlink{display:inline-flex;align-items:center;min-height:32px;padding:2px 10px;margin-left:-10px;border-radius:var(--radius-sm);font-family:var(--font);font-size:13px;font-weight:600;color:var(--ink);text-decoration:none} .acv-tlink::after{content:"\2192";margin-left:6px;transition:transform .2s ease} .acv-tlink:hover,.acv-tlink:focus-visible{background:var(--acc-tint);color:var(--ink);text-decoration:none} .acv-tlink:hover::after,.acv-tlink:focus-visible::after{transform:translateX(3px)} .acv-tlink:focus-visible{outline:3px solid var(--ink);outline-offset:2px} .acv-price{display:block;font-family:var(--font-head);font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink)} .acv-sub{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--ink-78)} /* Entre 720 y 1023px la tabla mantiene columnas con menos relleno */ @media (max-width:1023px){ .acv-table th,.acv-table td{padding:14px 16px;font-size:14px} .acv-table tbody th{min-width:120px;font-size:15px} } /* Móvil: cada fila pasa a tarjeta apilada (etiqueta y valor) */ @media (max-width:719px){ .acv-tcard{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible} .acv-table,.acv-table tbody,.acv-table tr,.acv-table th,.acv-table td{display:block;width:100%} .acv-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .acv-table tbody tr{margin:0 0 16px;background:var(--cream);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(16,23,49,.07);overflow:hidden} .acv-table tbody tr:hover td,.acv-table tbody tr:nth-child(even) td{background:transparent} .acv-table tbody th,.acv-table tbody tr:hover th{width:100%;min-width:0;padding:16px;background:var(--sand);border-right:0;border-bottom:1px solid var(--line);box-shadow:none} .acv-table td{display:grid;grid-template-columns:minmax(92px,34%) minmax(0,1fr);gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px} .acv-table td::before{content:attr(data-label);color:var(--ink);font-size:13px;font-weight:700;line-height:1.4} .acv-table tbody tr:last-child td{border-bottom:1px solid var(--line)} .acv-table tbody tr td:last-child,.acv-table tbody tr:last-child td:last-child{border-bottom:0} .acv-table th.is-us,.acv-table td.is-us,.acv-table tbody tr:nth-child(even) td.is-us,.acv-table tbody tr:hover td.is-us{border-right:0;border-left:4px solid var(--acc);background:var(--tbl-us)} .acv-table tbody tr:last-child td.is-us{border-bottom:1px solid var(--line)} .acv-table tbody tr td.is-us:last-child,.acv-table tbody tr:last-child td.is-us:last-child{border-bottom:0} } @media (prefers-reduced-motion:reduce){.acv-tlink::after{transition:none}.acv-tlink:hover::after{transform:none}} /* La etiqueta AcervoIA del encabezado nunca se parte entre líneas */ .acv-table__pill { white-space: nowrap; display: inline-block; } /* ============================================================ Plantillas blog-listing.html y blog-post.html Solo tokens de marca. Mobile first. ============================================================ */ /* Hero del listado */ .acervia-blog-hero { padding: clamp(40px, 8vw, 96px) var(--gutter) clamp(32px, 5vw, 64px); text-align: center; background: var(--sand); border-bottom: 1px solid var(--line); } .acervia-blog-hero__badge { display: inline-block; background: var(--cream); color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--line); margin-bottom: 20px; } .acervia-blog-hero h1 { font-family: var(--font-head); font-size: clamp(40px, 4vw + 1.6rem, 74px); font-weight: 700; line-height: 1.04; margin: 0 0 16px; letter-spacing: -0.04em; overflow-wrap: break-word; color: var(--ink); } .acervia-blog-hero p { font-size: clamp(15px, 2vw, 17px); color: var(--ink-78); max-width: 560px; margin: 0 auto; } /* Filtros por tema */ .acervia-blog-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 32px var(--gutter) 0; } .acervia-blog-filters a { display: inline-flex; align-items: center; min-height: var(--touch-target); font-size: 13px; font-weight: 500; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-78); text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s; } .acervia-blog-filters a:hover { border-color: var(--ink); color: var(--ink); } .acervia-blog-filters a.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); } /* Grilla */ .acervia-blog-grid { max-width: var(--container); margin: clamp(32px, 5vw, 64px) auto clamp(48px, 7vw, 80px); padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 640px) { .acervia-blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .acervia-blog-grid { grid-template-columns: repeat(3, 1fr); } } .acervia-post-card { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; text-decoration: none; color: inherit; min-width: 0; } .acervia-post-card:hover { border-color: var(--ink-45); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(16, 23, 49, 0.08); } .acervia-post-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } .acervia-post-card__img-placeholder { width: 100%; aspect-ratio: 16/9; background: var(--sand); } .acervia-post-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; gap: 10px; } .acervia-post-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .acervia-post-card__tag { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: var(--sand); border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px; } .acervia-post-card__date { font-size: 12px; color: var(--ink-78); } .acervia-post-card__title { font-family: var(--font-head); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; color: var(--ink); margin: 0; overflow-wrap: break-word; } .acervia-post-card__summary { font-size: 14px; color: var(--ink-78); line-height: 1.6; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .acervia-post-card__footer { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); } .acervia-post-card__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .acervia-post-card__author { font-size: 12px; color: var(--ink-78); flex: 1; } .acervia-post-card__readtime { font-size: 12px; color: var(--ink-78); } /* Paginación */ .acervia-blog-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; padding: 0 var(--gutter) 64px; } .acervia-blog-pagination a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--touch-target); font-size: 14px; font-weight: 500; padding: 10px 22px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color 0.2s, background 0.2s; } .acervia-blog-pagination a:hover { border-color: var(--ink); background: var(--sand); } .acervia-blog-empty { text-align: center; padding: 64px var(--gutter); color: var(--ink-78); } /* Entrada del blog */ .acervia-post-hero { padding: clamp(40px, 7vw, 88px) var(--gutter) clamp(28px, 4vw, 48px); background: var(--sand); border-bottom: 1px solid var(--line); } .acervia-post-hero__inner { max-width: 820px; margin: 0 auto; } .acervia-post-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .acervia-post-hero__tag { display: inline-flex; align-items: center; min-height: 32px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: var(--cream); border: 1px solid var(--line); padding: 4px 12px; border-radius: 999px; text-decoration: none; } .acervia-post-hero h1 { font-family: var(--font-head); font-size: clamp(32px, 3vw + 1.2rem, 56px); font-weight: 700; line-height: 1.08; letter-spacing: -0.04em; color: var(--ink); margin: 0 0 20px; overflow-wrap: break-word; } .acervia-post-hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--ink-78); } .acervia-post-hero__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .acervia-post-hero__author-name { color: var(--ink); font-weight: 600; text-decoration: none; } .acervia-post-hero__image { display: block; width: 100%; max-width: 820px; margin: 28px auto 0; border-radius: 12px; height: auto; } .acervia-post-layout { max-width: var(--container); margin: 0 auto; padding: clamp(32px, 5vw, 56px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; } @media (min-width: 960px) { .acervia-post-layout { grid-template-columns: minmax(0, 1fr) 280px; } } .acervia-post-body { font-size: clamp(16px, 2vw, 18px); line-height: 1.75; color: var(--ink-78); overflow-wrap: break-word; } .acervia-post-body h2, .acervia-post-body h3, .acervia-post-body h4 { font-family: var(--font-head); font-weight: 400; letter-spacing: -0.03em; color: var(--ink); margin: 1.8em 0 0.6em; line-height: 1.25; } .acervia-post-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .acervia-post-body img { max-width: 100%; height: auto; border-radius: 8px; } .acervia-post-body blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--ink); color: var(--ink); } .acervia-post-body table { display: block; overflow-x: auto; } .acervia-post-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); } .acervia-post-nav a { display: inline-flex; align-items: center; min-height: var(--touch-target); font-weight: 600; color: var(--ink); text-decoration: none; } .acervia-post-nav a:hover { text-decoration: underline; } .acervia-post-aside { display: flex; flex-direction: column; gap: 24px; } .acervia-author-card { background: var(--sand); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; gap: 14px; align-items: flex-start; } .acervia-author-card img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .acervia-author-card__name { font-weight: 700; color: var(--ink); font-size: 15px; } .acervia-author-card__bio { font-size: 13px; color: var(--ink-78); line-height: 1.55; margin: 6px 0 0; } .acervia-recent { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 20px; } .acervia-recent__title { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-78); margin: 0 0 14px; } .acervia-recent__item { display: block; padding: 10px 0; text-decoration: none; border-bottom: 1px solid var(--line); min-height: var(--touch-target); } .acervia-recent__item:last-child { border-bottom: none; } .acervia-recent__name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; } .acervia-recent__date { font-size: 12px; color: var(--ink-78); margin-top: 3px; } .acervia-post-cta { background: var(--sand); border: 1px solid var(--line); border-radius: 12px; padding: 22px; } .acervia-post-cta p { margin: 0 0 14px; font-size: 15px; color: var(--ink); font-weight: 600; line-height: 1.4; } .acervia-post-cta a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-target); background: var(--coral-600); color: var(--cream); padding: 10px 22px; border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; } .acervia-post-cta a:hover { background: var(--coral-600); color: var(--cream); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(209, 58, 58, .28); } /* Relacionados */ .acervia-related { background: var(--sand); border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 72px) var(--gutter); } .acervia-related__inner { max-width: var(--container); margin: 0 auto; } .acervia-related__heading { font-family: var(--font-head); font-size: clamp(28px, 2vw + 1.4rem, 40px); font-weight: 400; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 24px; } .acervia-related__grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 640px) { .acervia-related__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .acervia-related__grid { grid-template-columns: repeat(3, 1fr); } } .acervia-related-card { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: border-color 0.2s; } .acervia-related-card:hover { border-color: var(--ink-45); } .acervia-related-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } .acervia-related-card__body { padding: 18px; } .acervia-related-card__tag { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-78); } .acervia-related-card__title { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.35; margin: 6px 0 0; } /* AcervoIA: CSS de módulos empaquetado en el build (fuente en modules/*.module/module.css). No editar aquí. */ /* === acervia-ahorro-ejemplo.module === */ /* Acento por servicio (sistema nuevo): --acc tono fuerte, --acc-tint pastel, botón pastel con texto ink. Todo sale de css/tokens.css */ .acv-acc--none{--acc:var(--coral);--acc-tint:var(--sand);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-acc--diagnostico{--acc:var(--diag-strong);--acc-tint:var(--diag);--btn-bg:var(--diag);--btn-ink:var(--ink)} .acv-acc--brain{--acc:var(--brain-strong);--acc-tint:var(--brain);--btn-bg:var(--brain);--btn-ink:var(--ink)} .acv-acc--agente{--acc:var(--agente-strong);--acc-tint:var(--agente);--btn-bg:var(--agente);--btn-ink:var(--ink)} .acv-acc--backoffice{--acc:var(--backoff-strong);--acc-tint:var(--backoff);--btn-bg:var(--backoff);--btn-ink:var(--ink)} .acv-acc--retainer{--acc:var(--retainer-strong);--acc-tint:var(--retainer);--btn-bg:var(--retainer);--btn-ink:var(--ink)} .acv-acc--integral{--acc:var(--coral);--acc-tint:rgba(255,87,87,.12);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-sec{padding:clamp(48px,8vw,96px) var(--gutter);background:var(--cream);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip} .acv-sec *,.acv-sec *::before,.acv-sec *::after{box-sizing:border-box} .acv-sec--gray{background:var(--sand)} .acv-inner{max-width:var(--container);margin:0 auto} .acv-label{display:block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-78);margin:0 0 12px} .acv-label::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--acc);margin-right:8px} .acv-title{font-family:var(--font-head);font-size:clamp(28px,3vw + 14px,40px);font-weight:400;line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px;overflow-wrap: break-word} .acv-lead{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--ink-78);margin:0 0 clamp(24px,4vw,40px);max-width:760px} .acv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--btn-bg);color:var(--btn-ink);font-family:var(--font);font-weight:500;font-size:16px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;text-align:center;max-width:100%} .acv-btn::after{content:"\2192";display:inline-block;transition:transform .25s ease} .acv-btn:hover,.acv-btn:focus-visible{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,23,49,.14);text-decoration:none;color:var(--btn-ink)} .acv-btn:hover::after,.acv-btn:focus-visible::after{transform:translateX(5px)} .acv-btn:focus-visible,.acv-sec a:focus-visible,.acv-sec summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .acv-card{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px)} .acv-sec--gray .acv-card{background:var(--cream)} .acv-card h3{font-family:var(--font-head);font-size:clamp(18px,2.2vw,21px);font-weight:400;letter-spacing:-.03em;color:var(--ink);margin:0 0 8px} .acv-card p{margin:0;line-height:1.55} .acv-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:768px){.acv-grid--2,.acv-grid--3{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.acv-grid--3{grid-template-columns:repeat(3,1fr)}} @media(prefers-reduced-motion:reduce){.acv-btn,.acv-btn::after{transition:none}.acv-btn:hover,.acv-btn:focus-visible,.acv-btn:hover::after,.acv-btn:focus-visible::after{transform:none}} .acv-ahorro{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:stretch} .acv-ahorro__list{margin:0;background:var(--cream);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 28px rgba(16,23,49,.06);overflow:hidden;min-width:0} .acv-ahorro__row{display:grid;gap:4px 24px;grid-template-columns:minmax(0,1fr);padding:16px 22px;border-bottom:1px solid var(--line);min-width:0} .acv-ahorro__row:last-child{border-bottom:0} .acv-ahorro__row dt{font-size:14px;line-height:1.4;color:var(--ink-78)} .acv-ahorro__row dd{margin:0;font-size:clamp(16px,1vw + 12px,19px);font-weight:700;line-height:1.35;color:var(--ink);overflow-wrap:break-word} .acv-ahorro__result{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(24px,3vw,40px);border-radius:16px;background:var(--blue-deep);color:var(--cream);box-shadow:0 14px 36px rgba(16,23,49,.14);min-width:0} .acv-ahorro__rlabel{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,254,247,.86)} .acv-ahorro__rvalue{font-family:var(--font-head);font-size:clamp(26px,2vw + 1rem,40px);font-weight:700;letter-spacing:-.03em;line-height:1.12;color:var(--cream);overflow-wrap:break-word} .acv-ahorro__note{margin:8px 0 0;padding-top:14px;border-top:1px solid rgba(255,254,247,.28);font-size:14px;line-height:1.55;color:rgba(255,254,247,.86)} @media(min-width:768px){.acv-ahorro__row{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:baseline}} @media(min-width:1024px){.acv-ahorro{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}} /* === acervia-brain-capas.module === */ /* Acento por servicio (sistema nuevo): --acc tono fuerte, --acc-tint pastel, botón pastel con texto ink. Todo sale de css/tokens.css */ .acv-acc--none{--acc:var(--coral);--acc-tint:var(--sand);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-acc--diagnostico{--acc:var(--diag-strong);--acc-tint:var(--diag);--btn-bg:var(--diag);--btn-ink:var(--ink)} .acv-acc--brain{--acc:var(--brain-strong);--acc-tint:var(--brain);--btn-bg:var(--brain);--btn-ink:var(--ink)} .acv-acc--agente{--acc:var(--agente-strong);--acc-tint:var(--agente);--btn-bg:var(--agente);--btn-ink:var(--ink)} .acv-acc--backoffice{--acc:var(--backoff-strong);--acc-tint:var(--backoff);--btn-bg:var(--backoff);--btn-ink:var(--ink)} .acv-acc--retainer{--acc:var(--retainer-strong);--acc-tint:var(--retainer);--btn-bg:var(--retainer);--btn-ink:var(--ink)} .acv-acc--integral{--acc:var(--coral);--acc-tint:rgba(255,87,87,.12);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-sec{padding:clamp(48px,8vw,96px) var(--gutter);background:var(--cream);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip} .acv-sec *,.acv-sec *::before,.acv-sec *::after{box-sizing:border-box} .acv-sec--gray{background:var(--sand)} .acv-inner{max-width:var(--container);margin:0 auto} .acv-label{display:block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-78);margin:0 0 12px} .acv-label::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--acc);margin-right:8px} .acv-title{font-family:var(--font-head);font-size:clamp(28px,3vw + 14px,40px);font-weight:400;line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px;overflow-wrap: break-word} .acv-lead{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--ink-78);margin:0 0 clamp(24px,4vw,40px);max-width:760px} .acv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--btn-bg);color:var(--btn-ink);font-family:var(--font);font-weight:500;font-size:16px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;text-align:center;max-width:100%} .acv-btn::after{content:"\2192";display:inline-block;transition:transform .25s ease} .acv-btn:hover,.acv-btn:focus-visible{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,23,49,.14);text-decoration:none;color:var(--btn-ink)} .acv-btn:hover::after,.acv-btn:focus-visible::after{transform:translateX(5px)} .acv-btn:focus-visible,.acv-sec a:focus-visible,.acv-sec summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .acv-card{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px)} .acv-sec--gray .acv-card{background:var(--cream)} .acv-card h3{font-family:var(--font-head);font-size:clamp(18px,2.2vw,21px);font-weight:400;letter-spacing:-.03em;color:var(--ink);margin:0 0 8px} .acv-card p{margin:0;line-height:1.55} .acv-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:768px){.acv-grid--2,.acv-grid--3{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.acv-grid--3{grid-template-columns:repeat(3,1fr)}} @media(prefers-reduced-motion:reduce){.acv-btn,.acv-btn::after{transition:none}.acv-btn:hover,.acv-btn:focus-visible,.acv-btn:hover::after,.acv-btn:focus-visible::after{transform:none}} /* La tabla usa el componente .acv-tcard / .acv-table de css/acervia-tables.css; aquí solo el nombre de capa con su punto */ .acv-capas__name{display:flex;align-items:center;gap:10px} .acv-capas__name i{flex:0 0 12px;width:12px;height:12px;border-radius:50%;background:var(--acc)} .acv-capas td:first-of-type{color:var(--ink)} @media(min-width:720px){.acv-capas tbody th{width:22%}} /* === acervia-calculadora-base-fria.module === */ /* Acento "agente" definido en css/acervia-calculadoras.css (.acv-calc-wrap--agente). Solo ajustes propios de este módulo. */ #calc-base-fria { scroll-margin-top: calc(var(--nav-h, 72px) + 16px); } /* === acervia-calculadora-conocimiento.module === */ /* Acento "brain" definido en css/acervia-calculadoras.css (.acv-calc-wrap--brain). Solo ajustes propios de este módulo. */ #calc-conocimiento { scroll-margin-top: calc(var(--nav-h, 72px) + 16px); } /* === acervia-calculadora-contratar-vs-automatizar.module === */ /* Acento "retainer" definido en css/acervia-calculadoras.css (.acv-calc-wrap--retainer). Solo ajustes propios de este módulo. */ #calc-contratar-vs-automatizar { scroll-margin-top: calc(var(--nav-h, 72px) + 16px); } /* === acervia-calculadora-destacada.module === */ .acv-calc-dest{background:var(--cream);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip;padding:clamp(56px,8vw,104px) var(--gutter,24px)} .acv-calc-dest *,.acv-calc-dest *::before,.acv-calc-dest *::after{box-sizing:border-box} .acv-calc-dest__inner{max-width:var(--container,1280px);margin:0 auto} .acv-calc-dest__head{max-width:760px;margin:0 0 clamp(24px,4vw,40px)} .acv-calc-dest__label{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-78);margin:0 0 14px} .acv-calc-dest__label::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--coral)} .acv-calc-dest__title{font-family:var(--font-head);font-weight:400;letter-spacing:-.03em;line-height:1.12;font-size:clamp(28px,4vw,40px);color:var(--ink);margin:0 0 14px;overflow-wrap:break-word} .acv-calc-dest__intro{font-size:clamp(16px,1.8vw,18px);line-height:1.6;margin:0 0 18px} .acv-calc-dest__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .acv-calc-dest__tags li{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border-radius:999px;background:var(--sand);border:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:500} .acv-calc-dest__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:stretch} .acv-calc-dest__form,.acv-calc-dest__result{border-radius:20px;padding:clamp(20px,3vw,36px);min-width:0;display:flex;flex-direction:column;height:100%} .acv-calc-dest__form{background:var(--pure-white);border:1px solid var(--line)} .acv-calc-dest__result{background:var(--blue-deep);color:var(--cream);border:1px solid var(--blue-deep)} .acv-calc-dest__field{display:grid;gap:8px;margin:0 0 20px} .acv-calc-dest__field label{font-size:15px;font-weight:500;color:var(--ink)} .acv-calc-dest__field input{width:100%;min-height:52px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--cream);color:var(--ink);font:400 20px var(--font)} .acv-calc-dest__field input:focus-visible{outline:3px solid var(--ink);outline-offset:2px} .acv-calc-dest__assume-wrap{margin-top:auto;padding-top:20px;border-top:1px solid var(--line)} .acv-calc-dest__assume-title{margin:0 0 10px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-78)} .acv-calc-dest__assume{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;line-height:1.5} .acv-calc-dest__assume li{position:relative;padding-left:20px} .acv-calc-dest__assume li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--blue)} .acv-calc-dest__fallback{display:block;margin:0;font-size:16px;line-height:1.6;color:var(--cream)} .acv-calc-dest__fallback a{color:var(--cream);font-weight:500;text-decoration:underline;text-underline-offset:3px} .acv-calc-dest__body{display:none} .acv-calc-dest.is-ready .acv-calc-dest__body{display:flex;flex-direction:column;flex:1} .acv-calc-dest.is-ready .acv-calc-dest__fallback{display:none} .acv-calc-dest__kpi-label{margin:0 0 4px;font-size:15px;font-weight:500;color:var(--cream)} .acv-calc-dest__big{margin:0 0 20px;font-family:var(--font-head);font-weight:700;letter-spacing:-.04em;line-height:1.05;font-size:clamp(44px,7vw,72px);color:var(--cream);overflow-wrap:break-word} .acv-calc-dest__kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 20px} .acv-calc-dest__kpis>div{background:rgba(255,254,247,.12);border:1px solid rgba(255,254,247,.28);border-radius:12px;padding:12px 14px} .acv-calc-dest__kpis dt{font-size:13px;line-height:1.35;color:var(--cream);margin:0 0 4px} .acv-calc-dest__kpis dd{margin:0;font-family:var(--font-head);font-size:clamp(22px,3vw,28px);color:var(--cream);overflow-wrap:break-word} .acv-calc-dest__bars{display:grid;gap:14px;margin:0 0 16px} .acv-calc-dest__barrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;font-size:14px;color:var(--cream)} .acv-calc-dest__barrow b{font-weight:500;color:var(--cream)} .acv-calc-dest__track{grid-column:1 / -1;order:3;height:10px;border-radius:10px;background:rgba(255,254,247,.28);overflow:hidden} .acv-calc-dest__track i{display:block;height:100%;border-radius:10px;background:var(--cream);transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.2,.7,.2,1)} .acv-calc-dest__note{margin:auto 0 0;padding-top:12px;font-size:13px;line-height:1.5;color:var(--cream)} .acv-calc-dest__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;margin-top:clamp(24px,4vw,36px)} .acv-calc-dest__cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--coral-600);color:var(--cream);font-weight:500;text-decoration:none;max-width:100%} .acv-calc-dest__cta span{display:inline-block;transition:transform .2s} .acv-calc-dest__cta:hover span{transform:translateX(4px)} .acv-calc-dest__more{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px} .acv-calc-dest a:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .acv-calc-dest__result a:focus-visible{outline-color:var(--cream)} @media (min-width:900px){ .acv-calc-dest__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px} } @media (max-width:520px){ .acv-calc-dest__kpis{grid-template-columns:minmax(0,1fr)} } @media (prefers-reduced-motion:reduce){ .acv-calc-dest__track i,.acv-calc-dest__cta span{transition:none} } /* === acervia-calculadora-integral.module === */ /* Acento "integral" definido en css/acervia-calculadoras.css (.acv-calc-wrap--integral). Solo ajustes propios de este módulo. */ #calc-integral { scroll-margin-top: calc(var(--nav-h, 72px) + 16px); } /* === acervia-calculadora-leads.module === */ /* Acento "agente" definido en css/acervia-calculadoras.css (.acv-calc-wrap--agente). Solo ajustes propios de este módulo. */ #calc-leads { scroll-margin-top: calc(var(--nav-h, 72px) + 16px); } /* === acervia-calculadora-nicho.module === */ /* Acento "agente" definido en css/acervia-calculadoras.css (.acv-calc-wrap--agente). Solo ajustes propios de este módulo. */ #calc-nicho { scroll-margin-top: calc(var(--nav-h, 72px) + 16px); } /* === acervia-calculadora-procesos.module === */ /* Acento "backoffice" definido en css/acervia-calculadoras.css (.acv-calc-wrap--backoffice). Solo ajustes propios de este módulo. */ #calc-procesos { scroll-margin-top: calc(var(--nav-h, 72px) + 16px); } /* === acervia-calculadora-tareas.module === */ /* Acento "backoffice" definido en css/acervia-calculadoras.css (.acv-calc-wrap--backoffice). Solo ajustes propios de este módulo. */ #calc-tareas { scroll-margin-top: calc(var(--nav-h, 72px) + 16px); } /* === acervia-como-trabajamos.module === */ /* Acento por servicio (sistema nuevo): --acc tono fuerte, --acc-tint pastel, botón pastel con texto ink. Todo sale de css/tokens.css */ .acv-acc--none{--acc:var(--coral);--acc-tint:var(--sand);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-acc--diagnostico{--acc:var(--diag-strong);--acc-tint:var(--diag);--btn-bg:var(--diag);--btn-ink:var(--ink)} .acv-acc--brain{--acc:var(--brain-strong);--acc-tint:var(--brain);--btn-bg:var(--brain);--btn-ink:var(--ink)} .acv-acc--agente{--acc:var(--agente-strong);--acc-tint:var(--agente);--btn-bg:var(--agente);--btn-ink:var(--ink)} .acv-acc--backoffice{--acc:var(--backoff-strong);--acc-tint:var(--backoff);--btn-bg:var(--backoff);--btn-ink:var(--ink)} .acv-acc--retainer{--acc:var(--retainer-strong);--acc-tint:var(--retainer);--btn-bg:var(--retainer);--btn-ink:var(--ink)} .acv-acc--integral{--acc:var(--coral);--acc-tint:rgba(255,87,87,.12);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-sec{padding:clamp(48px,8vw,96px) var(--gutter);background:var(--cream);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip} .acv-sec *,.acv-sec *::before,.acv-sec *::after{box-sizing:border-box} .acv-sec--gray{background:var(--sand)} .acv-inner{max-width:var(--container);margin:0 auto} .acv-label{display:block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-78);margin:0 0 12px} .acv-label::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--acc);margin-right:8px} .acv-title{font-family:var(--font-head);font-size:clamp(28px,3vw + 14px,40px);font-weight:400;line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px;overflow-wrap: break-word} .acv-lead{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--ink-78);margin:0 0 clamp(24px,4vw,40px);max-width:760px} .acv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--btn-bg);color:var(--btn-ink);font-family:var(--font);font-weight:500;font-size:16px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;text-align:center;max-width:100%} .acv-btn::after{content:"\2192";display:inline-block;transition:transform .25s ease} .acv-btn:hover,.acv-btn:focus-visible{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,23,49,.14);text-decoration:none;color:var(--btn-ink)} .acv-btn:hover::after,.acv-btn:focus-visible::after{transform:translateX(5px)} .acv-btn:focus-visible,.acv-sec a:focus-visible,.acv-sec summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .acv-card{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px)} .acv-sec--gray .acv-card{background:var(--cream)} .acv-card h3{font-family:var(--font-head);font-size:clamp(18px,2.2vw,21px);font-weight:400;letter-spacing:-.03em;color:var(--ink);margin:0 0 8px} .acv-card p{margin:0;line-height:1.55} .acv-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:768px){.acv-grid--2,.acv-grid--3{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.acv-grid--3{grid-template-columns:repeat(3,1fr)}} @media(prefers-reduced-motion:reduce){.acv-btn,.acv-btn::after{transition:none}.acv-btn:hover,.acv-btn:focus-visible,.acv-btn:hover::after,.acv-btn:focus-visible::after{transform:none}} .acv-proc{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:16px} .acv-proc__step{flex:1 1 100%;display:flex;gap:16px;align-items:flex-start;background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(18px,3vw,26px);min-width:0} .acv-proc__num{flex:0 0 40px;width:40px;min-width:40px;height:40px;border-radius:50%;background:var(--btn-bg);color:var(--btn-ink);display:flex;align-items:center;justify-content:center;font-weight:800} .acv-proc__when{display:block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink-78);margin-bottom:4px} .acv-proc__step h3{margin:0 0 6px;font-size:clamp(17px,2.2vw,20px);color:var(--ink)} .acv-proc__step p{margin:0;line-height:1.55} @media(min-width:768px){.acv-proc__step{flex:0 1 calc(50% - 8px)}} @media(min-width:1024px){.acv-proc__step{flex:0 1 calc((100% - (var(--cols,4) - 1) * 16px) / var(--cols,4));flex-direction:column}} .acv-proc__step{position:relative} .acv-proc__step>div{min-width:0;overflow-wrap: break-word} .acv-proc__ico{position:absolute;top:16px;right:16px;stroke:var(--acc);opacity:.85} .acv-proc__num{position:relative;z-index:1} .acv-proc__step::after{content:"";position:absolute;pointer-events:none;background:var(--acc);opacity:.5;transform-origin:top;transition:transform .7s ease .3s;left:calc(clamp(18px,3vw,26px) + 19px);top:calc(clamp(18px,3vw,26px) + 40px);width:2px;height:calc(100% - clamp(18px,3vw,26px) - 40px + 16px)} .js .acv-proc__step::after{transform:scaleY(0)} .js .acv-proc__step.is-visible::after{transform:scaleY(1)} .acv-proc__step:last-child::after{display:none} @media(min-width:768px){.acv-proc__step::after{display:none}} @media(min-width:1024px){.acv-proc__step::after{display:block;left:calc(clamp(18px,3vw,26px) + 46px);top:calc(clamp(18px,3vw,26px) + 19px);height:2px;width:calc(100% - 46px - clamp(18px,3vw,26px) + 16px);transform-origin:left} .js .acv-proc__step::after{transform:scaleX(0)} .js .acv-proc__step.is-visible::after{transform:scaleX(1)} .acv-proc__step:last-child::after{display:none}} @media(prefers-reduced-motion:reduce){.acv-proc__step::after{transition:none}} /* === acervia-cookie-banner.module === */ /* ── Cookie Banner ── */ .acervia-cookie { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000; background: var(--sand); border-top: 1px solid var(--line); box-shadow: 0 -8px 32px rgba(16, 23, 49,0.08); padding: 16px 24px; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .acervia-cookie.acervia-cookie--visible { transform: translateY(0); } .acervia-cookie.acervia-cookie--hiding { transform: translateY(100%); } .acervia-cookie__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .acervia-cookie__text { flex: 1; min-width: 200px; font-family: var(--font); font-size: 13px; line-height: 1.6; color: var(--ink-78); margin: 0; } .acervia-cookie__link { color: var(--ink); text-decoration: underline; font-weight: 500; } .acervia-cookie__link:hover { text-decoration: underline; } .acervia-cookie__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .acervia-cookie__btn { font-family: var(--font); font-size: 13px; font-weight: 600; padding: 13px 22px; min-height: 44px; border-radius: var(--radius-btn); cursor: pointer; border: 1.5px solid transparent; transition: opacity 0.2s, background 0.2s; line-height: 1; white-space: nowrap; } .acervia-cookie__btn--accept { background: var(--coral-600); color: var(--cream); } .acervia-cookie__btn--accept:hover { opacity: 0.9; } .acervia-cookie__btn--decline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); } .acervia-cookie__btn--decline:hover { background: var(--ink); color: var(--cream); } .acervia-cookie__btn:focus-visible, .acervia-cookie__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } @media (max-width: 600px) { .acervia-cookie { padding: 16px 16px 20px; } .acervia-cookie__inner { flex-direction: column; align-items: flex-start; gap: 14px; } .acervia-cookie__text { font-size: 13px; } .acervia-cookie__actions { width: 100%; } .acervia-cookie__btn { flex: 1; text-align: center; padding: 13px 16px; } } /* === acervia-cta-diagnostico.module === */ /* Acento por servicio (sistema nuevo): --acc tono fuerte, --acc-tint pastel, botón pastel con texto ink. Todo sale de css/tokens.css */ .acv-acc--none{--acc:var(--coral);--acc-tint:var(--sand);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-acc--diagnostico{--acc:var(--diag-strong);--acc-tint:var(--diag);--btn-bg:var(--diag);--btn-ink:var(--ink)} .acv-acc--brain{--acc:var(--brain-strong);--acc-tint:var(--brain);--btn-bg:var(--brain);--btn-ink:var(--ink)} .acv-acc--agente{--acc:var(--agente-strong);--acc-tint:var(--agente);--btn-bg:var(--agente);--btn-ink:var(--ink)} .acv-acc--backoffice{--acc:var(--backoff-strong);--acc-tint:var(--backoff);--btn-bg:var(--backoff);--btn-ink:var(--ink)} .acv-acc--retainer{--acc:var(--retainer-strong);--acc-tint:var(--retainer);--btn-bg:var(--retainer);--btn-ink:var(--ink)} .acv-acc--integral{--acc:var(--coral);--acc-tint:rgba(255,87,87,.12);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-sec{padding:clamp(48px,8vw,96px) var(--gutter);background:var(--cream);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip} .acv-sec *,.acv-sec *::before,.acv-sec *::after{box-sizing:border-box} .acv-sec--gray{background:var(--sand)} .acv-inner{max-width:var(--container);margin:0 auto} .acv-label{display:block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-78);margin:0 0 12px} .acv-label::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--acc);margin-right:8px} .acv-title{font-family:var(--font-head);font-size:clamp(28px,3vw + 14px,40px);font-weight:400;line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px;overflow-wrap: break-word} .acv-lead{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--ink-78);margin:0 0 clamp(24px,4vw,40px);max-width:760px} .acv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--btn-bg);color:var(--btn-ink);font-family:var(--font);font-weight:500;font-size:16px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;text-align:center;max-width:100%} .acv-btn::after{content:"\2192";display:inline-block;transition:transform .25s ease} .acv-btn:hover,.acv-btn:focus-visible{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,23,49,.14);text-decoration:none;color:var(--btn-ink)} .acv-btn:hover::after,.acv-btn:focus-visible::after{transform:translateX(5px)} .acv-btn:focus-visible,.acv-sec a:focus-visible,.acv-sec summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .acv-card{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px)} .acv-sec--gray .acv-card{background:var(--cream)} .acv-card h3{font-family:var(--font-head);font-size:clamp(18px,2.2vw,21px);font-weight:400;letter-spacing:-.03em;color:var(--ink);margin:0 0 8px} .acv-card p{margin:0;line-height:1.55} .acv-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:768px){.acv-grid--2,.acv-grid--3{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.acv-grid--3{grid-template-columns:repeat(3,1fr)}} @media(prefers-reduced-motion:reduce){.acv-btn,.acv-btn::after{transition:none}.acv-btn:hover,.acv-btn:focus-visible,.acv-btn:hover::after,.acv-btn:focus-visible::after{transform:none}} .acv-cta{background:var(--cream)} .acv-cta__box{display:flex;flex-direction:column;align-items:center;background:var(--acc-tint);border-radius:24px;padding:clamp(32px,6vw,72px) clamp(20px,5vw,64px);text-align:center} .acv-cta.acv-acc--none .acv-cta__box{background:var(--sand);border:1px solid var(--line)} .acv-cta .acv-title{max-width:24ch;margin-left:auto;margin-right:auto} .acv-cta .acv-lead{margin-left:auto;margin-right:auto;max-width:62ch} .acv-cta__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%} /* === acervia-datos-contacto.module === */ .hs-contact{background:var(--sand);padding:clamp(40px,6vw,72px) var(--gutter)} .hs-contact__inner{max-width:var(--container);margin:0 auto} .hs-contact__title{font-family:var(--font-head);font-size:clamp(22px,3vw,30px);font-weight:400;letter-spacing:-.03em;color:var(--ink);margin:0 0 20px} .hs-contact__list{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;align-items:stretch} .hs-contact__list li{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px 20px;display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere} .hs-contact__list span{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-78)} .hs-contact__list strong,.hs-contact__list a{color:var(--ink);font-size:16px;font-weight:600;text-decoration:none} .hs-contact__list a:hover,.hs-contact__list a:focus-visible{color:var(--ink);text-decoration:none} .hs-contact__note{color:var(--ink-78);line-height:1.6;margin:0;max-width:70ch} /* === acervia-demo-producto.module === */ .acv-demo{background:var(--ink);color:var(--cream);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip;padding:clamp(56px,8vw,104px) 0} .acv-demo *,.acv-demo *::before,.acv-demo *::after{box-sizing:border-box} .acv-demo__head{padding:0 var(--gutter,24px);max-width:820px;margin:0 auto clamp(32px,5vw,56px);text-align:center} .acv-demo__tag{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);border:1px solid rgba(255,254,247,.35);border-radius:100px;padding:6px 14px;margin:0 0 20px} .acv-demo__title{font-family:var(--font-head);font-weight:400;letter-spacing:-.03em;line-height:1.1;font-size:clamp(28px,4.4vw,48px);color:var(--cream);margin:0 0 16px;overflow-wrap: break-word} .acv-demo__intro{font-size:clamp(16px,1.8vw,18px);line-height:1.6;color:rgba(255,254,247,.78);margin:0 auto;max-width:640px} /* Apilado (móvil, tableta, reduced-motion, sin JS) */ .acv-demo__track{display:grid;gap:clamp(40px,7vw,72px);padding:0 var(--gutter,24px);max-width:var(--container,1280px);margin:0 auto} .acv-demo__slide{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;min-width:0} .acv-demo__copy{max-width:520px;min-width:0} .acv-demo__kicker{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border-radius:100px;padding:5px 12px;margin:0 0 14px} .acv-demo__kicker--agente{background:var(--agente)} .acv-demo__kicker--brain{background:var(--brain)} .acv-demo__kicker--notetaker{background:var(--diag)} .acv-demo__kicker--backoff{background:var(--backoff)} .acv-demo__copy h3{font-family:var(--font-head);font-weight:400;letter-spacing:-.03em;line-height:1.15;font-size:clamp(24px,3vw,34px);color:var(--cream);margin:0 0 12px} .acv-demo__copy p{font-size:16px;line-height:1.6;color:rgba(255,254,247,.78);margin:0} .acv-demo__nav{display:none} /* Ventana falsa */ .acv-demo__win{background:var(--cream);color:var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);width:100%;max-width:none;min-width:0;font-size:14px;line-height:1.45} .acv-demo__bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--sand);border-bottom:1px solid var(--line)} .acv-demo__dots{display:inline-flex;gap:6px} .acv-demo__dots i{width:10px;height:10px;border-radius:50%;background:var(--coral)} .acv-demo__dots i:nth-child(2){background:var(--diag)} .acv-demo__dots i:nth-child(3){background:var(--agente-strong)} .acv-demo__wtitle{font-size:12px;font-weight:500;color: var(--ink-78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* a. chat */ .acv-demo__chat{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--sand)} .acv-demo__msg{display:flex;max-width:100%} .acv-demo__msg span{display:block;max-width:86%;padding:9px 13px;border-radius:14px;overflow-wrap: break-word} .acv-demo__msg--in{justify-content:flex-start} .acv-demo__msg--in span{background:var(--pure-white);border-bottom-left-radius:4px} .acv-demo__msg--out{justify-content:flex-end} .acv-demo__msg--out span{background:var(--agente);border-bottom-right-radius:4px} .acv-demo__handoff{display:grid;gap:6px;margin-top:6px;padding:12px 14px;background:var(--cream);border:1px solid var(--line);border-left:4px solid var(--agente-strong);border-radius:10px} .acv-demo__handoff strong{font-weight:500} .acv-demo__handoff>span{color:var(--ink-78)} .acv-demo__chips{display:flex;flex-wrap:wrap;gap:6px} .acv-demo__chips em{font-style:normal;font-size:12px;background:var(--agente);border-radius:100px;padding:3px 10px;color:var(--ink)} /* b. brain */ .acv-demo__brain{display:grid;gap:12px;padding:16px} .acv-demo__role{display:inline-flex;align-items:center;gap:8px;justify-self:start;max-width:100%;font-size:12px;font-weight:500;background:var(--brain);color:var(--ink);border-radius:100px;padding:6px 12px} .acv-demo__role svg{flex:none} .acv-demo__ask,.acv-demo__answer{display:grid;gap:4px;padding:12px 14px;border-radius:10px;overflow-wrap: break-word} .acv-demo__ask{background:var(--sand)} .acv-demo__answer{background:var(--pure-white);border:1px solid var(--line)} .acv-demo__ask-label{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color: var(--ink-78)} .acv-demo__sources{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .acv-demo__src{display:inline-flex;align-items:center;gap:6px;font-size:12px;border:1px solid var(--line);border-radius:100px;padding:4px 12px 4px 4px;background:var(--cream);max-width:100%} .acv-demo__src b{font-weight:500;background:var(--brain);border-radius:100px;padding:2px 8px} /* c. notetaker */ .acv-demo__meet{display:grid;gap:12px;padding:16px} .acv-demo__meet-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px} .acv-demo__meet-head strong{font-weight:500} .acv-demo__rec{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:var(--diag);border-radius:100px;padding:3px 10px} .acv-demo__rec i{width:8px;height:8px;border-radius:50%;background:var(--coral-600)} .acv-demo__sum{margin:0;padding:10px 12px;background:var(--sand);border-radius:10px;color:var(--ink-78)} .acv-demo__group h4{margin:0 0 6px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color: var(--ink-78)} .acv-demo__group ul{list-style:none;margin:0;padding:0;display:grid;gap:6px} .acv-demo__group li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--pure-white)} .acv-demo__group li em{font-style:normal;font-size:12px;background:var(--diag);border-radius:100px;padding:2px 10px} .acv-demo__foot{font-size:12px;color: var(--ink-78)} /* d. back-office */ .acv-demo__table{padding:0 0 8px} .acv-demo__progress{height:3px;background:var(--line);overflow:hidden} .acv-demo__progress span{display:block;height:100%;background:var(--backoff-strong);transform-origin:left center} .acv-demo__row{display:grid;grid-template-columns:1.3fr 1fr 1.1fr;gap:8px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px} .acv-demo__row span{min-width:0;overflow-wrap: break-word} .acv-demo__row--head{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color: var(--ink-78)} .acv-demo__ok,.acv-demo__rev{display:inline-flex;align-items:center;gap:6px;justify-self:start;font-size:12px;border-radius:100px;padding:3px 10px;transform-origin:left center} .acv-demo__ok{background:var(--agente)} .acv-demo__rev{background:var(--diag)} .acv-demo__row--review{background:rgba(255,217,138,.25)} @media (max-width:480px){ .acv-demo__row{grid-template-columns:1fr 1fr;row-gap:4px} .acv-demo__row span:nth-child(3){grid-column:1 / -1} .acv-demo__row--head span:nth-child(3){display:none} .acv-demo__msg span{max-width:92%} } /* Tableta y escritorio sin fijado: copia y ventana en dos columnas iguales, alternando lados */ @media (min-width:900px){ .acv-demo__slide{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center} .acv-demo__slide:nth-child(even) .acv-demo__copy{order:2} .acv-demo__copy{justify-self:center;width:100%} } /* Escritorio: carrusel horizontal fijado (clase añadida por JS) */ .acv-demo--pinned .acv-demo__slide:nth-child(even) .acv-demo__copy{order:0} .acv-demo--pinned .acv-demo__copy{justify-self:stretch} .acv-demo--pinned .acv-demo__stage{position:relative;height:100vh;min-height:620px;overflow:hidden} .acv-demo--pinned .acv-demo__track{display:flex;gap:0;width:400%;height:100%;max-width:none;padding:0;margin:0;will-change:transform} .acv-demo--pinned .acv-demo__slide{width:25%;flex:none;height:100%;display:grid;grid-template-columns:minmax(0,400px) minmax(0,620px);gap:clamp(32px,5vw,72px);align-content:center;justify-content:center;align-items:center;padding:calc(var(--nav-h,72px) + 8px) var(--gutter,24px) 72px} .acv-demo--pinned .acv-demo__nav{display:flex;position:absolute;left:50%;bottom:24px;transform:translateX(-50%);align-items:center;gap:18px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,254,247,.45);flex-wrap:wrap;justify-content:center;max-width:90%} .acv-demo__nav .is-active{color:var(--cream)} .acv-demo__navbar{flex-basis:100%;height:2px;background:rgba(255,254,247,.18);overflow:hidden} .acv-demo__navbar i{display:block;height:100%;background:var(--coral);transform:scaleX(.25);transform-origin:left center} /* === acervia-equipo.module === */ .hs-team{padding:clamp(48px,8vw,96px) var(--gutter);background:var(--cream);box-sizing:border-box} .hs-team *{box-sizing:border-box} .hs-team__inner{max-width:var(--container);margin:0 auto} .hs-team__intro{max-width:70ch;font-size:clamp(16px,1vw + 12px,19px);line-height:1.6;color:var(--ink-78);margin:-16px 0 32px} .hs-team__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px} .hs-team__card{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,3vw,32px)} .hs-team__card.is-placeholder{background:var(--cream);border-style:dashed} .hs-team__photo{width:104px;height:104px;border-radius:50%;background:var(--cream);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:18px;font-family:var(--font-head);font-size:36px;font-weight:700;color:var(--ink-78)} .hs-team__photo img{width:100%;height:100%;object-fit:cover} .hs-team__name{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 4px;font-family:var(--font-head);font-size:clamp(20px,1vw + 14px,24px);font-weight:700;letter-spacing:-.02em;color:var(--ink)} .hs-team__verified{flex:0 0 22px;width:22px;height:22px;display:block} .hs-team__role{margin:0 0 20px;font-weight:600;color:var(--ink-78)} .hs-team__li{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;margin-top:auto;padding:0 16px;border-radius:var(--radius-btn);background:var(--blue);color:var(--cream);font-family:var(--font);font-size:15px;font-weight:500;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease} .hs-team__li svg{display:block;width:20px;height:20px} .hs-team__li:hover,.hs-team__li:focus-visible{transform:translateY(-2px);box-shadow:0 12px 28px rgba(16,23,49,.16);color:var(--cream);text-decoration:none} .hs-team__li:focus-visible{outline:3px solid var(--ink);outline-offset:3px} @media(prefers-reduced-motion:reduce){.hs-team__li{transition:none}.hs-team__li:hover{transform:none}} @media(min-width:768px){.hs-team__card{flex:0 1 calc(50% - 10px)}} @media(min-width:1024px){.hs-team__card{flex:0 1 calc((100% - 40px) / 3)}} /* === acervia-faq.module === */ /* Acento por servicio (sistema nuevo): --acc tono fuerte, --acc-tint pastel, botón pastel con texto ink. Todo sale de css/tokens.css */ .acv-acc--none{--acc:var(--coral);--acc-tint:var(--sand);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-acc--diagnostico{--acc:var(--diag-strong);--acc-tint:var(--diag);--btn-bg:var(--diag);--btn-ink:var(--ink)} .acv-acc--brain{--acc:var(--brain-strong);--acc-tint:var(--brain);--btn-bg:var(--brain);--btn-ink:var(--ink)} .acv-acc--agente{--acc:var(--agente-strong);--acc-tint:var(--agente);--btn-bg:var(--agente);--btn-ink:var(--ink)} .acv-acc--backoffice{--acc:var(--backoff-strong);--acc-tint:var(--backoff);--btn-bg:var(--backoff);--btn-ink:var(--ink)} .acv-acc--retainer{--acc:var(--retainer-strong);--acc-tint:var(--retainer);--btn-bg:var(--retainer);--btn-ink:var(--ink)} .acv-acc--integral{--acc:var(--coral);--acc-tint:rgba(255,87,87,.12);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-sec{padding:clamp(48px,8vw,96px) var(--gutter);background:var(--cream);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip} .acv-sec *,.acv-sec *::before,.acv-sec *::after{box-sizing:border-box} .acv-sec--gray{background:var(--sand)} .acv-inner{max-width:var(--container);margin:0 auto} .acv-label{display:block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-78);margin:0 0 12px} .acv-label::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--acc);margin-right:8px} .acv-title{font-family:var(--font-head);font-size:clamp(28px,3vw + 14px,40px);font-weight:400;line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px;overflow-wrap: break-word} .acv-lead{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--ink-78);margin:0 0 clamp(24px,4vw,40px);max-width:760px} .acv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--btn-bg);color:var(--btn-ink);font-family:var(--font);font-weight:500;font-size:16px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;text-align:center;max-width:100%} .acv-btn::after{content:"\2192";display:inline-block;transition:transform .25s ease} .acv-btn:hover,.acv-btn:focus-visible{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,23,49,.14);text-decoration:none;color:var(--btn-ink)} .acv-btn:hover::after,.acv-btn:focus-visible::after{transform:translateX(5px)} .acv-btn:focus-visible,.acv-sec a:focus-visible,.acv-sec summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .acv-card{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px)} .acv-sec--gray .acv-card{background:var(--cream)} .acv-card h3{font-family:var(--font-head);font-size:clamp(18px,2.2vw,21px);font-weight:400;letter-spacing:-.03em;color:var(--ink);margin:0 0 8px} .acv-card p{margin:0;line-height:1.55} .acv-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:768px){.acv-grid--2,.acv-grid--3{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.acv-grid--3{grid-template-columns:repeat(3,1fr)}} @media(prefers-reduced-motion:reduce){.acv-btn,.acv-btn::after{transition:none}.acv-btn:hover,.acv-btn:focus-visible,.acv-btn:hover::after,.acv-btn:focus-visible::after{transform:none}} .acv-faq__layout{display:grid;gap:clamp(20px,3.5vw,48px);grid-template-columns:minmax(0,1fr)} .acv-faq__head .acv-lead{margin-bottom:24px} .acv-faq__list{display:grid;gap:12px;min-width:0} .acv-faq__item{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);transition:border-color .25s ease,box-shadow .25s ease} .acv-faq__item.is-open{border-color:var(--acc);box-shadow:0 10px 28px rgba(16,23,49,.08)} .acv-faq__q{margin:0;font-size:inherit;line-height:inherit} .acv-faq__btn{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:64px;margin:0;padding:18px 22px;background:transparent;border:0;border-radius:var(--radius-lg);cursor:pointer;text-align:left;font-family:var(--font-head);font-size:clamp(16px,1vw + 12px,19px);font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--ink)} .acv-faq__btn:focus-visible{outline:3px solid var(--ink);outline-offset:-3px} .acv-faq__qt{min-width:0;overflow-wrap:break-word} .acv-faq__cat{display:block;margin-bottom:4px;font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-78)} .acv-faq__ico{position:relative;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--acc-tint)} .acv-faq__ico::before,.acv-faq__ico::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--ink);transition:transform .25s ease} .acv-faq__ico::after{transform:rotate(90deg)} .acv-faq__item.is-open .acv-faq__ico::after{transform:rotate(0deg)} .acv-faq__a{padding:0 22px 22px} .acv-faq__a p{margin:0;max-width:78ch;line-height:1.65;color:var(--ink-78);overflow-wrap:break-word} .acv-faq.is-ready .acv-faq__panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s ease,visibility 0s linear .3s} .acv-faq.is-ready .acv-faq__item.is-open .acv-faq__panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s ease,visibility 0s} .acv-faq.is-ready .acv-faq__clip{overflow:hidden;min-height:0} /* Página completa: filtros por tema y grupos */ .acv-faq__top{display:grid;gap:8px;margin-bottom:clamp(20px,3vw,32px)} .acv-faq__chips{display:flex;flex-wrap:wrap;gap:8px} .acv-faq__chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--cream);font-family:var(--font);font-size:14px;font-weight:600;line-height:1.2;color:var(--ink);cursor:pointer;transition:background-color .2s ease,border-color .2s ease} .acv-faq__chip:hover{border-color:var(--acc);background:var(--acc-tint)} .acv-faq__chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--cream)} .acv-faq__chip:focus-visible{outline:3px solid var(--ink);outline-offset:2px} .acv-faq__group{padding-top:clamp(24px,4vw,40px);margin-top:clamp(24px,4vw,40px);border-top:1px solid var(--line)} .acv-faq__top + .acv-faq__group{margin-top:0} .acv-faq__group[hidden]{display:none} .acv-faq__gtitle{margin:0;font-family:var(--font-head);font-size:clamp(22px,1.6vw + 14px,28px);font-weight:400;letter-spacing:-.03em;line-height:1.2;color:var(--ink)} .acv-faq__gtitle::before{content:"";display:block;width:36px;height:4px;margin-bottom:12px;border-radius:4px;background:var(--acc)} @media(min-width:1024px){ .acv-faq__layout{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start} .acv-faq__head{position:sticky;top:calc(var(--nav-h) + 24px)} .acv-faq__top{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end;gap:32px} .acv-faq__top .acv-lead{margin-bottom:0} .acv-faq__chips{justify-content:flex-end} } @media(prefers-reduced-motion:reduce){.acv-faq__item,.acv-faq__ico::before,.acv-faq__ico::after,.acv-faq__chip{transition:none}.acv-faq.is-ready .acv-faq__panel,.acv-faq.is-ready .acv-faq__item.is-open .acv-faq__panel{transition:none}} /* === acervia-footer.module === */ /* ============================================================ AcervoIA footer - acervia-footer.module Banda ink a todo el ancho; contenido dentro del contenedor. Colores sobre fondo oscuro: crema explicita (nunca alias heredados). texto .72 / titulos crema / lineas .14 El logo (.acervia-logo) vive en css/acervia-global.css. ============================================================ */ .rf { background: var(--ink); color: rgba(255, 254, 247, .72); font-family: var(--font); width: 100%; box-sizing: border-box; border-top: 0; } .rf *, .rf *::before, .rf *::after { box-sizing: border-box; } .rf__inner { max-width: var(--container); margin: 0 auto; padding: clamp(48px, 7vw, 80px) var(--gutter) 28px; display: flex; flex-direction: column; gap: clamp(36px, 5vw, 56px); } /* Enlaces: nunca subrayados en ningun estado */ .rf a, .rf a:hover, .rf a:focus, .rf a:active { text-decoration: none; } .rf a:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; border-radius: 4px; } /* === Fila CTA === */ .rf__top { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid rgba(255, 254, 247, .14); align-items: start; } .rf__top:has(.rf__nl) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); } .rf__cta-title { margin: 0 0 24px; font-family: var(--font-head); font-size: clamp(28px, 2vw + 1.4rem, 40px); font-weight: 400; line-height: 1.12; letter-spacing: -.03em; color: var(--cream); } .rf__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; } .rf__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 22px; border-radius: var(--radius-btn); font-family: var(--font); font-size: 15px; font-weight: 500; line-height: 1.2; text-align: center; transition: transform .25s ease, background .2s ease, box-shadow .25s ease, color .2s ease, border-color .2s ease; } .rf__btn--primary { background: var(--coral-600); color: var(--cream); border: 1.5px solid var(--coral-600); } .rf__btn--primary:hover { color: var(--cream); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(209, 58, 58, .35); } .rf__btn--ghost { background: transparent; color: var(--cream); border: 1.5px solid rgba(255, 254, 247, .4); } .rf__btn--ghost:hover { color: var(--cream); background: rgba(255, 254, 247, .1); border-color: var(--cream); } .rf__nl-title { margin: 0 0 14px; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--cream); } /* === Columnas: flex que siempre llena el ancho, columnas de igual peso === */ .rf__grid { display: flex; flex-wrap: wrap; gap: 40px clamp(24px, 3vw, 48px); align-items: flex-start; } .rf__brand { flex: 1.5 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .rf__col { flex: 1 1 140px; min-width: 0; } .rf__logo { display: inline-flex; align-items: center; min-height: var(--touch-target); } .rf .acervia-logo-word { fill: var(--cream); } .rf .acervia-logo-ia { fill: var(--coral); } .rf .acervia-logo-desc { fill: rgba(255, 254, 247, .72); } .rf__blurb { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.55; color: rgba(255, 254, 247, .72); } .rf__col-label { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cream); } .rf__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .rf__list li { margin: 0; padding: 0; } .rf__link, .rf__text { display: flex; align-items: center; min-height: 36px; font-size: 14px; line-height: 1.4; color: rgba(255, 254, 247, .72); overflow-wrap: anywhere; } .rf__link { transition: color .2s ease; } .rf__link:hover, .rf__link:focus-visible { color: var(--cream); } @media (pointer: coarse) { .rf__link, .rf__text { min-height: 44px; } } /* Redes: SVG en botones cuadrados redondeados */ .rf__social { display: flex; flex-wrap: wrap; gap: 10px; } .rf__social:empty { display: none; } .rf__social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-btn); border: 1px solid rgba(255, 254, 247, .14); background: rgba(255, 254, 247, .06); color: var(--cream); transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .rf__social-link:hover, .rf__social-link:focus-visible { background: var(--cream); color: var(--ink); border-color: var(--cream); transform: translateY(-2px); } .rf__social-link svg { display: block; } .rf__social-img { width: 20px; height: 20px; object-fit: contain; } /* Equipo (opcional) */ .rf__team { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .rf__member { display: flex; align-items: center; gap: 10px; } .rf__member-photo, .rf__member-initials { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; } .rf__member-photo { object-fit: cover; } .rf__member-initials { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 254, 247, .14); color: var(--cream); font-size: 12px; font-weight: 700; } .rf__member-info { display: flex; flex-direction: column; } .rf__member-name { font-size: 14px; font-weight: 600; color: var(--cream); } .rf__member-role { font-size: 13px; color: rgba(255, 254, 247, .72); } /* IA e insignias (opcionales) */ .rf__ai-icons { display: flex; flex-wrap: wrap; gap: 8px; } .rf__ai-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-btn); border: 1px solid rgba(255, 254, 247, .14); background: rgba(255, 254, 247, .06); font-size: 18px; color: var(--cream); } .rf__ai-icon:hover { background: rgba(255, 254, 247, .14); } .rf__badges { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .rf__badge { width: 48px; height: 48px; object-fit: contain; opacity: .85; transition: opacity .2s ease; } .rf__badge:hover { opacity: 1; } /* === Fila legal === */ .rf__legal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 24px; border-top: 1px solid rgba(255, 254, 247, .14); } .rf__copy { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 254, 247, .72); } .rf__legal-links { display: flex; flex-wrap: wrap; gap: 4px 24px; } .rf__legal-link { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; color: rgba(255, 254, 247, .72); transition: color .2s ease; } .rf__legal-link:hover, .rf__legal-link:focus-visible { color: var(--cream); } /* === Formularios de HubSpot dentro del footer (CTA y boletin) === Etiquetas solo visibles para lectores de pantalla; consentimiento legible. */ .rf__form-wrap .hs-form, .rf__nl-form .hs-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin: 0; padding: 0; max-width: 100%; } .rf__form-wrap fieldset, .rf__nl-form fieldset { max-width: 100% !important; width: 100%; margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 10px; } .rf__form-wrap .hs-form-field, .rf__nl-form .hs-form-field { flex: 1 1 180px; min-width: 0; margin: 0 !important; float: none !important; width: auto !important; } .rf__form-wrap .hs-form-field > label, .rf__nl-form .hs-form-field > label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .rf__form-wrap .input, .rf__nl-form .input { margin: 0 !important; } body .rf__form-wrap .hs-input:not([type="checkbox"]):not([type="radio"]), body .rf__nl-form .hs-input:not([type="checkbox"]):not([type="radio"]) { width: 100% !important; height: 48px !important; min-height: 48px; padding: 0 16px !important; box-sizing: border-box !important; background: rgba(255, 254, 247, .06) !important; color: var(--cream) !important; border: 1px solid rgba(255, 254, 247, .28) !important; border-radius: var(--radius-btn) !important; font-family: var(--font) !important; font-size: 15px !important; line-height: 1.2 !important; -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important; outline: none !important; } body .rf__form-wrap .hs-input::placeholder, body .rf__nl-form .hs-input::placeholder { color: rgba(255, 254, 247, .6) !important; } body .rf__form-wrap .hs-input:focus, body .rf__nl-form .hs-input:focus { border-color: var(--cream) !important; box-shadow: 0 0 0 3px rgba(255, 254, 247, .18) !important; } body .rf__form-wrap .hs-button, body .rf__form-wrap input[type="submit"], body .rf__nl-form .hs-button, body .rf__nl-form input[type="submit"] { height: 48px !important; min-height: 48px; padding: 0 22px !important; cursor: pointer; white-space: nowrap; background: var(--coral-600) !important; color: var(--cream) !important; border: 1.5px solid var(--coral-600) !important; border-radius: var(--radius-btn) !important; font-family: var(--font) !important; font-size: 15px !important; font-weight: 500 !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; } body .rf__form-wrap .hs-button:hover, body .rf__nl-form .hs-button:hover { box-shadow: 0 10px 24px rgba(209, 58, 58, .35) !important; } .rf__nl-form .hs-submit, .rf__form-wrap .hs-submit { flex: 0 0 auto; } .rf__form-wrap .actions, .rf__nl-form .actions { margin: 0; padding: 0; } .rf__form-wrap .hs-richtext, .rf__form-wrap .legal-consent-container, .rf__form-wrap .hs-form-booleancheckbox-display, .rf__nl-form .hs-richtext, .rf__nl-form .legal-consent-container, .rf__nl-form .hs-form-booleancheckbox-display { flex: 1 1 100%; color: rgba(255, 254, 247, .72) !important; font-size: 12px !important; line-height: 1.5 !important; } .rf__form-wrap .hs-error-msgs, .rf__nl-form .hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; } .rf__form-wrap .hs-error-msg, .rf__nl-form .hs-error-msg, .rf__form-wrap .hs-error-msgs label, .rf__nl-form .hs-error-msgs label { color: #FFB4AB !important; font-size: 13px !important; } .rf__form-wrap .submitted-message, .rf__nl-form .submitted-message { color: var(--cream) !important; font-size: 15px; } /* === Responsive === */ @media (max-width: 900px) { .rf__top:has(.rf__nl) { grid-template-columns: 1fr; } .rf__brand { flex-basis: 100%; } } @media (max-width: 560px) { .rf__cta-actions { flex-direction: column; } .rf__btn { width: 100%; } .rf__form-wrap .hs-submit, .rf__nl-form .hs-submit, body .rf__form-wrap .hs-button, body .rf__nl-form .hs-button { width: 100% !important; } .rf__legal { flex-direction: column; align-items: flex-start; } } /* Enlaces del footer: una sola línea (sin partir compuestos con guion) */ .rf__nav-link { white-space: nowrap; } /* === acervia-formulario-diagnostico.module === */ /* ============================================================ Formulario Agendar diagnostico - acervia-formulario-diagnostico.module Prefijo acv-fd (NO usar .hs-form: es la clase del form de HubSpot y duplicaria el padding). El form embebido: form.hs-form-private > fieldset.form-columns-N > .hs-form-field ... ============================================================ */ .acv-fd { padding: clamp(48px, 8vw, 96px) var(--gutter); } .acv-fd__inner { max-width: 820px; margin: 0 auto; } .acv-fd__title { font-family: var(--font-head); font-size: clamp(28px, 2vw + 1.4rem, 40px); font-weight: 400; letter-spacing: -.03em; line-height: 1.12; color: var(--ink); margin: 0 0 12px; } .acv-fd__sub { font-size: 17px; line-height: 1.6; color: var(--ink-78); margin: 0 0 28px; } /* Sin caja ni relleno externo: el form respira por su propio gap */ .acv-fd__embed { padding: 0; margin: 0; background: none; border: 0; box-shadow: none; max-width: 100%; } .acv-fd__embed .hbspt-form, .acv-fd__embed .widget-type-form { margin: 0; padding: 0; min-height: 0; } .acv-fd__embed form { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; max-width: 100%; font-family: var(--font); } .acv-fd__embed form *, .acv-fd__embed form *::before, .acv-fd__embed form *::after { box-sizing: border-box; } /* Fieldsets: 1 columna en movil, 2 (o 3) a partir de 768 con gap de 16px */ .acv-fd__embed fieldset { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; max-width: 100% !important; margin: 0; padding: 0; border: 0; min-width: 0; } @media (min-width: 768px) { .acv-fd__embed fieldset.form-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acv-fd__embed fieldset.form-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .acv-fd__embed .hs-form-field { float: none !important; width: auto !important; max-width: 100%; min-width: 0; margin: 0 !important; padding: 0; } .acv-fd__embed .hs-form-field .input { margin: 0 !important; } /* Etiquetas */ .acv-fd__embed .hs-form-field > label, .acv-fd__embed legend { display: block; margin: 0 0 8px; padding: 0; font-family: var(--font); font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--ink); text-transform: none; float: none; } .acv-fd__embed .hs-form-required { margin-left: 3px; color: var(--coral-600); } .acv-fd__embed .hs-field-desc { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--ink-78); } /* Campos: 48px, borde 1px, radio 10px, fondo blanco */ .acv-fd__embed input.hs-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .acv-fd__embed select.hs-input, .acv-fd__embed textarea.hs-input { display: block; width: 100% !important; max-width: 100%; min-height: 48px; height: 48px; padding: 0 14px; background-color: var(--pure-white); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-btn); font-family: var(--font); font-size: 16px; font-weight: 400; line-height: 1.3; box-shadow: none; -webkit-appearance: none; appearance: none; transition: border-color .2s ease, box-shadow .2s ease; } .acv-fd__embed textarea.hs-input { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; } .acv-fd__embed select.hs-input { padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23101731' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; } .acv-fd__embed .hs-input::placeholder { color: var(--ink-45); } .acv-fd__embed input.hs-input:hover:not([type="checkbox"]):not([type="radio"]), .acv-fd__embed select.hs-input:hover, .acv-fd__embed textarea.hs-input:hover { border-color: var(--ink-45); } .acv-fd__embed input.hs-input:focus:not([type="checkbox"]):not([type="radio"]), .acv-fd__embed select.hs-input:focus, .acv-fd__embed textarea.hs-input:focus { outline: 2px solid var(--coral-600); outline-offset: 0; border-color: var(--coral-600); } .acv-fd__embed .hs-fieldtype-intl-phone, .acv-fd__embed .hs-fieldtype-intl-phone .input { width: 100%; } /* Casillas y radios como chips (ul.inputs-list.multi-container > li > label) */ .acv-fd__embed ul.inputs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0 !important; width: 100%; } .acv-fd__embed ul.inputs-list > li { margin: 0; padding: 0 !important; width: auto; min-width: 0; list-style: none; } .acv-fd__embed ul.inputs-list label { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin: 0; padding: 10px 14px; background: var(--pure-white); border: 1px solid var(--line); border-radius: var(--radius-btn); font-size: 14px; font-weight: 400; line-height: 1.35; color: var(--ink); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; } .acv-fd__embed ul.inputs-list label:hover { border-color: var(--ink-45); } .acv-fd__embed ul.inputs-list label:has(input:checked) { border-color: var(--ink); background: var(--sand); } .acv-fd__embed ul.inputs-list label > span { margin: 0; min-width: 0; overflow-wrap: anywhere; } /* Casilla y radio personalizados (tambien en el consentimiento legal) */ .acv-fd__embed input[type="checkbox"].hs-input, .acv-fd__embed input[type="radio"].hs-input { -webkit-appearance: none; appearance: none; flex: 0 0 auto; display: inline-block; width: 20px !important; height: 20px !important; min-height: 0 !important; margin: 0 !important; padding: 0; background-color: var(--pure-white); border: 1.5px solid var(--ink-45) !important; border-radius: 6px; cursor: pointer; vertical-align: middle; transition: background-color .15s ease, border-color .15s ease; } .acv-fd__embed input[type="radio"].hs-input { border-radius: 50%; } .acv-fd__embed input[type="checkbox"].hs-input:checked { background-color: var(--coral-600); border-color: var(--coral-600) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23FFFEF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1.5 5.2l3 3 6-6.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px 10px; } .acv-fd__embed input[type="radio"].hs-input:checked { background-color: var(--coral-600); border-color: var(--coral-600) !important; box-shadow: inset 0 0 0 4px var(--pure-white); } .acv-fd__embed input[type="checkbox"].hs-input:focus-visible, .acv-fd__embed input[type="radio"].hs-input:focus-visible { outline: 2px solid var(--coral-600); outline-offset: 2px; } /* Consentimiento legal: texto 13px ink-78, sin chip */ .acv-fd__embed .legal-consent-container { margin: 0; } .acv-fd__embed .legal-consent-container .hs-richtext, .acv-fd__embed .legal-consent-container .hs-richtext p, .acv-fd__embed .legal-consent-container label, .acv-fd__embed .legal-consent-container label span { font-size: 13px; line-height: 1.5; color: var(--ink-78); font-weight: 400; margin: 0; } .acv-fd__embed .legal-consent-container .hs-richtext p { margin: 0 0 10px; } .acv-fd__embed .legal-consent-container a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .acv-fd__embed .legal-consent-container ul.inputs-list { display: block; } .acv-fd__embed .legal-consent-container ul.inputs-list label { display: flex; align-items: flex-start; gap: 10px; min-height: 0; padding: 0; background: none; border: 0; border-radius: 0; } .acv-fd__embed .legal-consent-container ul.inputs-list label:has(input:checked) { background: none; } .acv-fd__embed .legal-consent-container input[type="checkbox"].hs-input { margin-top: 2px !important; } /* Enviar: boton primario */ .acv-fd__embed .hs_submit { margin: 0; } .acv-fd__embed .hs_submit .actions { margin: 0; padding: 0; } .acv-fd__embed input.hs-button, .acv-fd__embed input[type="submit"].hs-button { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 52px; height: auto; padding: 14px 28px; margin: 0; background: var(--coral-600) !important; color: var(--cream) !important; border: 1.5px solid var(--coral-600) !important; border-radius: var(--radius-btn) !important; font-family: var(--font); font-size: 16px; font-weight: 500; line-height: 1.2; text-transform: none; letter-spacing: 0; white-space: normal; cursor: pointer; box-shadow: none; -webkit-appearance: none; appearance: none; transition: transform .25s ease, box-shadow .25s ease; } .acv-fd__embed input.hs-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(209, 58, 58, .28); } .acv-fd__embed input.hs-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } /* Errores */ .acv-fd__embed ul.hs-error-msgs { display: block; list-style: none; margin: 6px 0 0; padding: 0 !important; } .acv-fd__embed .hs-error-msgs li { margin: 0; padding: 0; } .acv-fd__embed .hs-error-msg, .acv-fd__embed .hs-error-msgs label, .acv-fd__embed .hs-main-font-element.hs-error-msg { display: block; margin: 0; padding: 0; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--coral-600); background: none; border: 0; } .acv-fd__embed input.hs-input.error, .acv-fd__embed select.hs-input.error, .acv-fd__embed textarea.hs-input.error { border-color: var(--coral-600); } .acv-fd__embed .submitted-message { font-size: 17px; line-height: 1.6; color: var(--ink); } /* Alternativa sin formulario conectado */ .acv-fd__fallback { background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 4vw, 32px); } .acv-fd__fallback-lead, .acv-fd__fallback-next { color: var(--ink-78); margin: 0 0 16px; line-height: 1.6; } .acv-fd__fields { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; } .acv-fd__fields li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; } .acv-fd__fields strong { color: var(--ink); } .acv-fd__fields span { color: var(--ink-78); font-size: 14px; } .acv-fd__consent { font-size: 13px; line-height: 1.6; color: var(--ink-78); margin: 16px 0 0; } .acv-fd__consent a { color: var(--ink); text-decoration: underline; } @media (min-width: 768px) { .acv-fd__fields { grid-template-columns: 1fr 1fr; column-gap: 24px; } } @media (max-width: 560px) { .acv-fd__embed input.hs-button, .acv-fd__embed input[type="submit"].hs-button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .acv-fd__embed input.hs-button:hover { transform: none; } } /* === acervia-frase-scroll.module === */ .acv-frase { background: var(--cream); color: var(--ink); font-family: var(--font); padding: clamp(72px, 12vw, 160px) var(--gutter); box-sizing: border-box; max-width: 100%; overflow-x: clip; } .acv-frase__inner { max-width: min(1100px, var(--container, 1280px)); margin: 0 auto; text-align: center; } .acv-frase__text { font-family: var(--font-head); font-weight: 400; font-size: clamp(28px, 4.8vw, 62px); line-height: 1.14; letter-spacing: -0.03em; color: var(--ink); margin: 0; text-wrap: balance; overflow-wrap: break-word; } .acv-frase__text .acv-frase__w { display: inline-block; will-change: opacity; } .acv-frase__note { display: inline-flex; align-items: flex-start; gap: 8px; margin: 28px 0 0; font-family: var(--font-hand); font-size: clamp(18px, 2vw, 24px); color: var(--coral-600); transform: rotate(-2deg); } .acv-frase__arrow { flex: none; margin-top: -6px; } /* === acervia-grilla-catalogo.module === */ .acv-bento { background: var(--cream); color: var(--ink-78); font-family: var(--font); padding: clamp(56px, 9vw, 112px) var(--gutter); box-sizing: border-box; max-width: 100%; overflow-x: clip; } .acv-bento *, .acv-bento *::before, .acv-bento *::after { box-sizing: border-box; } .acv-bento__inner { max-width: var(--container, 1280px); margin: 0 auto; } .acv-bento__head { max-width: 760px; margin: 0 0 clamp(28px, 5vw, 56px); } .acv-bento__label { display: block; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-78); margin: 0 0 14px; } .acv-bento__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 14px; } .acv-bento__lead { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; color: var(--ink-78); margin: 0; } .acv-bento__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .acv-bento__card { --bg: var(--sand); --strong: var(--ink); position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 28px; background: var(--bg); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; } .acv-bento__card--diagnostico { --bg: var(--diag); --strong: var(--diag-strong); } .acv-bento__card--brain { --bg: var(--brain); --strong: var(--brain-strong); } .acv-bento__card--agente { --bg: var(--agente); --strong: var(--agente-strong); } .acv-bento__card--backoffice { --bg: var(--backoff); --strong: var(--backoff-strong); } .acv-bento__card--retainer { --bg: var(--retainer); --strong: var(--retainer-strong); } .acv-bento__card--integral { --bg: var(--coral); --strong: var(--ink); } .acv-bento__card--featured::before { content: ""; position: absolute; inset: 0; background: var(--brand-gradient); opacity: .55; pointer-events: none; } .acv-bento__card > * { position: relative; } .acv-bento__card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(16, 23, 49, .14); } .acv-bento__ui { margin: 12px 12px 0; min-height: 188px; padding: 16px; border-radius: 20px; background: var(--cream); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; justify-content: center; overflow: hidden; transition: box-shadow .3s ease; } .acv-bento__card:hover .acv-bento__ui { box-shadow: inset 0 0 0 2px var(--strong); } .acv-bento__body { display: flex; flex-direction: column; flex: 1; padding: 20px 24px 24px; } .acv-bento__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; } .acv-bento__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--cream); color: var(--strong); transition: transform .3s ease; } .acv-bento__card:hover .acv-bento__icon { transform: scale(1.1) rotate(-4deg); } .acv-bento__name { font-family: var(--font-head); font-weight: 400; font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); margin: 0; min-width: 0; overflow-wrap: break-word; } .acv-bento__flag { margin-left: auto; padding: 4px 12px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 12px; font-weight: 500; } .acv-bento__text { font-size: 15px; line-height: 1.55; color: var(--ink); margin: 0 0 14px; } .acv-bento__tags { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .acv-bento__tag { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 12px; border-radius: 999px; background: var(--cream); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.2; } .acv-bento__tag svg { flex: none; color: var(--ink); } .acv-bento__text { margin: 0 0 18px; } .acv-bento__link { margin-top: auto; align-self: flex-start; min-height: 44px; } .acv-bento__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Mini interfaces */ .acv-bento__ui .mi-txt { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; } .acv-bento__ck, .acv-bento__plug, .acv-bento__rows, .acv-bento__stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .acv-bento__ck li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--sand); } .mi-box { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--strong); color: var(--strong); } .mi-pop { display: inline-flex; } .mi-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--line); min-width: 12px; } .acv-bento__chat { display: flex; flex-direction: column; gap: 8px; } .mi-q { align-self: flex-end; margin: 0; max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--ink); color: var(--cream); font-size: 12.5px; line-height: 1.35; } .mi-a { display: grid; align-self: flex-start; max-width: 92%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--sand); } .mi-a > * { grid-area: 1 / 1; } .mi-ans { font-size: 12.5px; line-height: 1.35; color: var(--ink); } .mi-dots { display: inline-flex; align-items: center; gap: 4px; opacity: 0; } .mi-dots i, .mi-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-45); } .mi-chips { display: flex; flex-wrap: wrap; gap: 6px; } .mi-chips span { padding: 3px 10px; border-radius: 999px; background: var(--brain); color: var(--ink); font-size: 11.5px; font-weight: 500; } .acv-bento__plug li { display: flex; align-items: center; gap: 8px; } .mi-node { flex: none; padding: 5px 12px; border-radius: 999px; background: var(--sand); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 500; color: var(--ink); } .mi-node--core { background: var(--strong); color: var(--cream); box-shadow: none; } .mi-line { position: relative; flex: 1; height: 2px; min-width: 20px; overflow: hidden; background: var(--line); border-radius: 2px; } .mi-flow { position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: var(--strong); transform: translateX(-100%); } .acv-bento__wa { display: flex; flex-direction: column; gap: 8px; } .acv-bento__wa p { margin: 0; padding: 8px 12px; font-size: 12.5px; line-height: 1.35; color: var(--ink); max-width: 85%; } .mi-in { align-self: flex-start; background: var(--sand); border-radius: 14px 14px 14px 4px; } .mi-out { align-self: flex-end; background: var(--agente); border-radius: 14px 14px 4px 14px; } .mi-typing { display: inline-flex; gap: 4px; padding: 10px 12px; } .acv-bento__rows li { display: flex; align-items: center; gap: 10px; } .acv-bento__rows .mi-txt { flex: none; width: 96px; overflow: hidden; text-overflow: ellipsis; } .mi-track { flex: 1; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; min-width: 20px; } .mi-fill { display: block; width: 100%; height: 100%; background: var(--strong); border-radius: 4px; transform-origin: left; } .mi-ok { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--strong); color: var(--cream); } .acv-bento__ret { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 18px; justify-items: center; } .mi-ring { display: block; transform-origin: 50% 50%; } .mi-trend { display: block; max-width: 100%; height: auto; } .mi-cap { grid-column: 1 / -1; font-size: 13px; font-weight: 500; color: var(--ink); } .acv-bento__stack { gap: 0; align-items: center; } .acv-bento__stack li { height: 30px; margin-top: -6px; padding: 0 14px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: var(--ink); box-shadow: 0 1px 0 var(--line); white-space: nowrap; } .acv-bento__stack .l5 { width: 56%; background: var(--retainer); margin-top: 0; } .acv-bento__stack .l4 { width: 66%; background: var(--backoff); } .acv-bento__stack .l3 { width: 76%; background: var(--agente); } .acv-bento__stack .l2 { width: 86%; background: var(--brain); } .acv-bento__stack .l1 { width: 96%; background: var(--diag); } /* Movimiento: solo se activa cuando el JS marca el modulo como vivo y la tarjeta entra en pantalla */ .acv-bento--live .acv-bento__card { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; } .acv-bento--live .acv-bento__card.is-in { opacity: 1; transform: none; } .acv-bento--live .acv-bento__card.is-in:hover { transform: translateY(-6px); } .acv-bento--live .is-in .mi-pop { animation: acv-b-pop 6s ease infinite; animation-delay: var(--d, 0s); } .acv-bento--live .is-in .mi-fill { animation: acv-b-fill 6s ease-in-out infinite; animation-delay: var(--d, 0s); } .acv-bento--live .is-in .mi-flow { animation: acv-b-flow 2.4s linear infinite; animation-delay: var(--d, 0s); } .acv-bento--live .is-in .mi-dots { animation: acv-b-dots 7s ease infinite; } .acv-bento--live .is-in .mi-ans { animation: acv-b-ans 7s ease infinite; } .acv-bento--live .is-in .mi-dots i, .acv-bento--live .is-in .mi-typing i { animation: acv-b-bounce 1s ease-in-out infinite; } .acv-bento--live .is-in .mi-dots i:nth-child(2), .acv-bento--live .is-in .mi-typing i:nth-child(2) { animation-delay: .15s; } .acv-bento--live .is-in .mi-dots i:nth-child(3), .acv-bento--live .is-in .mi-typing i:nth-child(3) { animation-delay: .3s; } .acv-bento--live .is-in .mi-ring { animation: acv-b-spin 8s linear infinite; } .acv-bento--live .is-in .acv-bento__stack li { animation: acv-b-float 3.2s ease-in-out infinite alternate; animation-delay: var(--d, 0s); } @keyframes acv-b-pop { 0% { opacity: 0; transform: scale(.4); } 8%, 82% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(.4); } } @keyframes acv-b-fill { 0% { transform: scaleX(0); } 20%, 82% { transform: scaleX(1); } 94%, 100% { transform: scaleX(0); } } @keyframes acv-b-flow { from { transform: translateX(-100%); } to { transform: translateX(250%); } } @keyframes acv-b-dots { 0%, 28% { opacity: 1; } 34%, 100% { opacity: 0; } } @keyframes acv-b-ans { 0%, 30% { opacity: 0; } 38%, 90% { opacity: 1; } 98%, 100% { opacity: 0; } } @keyframes acv-b-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes acv-b-spin { to { transform: rotate(360deg); } } @keyframes acv-b-float { from { transform: translateY(0); } to { transform: translateY(-5px); } } @media (min-width: 640px) { .acv-bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acv-bento__card--integral { grid-column: 1 / -1; } } @media (min-width: 1024px) { .acv-bento__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; } .acv-bento__card { grid-column: span 4; } .acv-bento__card:nth-child(1) { grid-column: span 5; } .acv-bento__card:nth-child(2) { grid-column: span 7; } .acv-bento__card:nth-child(6) { grid-column: span 5; } .acv-bento__card:nth-child(7) { grid-column: span 7; } .acv-bento__card--integral { grid-column: span 7; } .acv-bento__card--integral .acv-bento__ui { min-height: 200px; } } @media (max-width: 400px) { .acv-bento__body { padding: 18px 18px 20px; } .acv-bento__rows .mi-txt { width: 80px; } } @media (prefers-reduced-motion: reduce) { .acv-bento__card, .acv-bento__icon, .acv-bento__ui { transition: none; } .acv-bento__card:hover { transform: none; } } /* === acervia-hero-home.module === */ .acv-hv { position: relative; background: var(--ink); color: var(--cream); font-family: var(--font); max-width: 100%; } .acv-hv__stick { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; box-sizing: border-box; } .acv-hv--scroll { height: 200vh; height: 200svh; } .acv-hv--scroll .acv-hv__stick { position: sticky; top: 0; } .acv-hv__media { position: absolute; inset: 0; background: var(--ink); } .acv-hv__sky, .acv-hv__video, .acv-hv__pic, .acv-hv__poster, .acv-hv__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .acv-hv__video, .acv-hv__poster { object-fit: cover; } .acv-hv__sky--off { display: none; } .acv-hv__video { opacity: 0; transition: opacity .6s ease; } .acv-hv__video.is-playing { opacity: 1; } .acv-hv__veil { position: absolute; inset: 0; pointer-events: none; background: rgba(16, 23, 49, .4); } .acv-hv__canvas { opacity: 0; pointer-events: none; } .acv-hv__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(16, 23, 49, .9) 0%, rgba(16, 23, 49, .68) 40%, rgba(16, 23, 49, 0) 78%), linear-gradient(to bottom, rgba(16, 23, 49, .55) 0%, rgba(16, 23, 49, 0) 22%); } .acv-hv__text { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter) clamp(72px, 11vh, 120px); will-change: transform, opacity; } .acv-hv__pill { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 254, 247, .14); box-shadow: inset 0 0 0 1px rgba(255, 254, 247, .28); font-size: 14px; font-weight: 500; color: var(--cream); } .acv-hv__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(38px, 6.2vw, 84px); line-height: 1.02; letter-spacing: -0.04em; color: var(--cream); margin: 0 0 20px; max-width: 16em; text-wrap: balance; overflow-wrap: break-word; } .acv-hv__sub { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; color: rgba(255, 254, 247, .86); margin: 0 0 28px; max-width: 34em; } .acv-hv__ctas { display: flex; flex-wrap: wrap; gap: 12px 14px; } .acv-hv .btn-arrow--ghost { color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--cream); } .acv-hv .btn-arrow--ghost:hover, .acv-hv .btn-arrow--ghost:focus-visible { background: var(--cream); color: var(--ink); } .acv-hv .btn-arrow:focus-visible { outline-color: var(--cream); } .acv-hv__note { margin: 14px 0 0; font-size: 14px; color: rgba(255, 254, 247, .62); } .acv-hv__explore { position: absolute; right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); bottom: clamp(24px, 5vh, 44px); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 254, 247, .8); animation: acv-hv-bob 2.4s ease-in-out infinite; } @keyframes acv-hv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (max-width: 640px) { .acv-hv__ctas .btn-arrow { width: 100%; justify-content: center; } .acv-hv__explore { display: none; } } @media (prefers-reduced-motion: reduce) { .acv-hv__explore { animation: none; } } /* Entrada del texto solo con CSS: el H1 (elemento LCP) se pinta de inmediato; el resto sube con un fundido corto */ @keyframes acvHvIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .acv-hv__pill, .acv-hv__sub, .acv-hv__ctas, .acv-hv__note { animation: acvHvIn .7s ease both; } .acv-hv__sub { animation-delay: .08s; } .acv-hv__ctas { animation-delay: .16s; } .acv-hv__note { animation-delay: .24s; } @media (prefers-reduced-motion: reduce) { .acv-hv__pill, .acv-hv__sub, .acv-hv__ctas, .acv-hv__note { animation: none; } } /* === acervia-hero-nicho.module === */ .hs-nh{background:linear-gradient(180deg,var(--tint) 0%,var(--cream) 100%);padding:clamp(48px,8vw,112px) var(--gutter);box-sizing:border-box;overflow-x:clip} .hs-nh *{box-sizing:border-box} .hs-nh__inner{max-width:var(--container);margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center} .hs-nh__eyebrow{display:inline-block;background:var(--cream);border:1px solid var(--acc);border-radius:var(--radius-pill);padding:4px 14px;font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ink);margin-bottom:20px} .hs-nh__title{font-family:var(--font-head);font-size:clamp(36px,4vw + 1.2rem,68px);font-weight:700;line-height:1.05;letter-spacing:-.04em;color:var(--ink);margin:0 0 20px;max-width:22ch;overflow-wrap:break-word;hyphens:manual} .hs-nh__sub{font-family:var(--font);font-size:clamp(16px,1.2vw + 12px,20px);line-height:1.6;color:var(--ink-78);margin:0 0 32px;max-width:64ch} .hs-nh__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--bg);color:var(--on);font-family:var(--font);font-weight:500;font-size:16px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease} .hs-nh__btn::after{content:"\2192";display:inline-block;transition:transform .25s ease} .hs-nh__btn:hover,.hs-nh__btn:focus-visible{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,23,49,.14);color:var(--on);text-decoration:none} .hs-nh__btn:hover::after,.hs-nh__btn:focus-visible::after{transform:translateX(5px)} .hs-nh__btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px} @media(prefers-reduced-motion:reduce){.hs-nh__btn,.hs-nh__btn::after{transition:none}.hs-nh__btn:hover,.hs-nh__btn:hover::after{transform:none}} .acc-none{--acc:var(--coral);--tint:var(--sand);--bg:var(--coral-600);--on:var(--cream)} .acc-diagnostico{--acc:var(--diag-strong);--tint:var(--diag);--bg:var(--diag);--on:var(--ink)} .acc-brain{--acc:var(--brain-strong);--tint:var(--brain);--bg:var(--brain);--on:var(--ink)} .acc-agente{--acc:var(--agente-strong);--tint:var(--agente);--bg:var(--agente);--on:var(--ink)} .acc-backoffice{--acc:var(--backoff-strong);--tint:var(--backoff);--bg:var(--backoff);--on:var(--ink)} .acc-retainer{--acc:var(--retainer-strong);--tint:var(--retainer);--bg:var(--retainer);--on:var(--ink)} .acc-integral{--acc:var(--coral);--tint:rgba(255,87,87,.12);--bg:var(--coral-600);--on:var(--cream)} .hs-nh.acv-hero-top{padding-top:calc(var(--nav-h) + clamp(40px,7vw,96px))} /* === acervia-hero-servicio.module === */ /* Acento por servicio (sistema nuevo): --acc tono fuerte, --acc-tint pastel, botón pastel con texto ink. Todo sale de css/tokens.css */ .acv-acc--none{--acc:var(--coral);--acc-tint:var(--sand);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-acc--diagnostico{--acc:var(--diag-strong);--acc-tint:var(--diag);--btn-bg:var(--diag);--btn-ink:var(--ink)} .acv-acc--brain{--acc:var(--brain-strong);--acc-tint:var(--brain);--btn-bg:var(--brain);--btn-ink:var(--ink)} .acv-acc--agente{--acc:var(--agente-strong);--acc-tint:var(--agente);--btn-bg:var(--agente);--btn-ink:var(--ink)} .acv-acc--backoffice{--acc:var(--backoff-strong);--acc-tint:var(--backoff);--btn-bg:var(--backoff);--btn-ink:var(--ink)} .acv-acc--retainer{--acc:var(--retainer-strong);--acc-tint:var(--retainer);--btn-bg:var(--retainer);--btn-ink:var(--ink)} .acv-acc--integral{--acc:var(--coral);--acc-tint:rgba(255,87,87,.12);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-sec{padding:clamp(48px,8vw,96px) var(--gutter);background:var(--cream);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip} .acv-sec *,.acv-sec *::before,.acv-sec *::after{box-sizing:border-box} .acv-sec--gray{background:var(--sand)} .acv-inner{max-width:var(--container);margin:0 auto} .acv-label{display:block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-78);margin:0 0 12px} .acv-label::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--acc);margin-right:8px} .acv-title{font-family:var(--font-head);font-size:clamp(28px,3vw + 14px,40px);font-weight:400;line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px;overflow-wrap: break-word} .acv-lead{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--ink-78);margin:0 0 clamp(24px,4vw,40px);max-width:760px} .acv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--btn-bg);color:var(--btn-ink);font-family:var(--font);font-weight:500;font-size:16px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;text-align:center;max-width:100%} .acv-btn::after{content:"\2192";display:inline-block;transition:transform .25s ease} .acv-btn:hover,.acv-btn:focus-visible{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,23,49,.14);text-decoration:none;color:var(--btn-ink)} .acv-btn:hover::after,.acv-btn:focus-visible::after{transform:translateX(5px)} .acv-btn:focus-visible,.acv-sec a:focus-visible,.acv-sec summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .acv-card{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px)} .acv-sec--gray .acv-card{background:var(--cream)} .acv-card h3{font-family:var(--font-head);font-size:clamp(18px,2.2vw,21px);font-weight:400;letter-spacing:-.03em;color:var(--ink);margin:0 0 8px} .acv-card p{margin:0;line-height:1.55} .acv-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:768px){.acv-grid--2,.acv-grid--3{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.acv-grid--3{grid-template-columns:repeat(3,1fr)}} @media(prefers-reduced-motion:reduce){.acv-btn,.acv-btn::after{transition:none}.acv-btn:hover,.acv-btn:focus-visible,.acv-btn:hover::after,.acv-btn:focus-visible::after{transform:none}} .acv-hero{padding:clamp(48px,9vw,112px) var(--gutter) clamp(40px,7vw,80px);background:linear-gradient(180deg,var(--acc-tint) 0%,var(--cream) 100%);font-family:var(--font);box-sizing:border-box;overflow-x:clip} .acv-hero *{box-sizing:border-box} .acv-hero.acv-hero-top{padding-top:calc(var(--nav-h) + clamp(40px,7vw,96px))} .acv-hero__grid{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1fr);align-items:center} .acv-hero__copy{min-width:0} .acv-hero__pill{display:inline-block;padding:4px 14px;border-radius:var(--radius-pill);background:var(--cream);border:1px solid var(--acc);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ink);margin-bottom:20px} .acv-hero__title{font-family:var(--font-head);font-size:clamp(34px,3.2vw + 1.4rem,62px);font-weight:700;line-height:1.05;letter-spacing:-.04em;color:var(--ink);margin:0 0 20px;overflow-wrap:break-word;hyphens:manual} .acv-hero__sub{font-size:clamp(16px,1.2vw + 12px,20px);line-height:1.6;color:var(--ink-78);margin:0 0 32px;max-width:62ch} .acv-hero__panel{background:var(--cream);border:2px solid var(--acc);border-radius:20px;padding:clamp(22px,3vw,32px);box-shadow:0 18px 44px rgba(16,23,49,.10);min-width:0} .acv-hero__plabel{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-78)} .acv-hero__price{margin:8px 0 0;font-family:var(--font-head);font-size:clamp(34px,3vw + 1.2rem,54px);font-weight:700;letter-spacing:-.04em;line-height:1.05;color:var(--ink);overflow-wrap:break-word} .acv-hero__unit{margin:4px 0 0;font-size:15px;font-weight:600;color:var(--ink-78)} .acv-hero__panel .acv-chips{margin-top:20px} @media(min-width:1024px){.acv-hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}} /* === acervia-hero-simple.module === */ .hs-inst{background:linear-gradient(180deg,var(--sand) 0%,var(--cream) 100%);padding:clamp(48px,8vw,96px) var(--gutter);box-sizing:border-box;overflow-x:clip} .hs-inst *{box-sizing:border-box} .hs-inst__inner{max-width:var(--container);margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center} .hs-inst__eyebrow{display:inline-block;padding:4px 14px;border-radius:var(--radius-pill);background:var(--cream);border:1px solid var(--line);font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ink);margin-bottom:20px} .hs-inst__title{font-family:var(--font-head);font-size:clamp(36px,4vw + 1.2rem,68px);font-weight:700;line-height:1.05;letter-spacing:-.04em;overflow-wrap:break-word;hyphens:manual;color:var(--ink);margin:0 0 20px;max-width:22ch} .hs-inst__sub{font-family:var(--font);font-size:clamp(16px,1.2vw + 12px,20px);line-height:1.6;color:var(--ink-78);margin:0;max-width:64ch} .hs-inst.acv-hero-top{padding-top:calc(var(--nav-h) + clamp(40px,7vw,96px))} /* === acervia-integraciones.module === */ .acv-integ { --ib: var(--ink); --it: var(--cream); --chip-bg: rgba(255, 254, 247, .1); --chip-line: rgba(255, 254, 247, .22); --integ-gap: clamp(32px, 4vw, 64px); background: var(--ib); color: var(--it); font-family: var(--font); padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); box-sizing: border-box; max-width: 100%; overflow-x: clip; } .acv-integ--light { --ib: var(--cream); --it: var(--ink); --chip-bg: var(--sand); --chip-line: var(--line); } .acv-integ *, .acv-integ *::before, .acv-integ *::after { box-sizing: border-box; } .acv-integ__inner { max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 24px); } .acv-integ__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(22px, 2.8vw, 32px); letter-spacing: -0.03em; line-height: 1.2; color: var(--it); margin: 0 0 clamp(28px, 4vw, 48px); text-align: center; } .acv-integ__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .acv-integ__rail { display: flex; width: max-content; animation: acv-integ-run 70s linear infinite; will-change: transform; } .acv-integ__viewport:hover .acv-integ__rail, .acv-integ__viewport:focus-within .acv-integ__rail { animation-play-state: paused; } .acv-integ__track { display: flex; flex: none; gap: var(--integ-gap); margin: 0; padding: 0 var(--integ-gap) 0 0; list-style: none; } .acv-integ__chip { flex: none; border-radius: 999px; background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--chip-line); white-space: nowrap; } .acv-integ__link { display: inline-flex; align-items: center; gap: 16px; min-height: 72px; padding: 14px 36px 14px 14px; border-radius: 999px; color: inherit; text-decoration: none; } .acv-integ a.acv-integ__link:focus-visible { outline: 3px solid var(--it); outline-offset: 3px; } .acv-integ__mono, .acv-integ__ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; } .acv-integ__mono { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--ink); } .acv-integ__ico { background: var(--cream); } .acv-integ__ico img { display: block; width: 28px; height: 28px; object-fit: contain; } .acv-integ__mono--0 { background: var(--agente); } .acv-integ__mono--1 { background: var(--retainer); } .acv-integ__mono--2 { background: var(--diag); } .acv-integ__mono--3 { background: var(--brain); } .acv-integ__mono--4 { background: var(--backoff); } .acv-integ__name { font-size: 20px; font-weight: 500; color: var(--it); } @keyframes acv-integ-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .acv-integ__rail { animation: none; width: auto; justify-content: center; } .acv-integ__track--dup, .acv-integ__chip--dup { display: none; } .acv-integ__track { flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter, 24px); gap: 20px; } .acv-integ__viewport { -webkit-mask-image: none; mask-image: none; } } /* === acervia-integral-destacado.module === */ .acv-integral{background:var(--sand);color:var(--ink);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip;padding:clamp(56px,8vw,104px) var(--gutter,24px)} .acv-integral *,.acv-integral *::before,.acv-integral *::after{box-sizing:border-box} .acv-integral__wrap{max-width:var(--container,1280px);margin:0 auto} .acv-integral__card{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,32px);padding:clamp(20px,4vw,48px);border-radius:28px;background:var(--coral);background-image:var(--brand-gradient);color:var(--ink);min-width:0;align-items:stretch} .acv-integral__main,.acv-integral__side{min-width:0} .acv-integral__main{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(4px,1vw,12px) 0} .acv-integral__label{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px} .acv-integral__label::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink)} .acv-integral__title{font-family:var(--font-head);font-weight:400;letter-spacing:-.03em;line-height:1.1;font-size:clamp(28px,4.2vw,44px);color:var(--ink);margin:0 0 16px;overflow-wrap:break-word} .acv-integral__intro{font-size:clamp(16px,1.8vw,18px);line-height:1.6;margin:0 0 20px;color:var(--ink)} .acv-integral__tags{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:8px} .acv-integral__tags li{display:inline-flex;align-items:center;min-height:34px;padding:4px 16px;border-radius:999px;background:var(--cream);color:var(--ink);font-size:14px;font-weight:500} .acv-integral__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:auto} .acv-integral__cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--ink);color:var(--cream);font-weight:500;text-decoration:none;max-width:100%} .acv-integral__cta span{display:inline-block;transition:transform .2s} .acv-integral__cta:hover span{transform:translateX(4px)} .acv-integral__more{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px} .acv-integral a:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .acv-integral__side{display:flex;flex-direction:column;background:rgba(255,254,247,.78);border-radius:20px;padding:clamp(20px,3vw,32px)} .acv-integral__h3{font-family:var(--font);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0 0 16px} .acv-integral__list{list-style:none;margin:0;padding:0;display:grid;gap:14px} .acv-integral__list li{position:relative;padding-left:30px;line-height:1.45} .acv-integral__list li::before{content:"";position:absolute;left:0;top:.1em;width:20px;height:20px;border-radius:50%;background:var(--ink)} .acv-integral__list li::after{content:"";position:absolute;left:7px;top:.35em;width:6px;height:10px;border:solid var(--cream);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.8)} .acv-integral__benefit{margin:auto 0 0;padding-top:20px;font-weight:500;line-height:1.45} .acv-integral__list+.acv-integral__benefit{margin-top:auto} @media (min-width:900px){ .acv-integral__card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} } @media (prefers-reduced-motion:reduce){.acv-integral__cta span{transition:none}} /* === acervia-lista-precios.module === */ /* Acento por servicio (sistema nuevo): --acc tono fuerte, --acc-tint pastel, botón pastel con texto ink. Todo sale de css/tokens.css */ .acv-acc--none{--acc:var(--coral);--acc-tint:var(--sand);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-acc--diagnostico{--acc:var(--diag-strong);--acc-tint:var(--diag);--btn-bg:var(--diag);--btn-ink:var(--ink)} .acv-acc--brain{--acc:var(--brain-strong);--acc-tint:var(--brain);--btn-bg:var(--brain);--btn-ink:var(--ink)} .acv-acc--agente{--acc:var(--agente-strong);--acc-tint:var(--agente);--btn-bg:var(--agente);--btn-ink:var(--ink)} .acv-acc--backoffice{--acc:var(--backoff-strong);--acc-tint:var(--backoff);--btn-bg:var(--backoff);--btn-ink:var(--ink)} .acv-acc--retainer{--acc:var(--retainer-strong);--acc-tint:var(--retainer);--btn-bg:var(--retainer);--btn-ink:var(--ink)} .acv-acc--integral{--acc:var(--coral);--acc-tint:rgba(255,87,87,.12);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-sec{padding:clamp(48px,8vw,96px) var(--gutter);background:var(--cream);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip} .acv-sec *,.acv-sec *::before,.acv-sec *::after{box-sizing:border-box} .acv-sec--gray{background:var(--sand)} .acv-inner{max-width:var(--container);margin:0 auto} .acv-label{display:block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-78);margin:0 0 12px} .acv-label::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--acc);margin-right:8px} .acv-title{font-family:var(--font-head);font-size:clamp(28px,3vw + 14px,40px);font-weight:400;line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px;overflow-wrap: break-word} .acv-lead{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--ink-78);margin:0 0 clamp(24px,4vw,40px);max-width:760px} .acv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--btn-bg);color:var(--btn-ink);font-family:var(--font);font-weight:500;font-size:16px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;text-align:center;max-width:100%} .acv-btn::after{content:"\2192";display:inline-block;transition:transform .25s ease} .acv-btn:hover,.acv-btn:focus-visible{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,23,49,.14);text-decoration:none;color:var(--btn-ink)} .acv-btn:hover::after,.acv-btn:focus-visible::after{transform:translateX(5px)} .acv-btn:focus-visible,.acv-sec a:focus-visible,.acv-sec summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .acv-card{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px)} .acv-sec--gray .acv-card{background:var(--cream)} .acv-card h3{font-family:var(--font-head);font-size:clamp(18px,2.2vw,21px);font-weight:400;letter-spacing:-.03em;color:var(--ink);margin:0 0 8px} .acv-card p{margin:0;line-height:1.55} .acv-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:768px){.acv-grid--2,.acv-grid--3{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.acv-grid--3{grid-template-columns:repeat(3,1fr)}} @media(prefers-reduced-motion:reduce){.acv-btn,.acv-btn::after{transition:none}.acv-btn:hover,.acv-btn:focus-visible,.acv-btn:hover::after,.acv-btn:focus-visible::after{transform:none}} .acv-lp{display:flex;flex-wrap:wrap;justify-content:center;gap:16px} .acv-lp__card{flex:1 1 100%;display:flex;flex-direction:column;gap:14px;border-top:4px solid var(--acc);min-width:0} .acv-lp__card h3{margin:0;font-size:clamp(18px,1vw + 13px,22px)} .acv-lp__price{margin:0;font-family:var(--font-head);font-size:clamp(28px,2vw + 1rem,40px);font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1.1;overflow-wrap:break-word} .acv-lp__price small{font-size:clamp(14px,1vw + 10px,17px);font-weight:600;color:var(--ink-78)} .acv-lp__card .acv-chips{margin-top:auto} .acv-lp__notes{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .acv-lp__notes li{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);line-height:1.55;color:var(--ink-78)} .acv-lp__notes svg{flex:0 0 22px;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @media(min-width:768px){.acv-lp__card{flex:0 1 calc(50% - 8px)}} @media(min-width:1024px){.acv-lp__card{flex:0 1 calc((100% - 32px) / 3)}} /* === acervia-metricas.module === */ .acv-metricas { --mx: var(--coral); padding: clamp(40px, 6vw, 72px) var(--gutter); background: var(--cream); color: var(--ink-78); font-family: var(--font); box-sizing: border-box; max-width: 100%; overflow-x: clip; } .acv-metricas *, .acv-metricas *::before, .acv-metricas *::after { box-sizing: border-box; } .acv-metricas--diagnostico { --mx: var(--diag-strong); } .acv-metricas--brain { --mx: var(--brain-strong); } .acv-metricas--agente { --mx: var(--agente-strong); } .acv-metricas--backoffice { --mx: var(--backoff-strong); } .acv-metricas--retainer { --mx: var(--retainer-strong); } .acv-metricas__inner { max-width: var(--container, 1280px); margin: 0 auto; } .acv-metricas__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } .acv-metricas__item { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 3vw, 28px) clamp(12px, 2vw, 24px); min-width: 0; border-top: 1px solid var(--line); position: relative; } .acv-metricas__item::before { content: ""; position: absolute; top: -1px; left: clamp(12px, 2vw, 24px); width: 36px; height: 3px; background: var(--mx); border-radius: 2px; } .acv-metricas__num { font-family: var(--font-head); font-weight: 400; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: break-word; } .acv-metricas__text { font-size: 16px; line-height: 1.4; color: var(--ink-78); overflow-wrap: break-word; } @media (min-width: 900px) { .acv-metricas__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .acv-metricas__item + .acv-metricas__item { border-left: 1px solid var(--line); } } /* === acervia-mini-interfaz.module === */ /* Mini interfaz del producto: ventana ilustrativa. Todo con tokens; la animación solo usa transform y opacity. */ .acv-acc--none{--acc:var(--coral);--acc-tint:var(--sand);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-acc--diagnostico{--acc:var(--diag-strong);--acc-tint:var(--diag);--btn-bg:var(--diag);--btn-ink:var(--ink)} .acv-acc--brain{--acc:var(--brain-strong);--acc-tint:var(--brain);--btn-bg:var(--brain);--btn-ink:var(--ink)} .acv-acc--agente{--acc:var(--agente-strong);--acc-tint:var(--agente);--btn-bg:var(--agente);--btn-ink:var(--ink)} .acv-acc--backoffice{--acc:var(--backoff-strong);--acc-tint:var(--backoff);--btn-bg:var(--backoff);--btn-ink:var(--ink)} .acv-acc--retainer{--acc:var(--retainer-strong);--acc-tint:var(--retainer);--btn-bg:var(--retainer);--btn-ink:var(--ink)} .acv-acc--integral{--acc:var(--coral);--acc-tint:rgba(255,87,87,.12);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-sec{padding:clamp(48px,8vw,96px) var(--gutter);background:var(--cream);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip} .acv-sec *,.acv-sec *::before,.acv-sec *::after{box-sizing:border-box} .acv-sec--gray{background:var(--sand)} .acv-inner{max-width:var(--container);margin:0 auto} .acv-label{display:block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-78);margin:0 0 12px} .acv-label::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--acc);margin-right:8px} .acv-title{font-family:var(--font-head);font-size:clamp(28px,3vw + 14px,40px);font-weight:400;line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px;overflow-wrap: break-word} .acv-lead{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--ink-78);margin:0 0 clamp(24px,4vw,40px);max-width:760px} .acv-mi__stage{margin:0;width:100%;max-width:none} .acv-mi__win{background:var(--cream);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(16,23,49,.10)} .acv-mi__bar{display:flex;align-items:center;gap:6px;padding:12px 16px;background:var(--sand);border-bottom:1px solid var(--line)} .acv-mi__bar i{width:10px;height:10px;border-radius:50%;background:var(--line);flex:0 0 10px} .acv-mi__bar i:first-child{background:var(--coral)} .acv-mi__bar-title{margin-left:10px;font-size:13px;font-weight:600;color:var(--ink-78);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acv-mi__body{padding:clamp(16px,3vw,32px);min-width:0} .acv-mi__split{display:grid;gap:clamp(16px,3vw,28px);grid-template-columns:1fr} .acv-mi__col{min-width:0} .acv-mi__h{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-78)} .acv-mi__cap{margin:14px 0 0} .acv-mi__badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--cream);font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--ink-78)} /* Filas (diagnóstico) */ .acv-mi__rows,.acv-mi__steps,.acv-mi__layers,.acv-mi__checks,.acv-mi__log,.acv-mi__flow{list-style:none;margin:0;padding:0} .acv-mi__rows{display:grid;gap:10px} .acv-mi__row{display:grid;grid-template-columns:12px 1fr;gap:4px 10px;align-items:center;background:var(--sand);border-radius:12px;padding:12px 14px} .acv-mi__dot{width:10px;height:10px;border-radius:50%;background:var(--acc)} .acv-mi__txt{font-size:15px;color:var(--ink);line-height:1.35;min-width:0;overflow-wrap: break-word} .acv-mi__tag{grid-column:2;justify-self:start;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:2px 10px;border-radius:var(--radius-pill);background:var(--cream);border:1px solid var(--line);color:var(--ink-78)} .acv-mi__tag--hi{background:var(--acc-tint);border-color:var(--acc);color:var(--ink)} .acv-mi__meter{grid-column:2;height:6px;border-radius:6px;background:var(--line);overflow:hidden;display:block} .acv-mi__meter b{display:block;height:100%;border-radius:6px;background:var(--acc);transform-origin:left} .acv-mi__steps{display:grid;gap:10px;counter-reset:mi} .acv-mi__steps li{background:var(--acc-tint);border-radius:12px;padding:12px 14px;font-size:15px;color:var(--ink);line-height:1.35;overflow-wrap: break-word} .acv-mi__steps li span{display:block;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ink-78);margin-bottom:2px} /* Chat (brain, agente) */ .acv-mi__col--wide{display:grid;gap:10px;align-content:start} .acv-mi__msg{max-width:92%;padding:12px 16px;border-radius:16px;font-size:15px;line-height:1.5;color:var(--ink);overflow-wrap: break-word} .acv-mi__msg--user{justify-self:end;background:var(--sand);border-bottom-right-radius:4px} .acv-mi__msg--bot{justify-self:start;background:var(--acc-tint);border-bottom-left-radius:4px} .acv-mi__who{display:block;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ink-78);margin-bottom:4px} .acv-mi__src{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .acv-mi__src em{font-style:normal;font-size:12px;padding:2px 10px;border-radius:var(--radius-pill);background:var(--cream);border:1px solid var(--line);color:var(--ink-78)} .acv-mi__input{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;padding:12px 16px;border-radius:var(--radius-pill);border:1px solid var(--line);font-size:14px;color:var(--ink-45)} .acv-mi__input span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acv-mi__input i{flex:0 0 22px;height:22px;border-radius:50%;background:var(--acc)} .acv-mi__layers{display:grid;gap:10px} .acv-mi__layers li{background:var(--sand);border-left:4px solid var(--acc);border-radius:12px;padding:12px 14px;overflow-wrap: break-word} .acv-mi__layers b{display:block;color:var(--ink);font-weight:600;font-size:15px} .acv-mi__layers span{font-size:14px;color:var(--ink-78)} .acv-mi__checks{display:grid;gap:10px} .acv-mi__checks li{position:relative;padding:12px 14px 12px 42px;background:var(--sand);border-radius:12px;font-size:15px;color:var(--ink)} .acv-mi__checks li::before{content:"";position:absolute;left:16px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--acc)} /* Conectores MCP */ .acv-mi__hub{position:relative;display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:18px} .acv-mi__lines{display:none} .acv-mi__node{padding:12px 16px;border-radius:14px;background:var(--sand);border:1px solid var(--line);font-size:15px;font-weight:500;color:var(--ink);text-align:center} .acv-mi__node--ia{background:var(--ink);color:var(--cream);border-color:var(--ink)} .acv-mi__node--core{background:var(--acc-tint);border-color:var(--acc)} .acv-mi__log{display:grid;gap:8px} .acv-mi__log li{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:var(--sand)} .acv-mi__log code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--ink);overflow-wrap: break-word} .acv-mi__ok{font-size:12px;font-weight:600;padding:2px 10px;border-radius:var(--radius-pill);background:var(--acc-tint);color:var(--ink)} /* Back-office */ .acv-mi__flow{display:grid;gap:10px;margin-bottom:18px} .acv-mi__flow li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--sand);font-size:15px;color:var(--ink)} .acv-mi__flow b{flex:0 0 28px;height:28px;border-radius:50%;background:var(--acc-tint);border:1.5px solid var(--acc);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--ink)} .acv-mi__table{border:1px solid var(--line);border-radius:12px;overflow:hidden} .acv-mi__tr{display:grid;grid-template-columns:1fr;gap:2px;padding:10px 14px;border-top:1px solid var(--line);font-size:14px;color:var(--ink);min-width:0} .acv-mi__tr span{min-width:0;overflow-wrap: break-word} .acv-mi__tr--head{display:none;background:var(--sand);border-top:0;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ink-78)} .acv-mi__st{justify-self:start;font-size:12px;font-weight:600;padding:2px 10px;border-radius:var(--radius-pill);background:var(--acc-tint);color:var(--ink)} .acv-mi__st--warn{background:var(--cream);border:1px solid var(--coral);color:var(--ink)} /* Retainer */ .acv-mi__board{display:grid;gap:16px;grid-template-columns:1fr} .acv-mi__lane{background:var(--sand);border-radius:14px;padding:14px;display:grid;gap:10px;align-content:start;min-width:0} .acv-mi__lane .acv-mi__h{margin:0} .acv-mi__card{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:14px;line-height:1.4;color:var(--ink);overflow-wrap: break-word} .acv-mi__card--live{border-color:var(--acc)} .acv-mi__card--done{background:var(--acc-tint);border-color:transparent} .acv-mi__prog{display:block;margin-top:10px;height:6px;border-radius:6px;background:var(--line);overflow:hidden} .acv-mi__prog b{display:block;height:100%;width:60%;border-radius:6px;background:var(--acc);transform-origin:left} /* Integral */ .acv-mi__integral{display:grid;gap:12px;grid-template-columns:1fr} .acv-mi__piece{padding:16px;border-radius:14px;background:var(--sand);border:1px solid var(--line);overflow-wrap: break-word} .acv-mi__piece b{display:block;font-family:var(--font-head);font-weight:400;font-size:18px;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px} .acv-mi__piece span{font-size:14px;color:var(--ink-78)} .acv-mi__piece--wide{background:var(--brand-gradient);border-color:transparent} .acv-mi__piece--wide span{color:var(--ink)} @media(min-width:768px){ .acv-mi__split{grid-template-columns:3fr 2fr} .acv-mi__steps{grid-template-columns:1fr 1fr} .acv-mi__flow{grid-template-columns:repeat(4,1fr)} .acv-mi__tr{grid-template-columns:1fr 1fr 1fr;align-items:center} .acv-mi__tr--head{display:grid} .acv-mi__board{grid-template-columns:repeat(3,1fr)} .acv-mi__integral{grid-template-columns:repeat(3,1fr)} .acv-mi__piece--wide{grid-column:1 / -1} } @media(min-width:1024px){ .acv-mi__hub{display:block;height:260px} .acv-mi__lines{display:block;position:absolute;inset:0;width:100%;height:100%} .acv-mi__lines path{fill:none;stroke:var(--acc);stroke-width:2;stroke-dasharray:4 6;vector-effect:non-scaling-stroke} .acv-mi__node{position:absolute;width:150px;margin:-22px 0 0 -75px} .acv-mi__node--ia{left:25%;top:50%} .acv-mi__node--core{left:50%;top:50%;width:170px;margin-left:-85px} .acv-mi__node--a{left:75%;top:18%} .acv-mi__node--b{left:75%;top:41%} .acv-mi__node--c{left:75%;top:64%} .acv-mi__node--d{left:75%;top:87%} } /* Filas de 4 columnas solo cuando hay ancho de sobra: en tablet la columna de texto se aprieta y parte las palabras */ @media(min-width:1100px){ .acv-mi__row{grid-template-columns:12px 1fr auto 120px} .acv-mi__tag,.acv-mi__meter{grid-column:auto} } /* === acervia-navbar.module === */ /* ============================================================ AcervoIA navbar - acervia-navbar.module Colores solo via tokens. Sin text-decoration en ningun estado. Variables locales: --nv-fg (texto), --nv-fg-soft (texto secundario), --nv-hover (fondo hover). ============================================================ */ .acervia-nav { --nv-fg: var(--ink); --nv-fg-soft: var(--ink-78); --nv-hover: rgba(16, 23, 49, .06); position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 100%; z-index: 1000; padding: 14px var(--gutter); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; background: rgba(255, 254, 247, .22); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 0; border-bottom: 1px solid rgba(255, 254, 247, .45); border-radius: 0; box-shadow: 0 1px 0 rgba(16, 23, 49, .04); transition: width .7s cubic-bezier(.65,0,.35,1), top .7s cubic-bezier(.65,0,.35,1), padding .7s cubic-bezier(.65,0,.35,1), border-radius .7s cubic-bezier(.65,0,.35,1), background .5s ease, box-shadow .7s ease; } .acervia-nav a, .acervia-nav a:hover, .acervia-nav a:focus, .acervia-nav a:active, .acervia-nav__drawer a, .acervia-nav__drawer a:hover, .acervia-nav__drawer a:focus, .acervia-nav__drawer a:active { text-decoration: none; } /* Pildora de vidrio al hacer scroll: muy translucida, sin borde, solo sombra suave (paginas claras) */ .acervia-nav.is-scrolled { top: 12px; width: min(calc(100% - 32px), calc(var(--container) + 48px)); padding: 10px 20px; border-radius: 14px; background: rgba(255, 254, 247, .55); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 0; box-shadow: 0 10px 36px rgba(16, 23, 49, .10); } .acervia-nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 2.5vw, 32px); width: 100%; max-width: var(--container); margin: 0 auto; } .acervia-nav__logo { flex-shrink: 0; min-height: var(--touch-target); display: inline-flex; align-items: center; justify-self: start; } .acervia-nav .acervia-logo-word { fill: var(--nv-fg); } .acervia-nav .acervia-logo-ia { fill: var(--coral); } .acervia-nav .acervia-logo-desc { fill: var(--nv-fg-soft); } /* Enlaces principales */ .acervia-nav__links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .acervia-nav__links > li { position: relative; list-style: none; } .acervia-nav__links > li > a { display: inline-flex; align-items: center; min-height: var(--touch-target); padding: 0 clamp(10px, 1.1vw, 16px); border-radius: 8px; color: var(--nv-fg-soft); font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: .2px; white-space: nowrap; transition: color .2s ease, background .2s ease; } .acervia-nav__links > li > a:hover, .acervia-nav__links > li:focus-within > a, .acervia-nav__links > li.is-open > a { color: var(--nv-fg); background: var(--nv-hover); } /* Chevron limpio dibujado con bordes */ .acervia-nav__chev { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; margin: -3px 0 0 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; } .acervia-nav__links > li:hover > a .acervia-nav__chev, .acervia-nav__links > li:focus-within > a .acervia-nav__chev, .acervia-nav__links > li.is-open > a .acervia-nav__chev { transform: rotate(225deg) translate(-1px, -1px); } /* Desplegable: sin hueco con el disparador (puente invisible), abre con hover y foco */ .acervia-nav__submenu { display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); box-sizing: border-box; min-width: 290px; margin: 0; padding: 8px; list-style: none; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 48px rgba(16, 23, 49, .16); z-index: 10; } .acervia-nav__submenu--resource { min-width: 250px; } .acervia-nav__submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .acervia-nav__links > li:hover > .acervia-nav__submenu, .acervia-nav__links > li:focus-within > .acervia-nav__submenu, .acervia-nav__links > li.is-open > .acervia-nav__submenu { display: block; animation: acv-sub-in .18s ease both; } .acervia-nav__links > li.is-dismissed > .acervia-nav__submenu { display: none; } @keyframes acv-sub-in { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translate(-50%, 0); } } .acervia-nav__submenu > li { list-style: none; margin: 0; padding: 0; } .acervia-nav__submenu > li > a { display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: 10px; color: var(--ink); font-family: var(--font); font-size: 14px; font-weight: 500; line-height: 1.25; white-space: nowrap; transition: background .15s ease, border-color .15s ease; } .acervia-nav__dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--sv, var(--ink-45)); transition: transform .15s ease; } .acervia-nav__submenu > li > a:hover, .acervia-nav__submenu > li > a:focus-visible { background: var(--sv-t, var(--sand)); border-color: var(--sv, var(--line)); color: var(--ink); } .acervia-nav__submenu > li > a:hover .acervia-nav__dot, .acervia-nav__submenu > li > a:focus-visible .acervia-nav__dot { transform: scale(1.25); } .acervia-nav__submenu > li > a:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; } /* Acciones */ .acervia-nav__actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; justify-self: end; } .acervia-nav__cta { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-target); padding: 10px 22px; background: var(--coral-600); color: var(--cream); border-radius: var(--radius-btn); font-family: var(--font); font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; flex-shrink: 0; transition: transform .25s ease, box-shadow .25s ease; } .acervia-nav__cta:hover, .acervia-nav__cta:focus-visible { background: var(--coral-600); color: var(--cream); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(209, 58, 58, .28); } .acervia-nav__wa { display: none; align-items: center; justify-content: center; min-height: var(--touch-target); box-sizing: border-box; padding: 10px 18px; border: 1.5px solid var(--nv-fg); border-radius: var(--radius-btn); color: var(--nv-fg); font-family: var(--font); font-size: 14px; font-weight: 500; white-space: nowrap; flex-shrink: 0; transition: background .2s ease; } .acervia-nav__wa:hover { background: var(--nv-hover); color: var(--nv-fg); } @media (min-width: 1200px) { .acervia-nav__wa { display: inline-flex; } } /* Hamburguesa */ .acervia-nav__hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: var(--touch-target); height: var(--touch-target); background: none; border: 0; cursor: pointer; padding: 4px; flex-shrink: 0; } .acervia-nav__hamburger span { display: block; width: 22px; height: 2px; background: var(--nv-fg); border-radius: 2px; transition: transform .25s, opacity .25s; } .acervia-nav__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .acervia-nav__hamburger.is-open span:nth-child(2) { opacity: 0; } .acervia-nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* === Home con hero oscuro de video === Arriba: transparente con texto crema. Con scroll: vidrio oscuro translucido, sin borde. */ .body-wrapper:has(.acv-hero-video) .acervia-nav { --nv-fg: var(--cream); --nv-fg-soft: rgba(255, 254, 247, .86); --nv-hover: rgba(255, 254, 247, .12); } .body-wrapper:has(.acv-hero-video) .acervia-nav:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid transparent; box-shadow: none; } .body-wrapper:has(.acv-hero-video) .acervia-nav.is-scrolled { background: rgba(16, 23, 49, .38); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 0; box-shadow: 0 10px 36px rgba(16, 23, 49, .28); } .body-wrapper:has(.acv-hero-video) .acervia-nav .acervia-logo-desc { fill: rgba(255, 254, 247, .72); } /* === Drawer movil (acordeon) === */ .acervia-nav__drawer { display: none; position: fixed; inset: 0; background: var(--cream); z-index: 9998; flex-direction: column; padding: 80px 24px 40px; overflow-y: auto; box-sizing: border-box; } .acervia-nav__drawer.is-open { display: flex; } .acervia-nav__drawer ul { list-style: none; margin: 0; padding: 0; } .acervia-nav__drawer-list { display: flex; flex-direction: column; gap: 0; } .acervia-nav__drawer-list > li { border-bottom: 1px solid var(--line); } .acervia-nav__drawer-list > li > a, .acervia-nav__drawer-toggle { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: 100%; min-height: 52px; padding: 12px 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font); font-size: clamp(18px, 5vw, 20px); font-weight: 600; color: var(--ink); } .acervia-nav__drawer .acervia-nav__chev { width: 8px; height: 8px; margin: -4px 4px 0 0; } .acervia-nav__drawer-toggle[aria-expanded="true"] .acervia-nav__chev { transform: rotate(225deg) translate(-1px, -1px); } .acervia-nav__drawer-sub { display: none; padding: 0 0 10px; } .acervia-nav__drawer-group.is-open > .acervia-nav__drawer-sub { display: block; } .acervia-nav__drawer-sub li { border: 0; } .acervia-nav__drawer-sub li a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 4px 10px 8px; font-family: var(--font); font-size: 16px; font-weight: 400; color: var(--ink-78); border-radius: 8px; } .acervia-nav__drawer-sub li a:hover { color: var(--ink); background: var(--sand); } .acervia-nav__drawer-close { position: absolute; top: 16px; right: 16px; width: var(--touch-target); height: var(--touch-target); background: none; border: 0; color: var(--ink); font-size: 20px; cursor: pointer; line-height: 1; } .acervia-nav__drawer-list > li:has(.acervia-nav__drawer-cta), .acervia-nav__drawer-list > li:has(.acervia-nav__drawer-wa) { border-bottom: 0; } .acervia-nav__drawer .acervia-nav__drawer-cta, .acervia-nav__drawer .acervia-nav__drawer-wa { justify-content: center; margin-top: 20px; padding: 14px 22px; min-height: 48px; font-size: 16px; font-weight: 500; border-radius: var(--radius-btn); text-align: center; } .acervia-nav__drawer .acervia-nav__drawer-cta { background: var(--coral-600); color: var(--cream); } .acervia-nav__drawer .acervia-nav__drawer-wa { margin-top: 0; border: 1.5px solid var(--ink); color: var(--ink); } /* Drawer sobre hero oscuro: fondo ink y texto crema */ .body-wrapper:has(.acv-hero-video) .acervia-nav__drawer { background: var(--ink); } .body-wrapper:has(.acv-hero-video) .acervia-nav__drawer-list > li { border-bottom-color: rgba(255, 254, 247, .14); } .body-wrapper:has(.acv-hero-video) .acervia-nav__drawer-list > li > a, .body-wrapper:has(.acv-hero-video) .acervia-nav__drawer-toggle { color: var(--cream); } .body-wrapper:has(.acv-hero-video) .acervia-nav__drawer .acervia-nav__drawer-cta { color: var(--cream); } .body-wrapper:has(.acv-hero-video) .acervia-nav__drawer-sub li a { color: rgba(255, 254, 247, .78); } .body-wrapper:has(.acv-hero-video) .acervia-nav__drawer-sub li a:hover { color: var(--cream); background: rgba(255, 254, 247, .08); } .body-wrapper:has(.acv-hero-video) .acervia-nav__drawer-close { color: var(--cream); } .body-wrapper:has(.acv-hero-video) .acervia-nav__drawer .acervia-nav__drawer-wa { border-color: var(--cream); color: var(--cream); } .body-wrapper:has(.acv-hero-video) .acervia-nav__hamburger.is-open span { background: var(--cream); } @media (max-width: 960px) { .acervia-nav { padding: 12px var(--gutter); } .acervia-nav.is-scrolled { width: calc(100% - 24px); } .acervia-nav__inner { display: flex; justify-content: space-between; } .acervia-nav__links, .acervia-nav__cta, .acervia-nav__wa { display: none; } .acervia-nav__hamburger { display: flex; } } @media (prefers-reduced-motion: reduce) { .acervia-nav, .acervia-nav * { transition: none !important; animation: none !important; } } /* === Vidrio adaptativo: claro sobre fondos claros, oscuro sobre fondos oscuros (clase nav-on-dark la pone module.js) === */ .body-wrapper:has(.acv-hero-video) .acervia-nav.is-scrolled:not(.nav-on-dark) { --nv-fg: var(--ink); --nv-fg-soft: var(--ink-78); --nv-hover: rgba(16, 23, 49, .06); background: rgba(255, 254, 247, .6); box-shadow: 0 10px 36px rgba(16, 23, 49, .12); } .body-wrapper:has(.acv-hero-video) .acervia-nav.is-scrolled:not(.nav-on-dark) .acervia-logo-desc { fill: var(--ink-78); } .acervia-nav.is-scrolled.nav-on-dark { --nv-fg: var(--cream); --nv-fg-soft: rgba(255, 254, 247, .86); --nv-hover: rgba(255, 254, 247, .12); background: rgba(16, 23, 49, .42); box-shadow: 0 10px 36px rgba(16, 23, 49, .28); } .acervia-nav.is-scrolled.nav-on-dark .acervia-logo-desc { fill: rgba(255, 254, 247, .72); } /* === acervia-nicho-casos.module === */ .hs-nc__intro{max-width:70ch;line-height:1.6;color:var(--ink-78);margin:-16px 0 28px} .hs-nc__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px} .hs-nc__card{flex:1 1 100%;min-width:0;background:var(--cream);border:1px solid var(--line);border-top:4px solid var(--acc);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px)} .hs-nc__num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--tint);border:2px solid var(--acc);font-weight:600;color:var(--ink);margin-bottom:12px} .hs-nc__card h3{margin:0 0 8px;font-size:19px;color:var(--ink);overflow-wrap:break-word} .hs-nc__card p{margin:0;line-height:1.6;color:var(--ink-78)} @media(min-width:768px){.hs-nc__card{flex:0 1 calc(50% - 8px)}} @media(min-width:1024px){.hs-nc__card{flex:0 1 calc((100% - (var(--cols,4) - 1) * 16px) / var(--cols,4))}} .acc-none{--acc:var(--coral);--tint:var(--sand);--bg:var(--coral-600);--on:var(--cream)} .acc-diagnostico{--acc:var(--diag-strong);--tint:var(--diag);--bg:var(--diag);--on:var(--ink)} .acc-brain{--acc:var(--brain-strong);--tint:var(--brain);--bg:var(--brain);--on:var(--ink)} .acc-agente{--acc:var(--agente-strong);--tint:var(--agente);--bg:var(--agente);--on:var(--ink)} .acc-backoffice{--acc:var(--backoff-strong);--tint:var(--backoff);--bg:var(--backoff);--on:var(--ink)} .acc-retainer{--acc:var(--retainer-strong);--tint:var(--retainer);--bg:var(--retainer);--on:var(--ink)} .acc-integral{--acc:var(--coral);--tint:rgba(255,87,87,.12);--bg:var(--coral-600);--on:var(--cream)} /* === acervia-nicho-paquete.module === */ .hs-np{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:stretch} .hs-np__main,.hs-np__side{border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,4vw,32px);min-width:0} .hs-np__main{background:var(--sand)} .hs-np__side{background:var(--tint);display:flex;flex-direction:column} .hs-np__main h3{margin:0 0 8px;font-size:22px;color:var(--ink)} .hs-np__main p{line-height:1.6;color:var(--ink-78);margin:0 0 16px} .hs-np__list{list-style:none;margin:0;padding:0;display:grid;gap:10px} .hs-np__list li{position:relative;padding-left:28px;line-height:1.5;color:var(--ink)} .hs-np__list li:before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:var(--acc)} .hs-np__k{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-78);margin:0 0 12px} .hs-np__chips{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px} .hs-np__chips li{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--radius-pill);background:var(--cream);border:1px solid var(--acc);font-size:13px;font-weight:600;line-height:1.25;color:var(--ink)} .hs-np__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;align-self:flex-start;margin-top:auto;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--bg);color:var(--on);font-weight:500;font-size:16px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease} .hs-np__side .hs-np__btn{background:var(--ink);color:var(--cream)} .hs-np__btn::after{content:"\2192";display:inline-block;transition:transform .25s ease} .hs-np__btn:hover,.hs-np__btn:focus-visible{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,23,49,.14);color:var(--cream);text-decoration:none} .hs-np__btn:hover::after,.hs-np__btn:focus-visible::after{transform:translateX(5px)} .hs-np__btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px} @media(prefers-reduced-motion:reduce){.hs-np__btn,.hs-np__btn::after{transition:none}.hs-np__btn:hover,.hs-np__btn:hover::after{transform:none}} @media(min-width:1024px){.hs-np{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}} .acc-none{--acc:var(--coral);--tint:var(--sand);--bg:var(--coral-600);--on:var(--cream)} .acc-diagnostico{--acc:var(--diag-strong);--tint:var(--diag);--bg:var(--diag);--on:var(--ink)} .acc-brain{--acc:var(--brain-strong);--tint:var(--brain);--bg:var(--brain);--on:var(--ink)} .acc-agente{--acc:var(--agente-strong);--tint:var(--agente);--bg:var(--agente);--on:var(--ink)} .acc-backoffice{--acc:var(--backoff-strong);--tint:var(--backoff);--bg:var(--backoff);--on:var(--ink)} .acc-retainer{--acc:var(--retainer-strong);--tint:var(--retainer);--bg:var(--retainer);--on:var(--ink)} .acc-integral{--acc:var(--coral);--tint:rgba(255,87,87,.12);--bg:var(--coral-600);--on:var(--cream)} /* === acervia-opera-con-ia.module === */ .acv-opera{background:var(--cream);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip;padding:clamp(56px,8vw,104px) var(--gutter,24px)} .acv-opera *,.acv-opera *::before,.acv-opera *::after{box-sizing:border-box} .acv-opera__inner{max-width:var(--container,1280px);margin:0 auto} .acv-opera__head{max-width:760px;margin:0 0 clamp(20px,3vw,28px)} .acv-opera__label{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-78);margin:0 0 14px} .acv-opera__label::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--coral)} .acv-opera__title{font-family:var(--font-head);font-weight:400;letter-spacing:-.03em;line-height:1.12;font-size:clamp(28px,4vw,40px);color:var(--ink);margin:0 0 14px;overflow-wrap:break-word} .acv-opera__intro{font-size:clamp(16px,1.8vw,18px);line-height:1.6;margin:0} .acv-opera__legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding:14px clamp(16px,2.5vw,24px);margin:0 0 clamp(20px,3vw,28px);background:var(--sand);border:1px solid var(--line);border-radius:16px} .acv-opera__flow,.acv-opera__lvl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14px;color:var(--ink)} .acv-opera__flow li{display:inline-flex;align-items:center;gap:8px;font-weight:500} .acv-opera__arrow{color:var(--ink-45);font-weight:400} .acv-opera__lvl li{display:inline-flex;align-items:center;gap:8px} .acv-opera__lvl b{display:inline-flex;align-items:center;justify-content:center;min-width:34px;padding:2px 10px;border-radius:999px;font-weight:500;color:var(--ink);background:var(--backoff)} .acv-opera__ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:10px;color:var(--ink)} .acv-opera__ic--lee{background:var(--brain)} .acv-opera__ic--prep{background:var(--diag)} .acv-opera__ic--apr{background:var(--agente)} .acv-opera__grid{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr} .acv-opera__card{display:flex;flex-direction:column;background:var(--sand);border:1px solid var(--line);border-radius:20px;padding:clamp(18px,2.5vw,26px);min-width:0;height:100%} .acv-opera__cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px} .acv-opera__cardhead h3{font-family:var(--font-head);font-weight:400;letter-spacing:-.03em;font-size:22px;line-height:1.2;color:var(--ink);margin:0;overflow-wrap:break-word} .acv-opera__badge{flex:none;font-size:12px;font-weight:500;color:var(--ink);background:var(--backoff);border-radius:999px;padding:4px 12px} .acv-opera__steps{list-style:none;margin:0;padding:0;display:grid;gap:12px} .acv-opera__steps li{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.4;color:var(--ink)} .acv-opera__t{position:relative;min-width:0;overflow-wrap:break-word} .acv-opera__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (min-width:700px){ .acv-opera__grid{grid-template-columns:repeat(4,minmax(0,1fr))} .acv-opera__card{grid-column:span 2} .acv-opera__card:nth-child(5){grid-column:2 / span 2} } @media (min-width:1024px){ .acv-opera__grid{grid-template-columns:repeat(6,minmax(0,1fr))} .acv-opera__card:nth-child(4){grid-column:2 / span 2} .acv-opera__card:nth-child(5){grid-column:4 / span 2} } /* === acervia-por-que.module === */ /* Acento por servicio (sistema nuevo): --acc tono fuerte, --acc-tint pastel, botón pastel con texto ink. Todo sale de css/tokens.css */ .acv-acc--none{--acc:var(--coral);--acc-tint:var(--sand);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-acc--diagnostico{--acc:var(--diag-strong);--acc-tint:var(--diag);--btn-bg:var(--diag);--btn-ink:var(--ink)} .acv-acc--brain{--acc:var(--brain-strong);--acc-tint:var(--brain);--btn-bg:var(--brain);--btn-ink:var(--ink)} .acv-acc--agente{--acc:var(--agente-strong);--acc-tint:var(--agente);--btn-bg:var(--agente);--btn-ink:var(--ink)} .acv-acc--backoffice{--acc:var(--backoff-strong);--acc-tint:var(--backoff);--btn-bg:var(--backoff);--btn-ink:var(--ink)} .acv-acc--retainer{--acc:var(--retainer-strong);--acc-tint:var(--retainer);--btn-bg:var(--retainer);--btn-ink:var(--ink)} .acv-acc--integral{--acc:var(--coral);--acc-tint:rgba(255,87,87,.12);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-sec{padding:clamp(48px,8vw,96px) var(--gutter);background:var(--cream);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip} .acv-sec *,.acv-sec *::before,.acv-sec *::after{box-sizing:border-box} .acv-sec--gray{background:var(--sand)} .acv-inner{max-width:var(--container);margin:0 auto} .acv-label{display:block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-78);margin:0 0 12px} .acv-label::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--acc);margin-right:8px} .acv-title{font-family:var(--font-head);font-size:clamp(28px,3vw + 14px,40px);font-weight:400;line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px;overflow-wrap: break-word} .acv-lead{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--ink-78);margin:0 0 clamp(24px,4vw,40px);max-width:760px} .acv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--btn-bg);color:var(--btn-ink);font-family:var(--font);font-weight:500;font-size:16px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;text-align:center;max-width:100%} .acv-btn::after{content:"\2192";display:inline-block;transition:transform .25s ease} .acv-btn:hover,.acv-btn:focus-visible{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,23,49,.14);text-decoration:none;color:var(--btn-ink)} .acv-btn:hover::after,.acv-btn:focus-visible::after{transform:translateX(5px)} .acv-btn:focus-visible,.acv-sec a:focus-visible,.acv-sec summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .acv-card{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px)} .acv-sec--gray .acv-card{background:var(--cream)} .acv-card h3{font-family:var(--font-head);font-size:clamp(18px,2.2vw,21px);font-weight:400;letter-spacing:-.03em;color:var(--ink);margin:0 0 8px} .acv-card p{margin:0;line-height:1.55} .acv-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:768px){.acv-grid--2,.acv-grid--3{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.acv-grid--3{grid-template-columns:repeat(3,1fr)}} @media(prefers-reduced-motion:reduce){.acv-btn,.acv-btn::after{transition:none}.acv-btn:hover,.acv-btn:focus-visible,.acv-btn:hover::after,.acv-btn:focus-visible::after{transform:none}} .acv-porque__card{border-top:4px solid var(--acc)} .acv-porque__card{transition:translate .25s ease,box-shadow .25s ease} .acv-porque__card:hover{translate:0 -3px;box-shadow:0 14px 32px rgba(16, 23, 49,.1)} .acv-porque__ico{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--acc-tint);margin-bottom:12px;transition:transform .25s ease} .acv-porque__ico svg{display:block;stroke:var(--acc)} .acv-porque__card:hover .acv-porque__ico{transform:rotate(-6deg) scale(1.08)} .acv-porque__card h3,.acv-porque__card p{overflow-wrap: break-word} @media(prefers-reduced-motion:reduce){.acv-porque__card,.acv-porque__ico{transition:none}.acv-porque__card:hover{translate:none}.acv-porque__card:hover .acv-porque__ico{transform:none}} .acv-porque{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:0;padding:0;list-style:none} .acv-porque__card{flex:1 1 100%;min-width:0} @media(min-width:768px){.acv-porque__card{flex:0 1 calc(50% - 8px)}} @media(min-width:1024px){.acv-porque__card{flex:0 1 calc((100% - (var(--cols,3) - 1) * 16px) / var(--cols,3))}} /* === acervia-precio-servicio.module === */ /* Acento por servicio (sistema nuevo): --acc tono fuerte, --acc-tint pastel, botón pastel con texto ink. Todo sale de css/tokens.css */ .acv-acc--none{--acc:var(--coral);--acc-tint:var(--sand);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-acc--diagnostico{--acc:var(--diag-strong);--acc-tint:var(--diag);--btn-bg:var(--diag);--btn-ink:var(--ink)} .acv-acc--brain{--acc:var(--brain-strong);--acc-tint:var(--brain);--btn-bg:var(--brain);--btn-ink:var(--ink)} .acv-acc--agente{--acc:var(--agente-strong);--acc-tint:var(--agente);--btn-bg:var(--agente);--btn-ink:var(--ink)} .acv-acc--backoffice{--acc:var(--backoff-strong);--acc-tint:var(--backoff);--btn-bg:var(--backoff);--btn-ink:var(--ink)} .acv-acc--retainer{--acc:var(--retainer-strong);--acc-tint:var(--retainer);--btn-bg:var(--retainer);--btn-ink:var(--ink)} .acv-acc--integral{--acc:var(--coral);--acc-tint:rgba(255,87,87,.12);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-sec{padding:clamp(48px,8vw,96px) var(--gutter);background:var(--cream);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip} .acv-sec *,.acv-sec *::before,.acv-sec *::after{box-sizing:border-box} .acv-sec--gray{background:var(--sand)} .acv-inner{max-width:var(--container);margin:0 auto} .acv-label{display:block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-78);margin:0 0 12px} .acv-label::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--acc);margin-right:8px} .acv-title{font-family:var(--font-head);font-size:clamp(28px,3vw + 14px,40px);font-weight:400;line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px;overflow-wrap: break-word} .acv-lead{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--ink-78);margin:0 0 clamp(24px,4vw,40px);max-width:760px} .acv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--btn-bg);color:var(--btn-ink);font-family:var(--font);font-weight:500;font-size:16px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;text-align:center;max-width:100%} .acv-btn::after{content:"\2192";display:inline-block;transition:transform .25s ease} .acv-btn:hover,.acv-btn:focus-visible{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,23,49,.14);text-decoration:none;color:var(--btn-ink)} .acv-btn:hover::after,.acv-btn:focus-visible::after{transform:translateX(5px)} .acv-btn:focus-visible,.acv-sec a:focus-visible,.acv-sec summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .acv-card{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px)} .acv-sec--gray .acv-card{background:var(--cream)} .acv-card h3{font-family:var(--font-head);font-size:clamp(18px,2.2vw,21px);font-weight:400;letter-spacing:-.03em;color:var(--ink);margin:0 0 8px} .acv-card p{margin:0;line-height:1.55} .acv-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:768px){.acv-grid--2,.acv-grid--3{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.acv-grid--3{grid-template-columns:repeat(3,1fr)}} @media(prefers-reduced-motion:reduce){.acv-btn,.acv-btn::after{transition:none}.acv-btn:hover,.acv-btn:focus-visible,.acv-btn:hover::after,.acv-btn:focus-visible::after{transform:none}} .acv-precio{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:stretch} .acv-precio__main,.acv-precio__terms{border-radius:16px;padding:clamp(22px,3vw,36px);min-width:0} .acv-precio__main{background:var(--cream);border:2px solid var(--acc);box-shadow:0 14px 36px rgba(16,23,49,.08)} .acv-precio__terms{background:var(--cream);border:1px solid var(--line);box-shadow:0 10px 28px rgba(16,23,49,.06);display:flex;flex-direction:column} .acv-precio__amount{margin:0 0 16px;font-family:var(--font-head);font-size:clamp(34px,3vw + 1.2rem,56px);font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1.05;overflow-wrap:break-word} .acv-precio__amount small{font-family:var(--font);font-size:clamp(15px,1vw + 11px,18px);font-weight:600;letter-spacing:0;color:var(--ink-78)} .acv-precio__list{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:grid;gap:12px} .acv-precio__list li{display:flex;align-items:flex-start;gap:12px;line-height:1.55;color:var(--ink)} .acv-precio__ck{display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--acc-tint);border:1.5px solid var(--acc)} .acv-precio__ck svg{display:block;width:12px;height:12px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .acv-precio__terms h3{margin:0 0 6px;font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--ink)} .acv-precio__terms p{margin:0 0 20px;line-height:1.6;color:var(--ink)} .acv-precio__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto} @media(min-width:1024px){.acv-precio{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}} /* === acervia-proceso.module === */ /* Acento por servicio (sistema nuevo): --acc tono fuerte, --acc-tint pastel, botón pastel con texto ink. Todo sale de css/tokens.css */ .acv-acc--none{--acc:var(--coral);--acc-tint:var(--sand);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-acc--diagnostico{--acc:var(--diag-strong);--acc-tint:var(--diag);--btn-bg:var(--diag);--btn-ink:var(--ink)} .acv-acc--brain{--acc:var(--brain-strong);--acc-tint:var(--brain);--btn-bg:var(--brain);--btn-ink:var(--ink)} .acv-acc--agente{--acc:var(--agente-strong);--acc-tint:var(--agente);--btn-bg:var(--agente);--btn-ink:var(--ink)} .acv-acc--backoffice{--acc:var(--backoff-strong);--acc-tint:var(--backoff);--btn-bg:var(--backoff);--btn-ink:var(--ink)} .acv-acc--retainer{--acc:var(--retainer-strong);--acc-tint:var(--retainer);--btn-bg:var(--retainer);--btn-ink:var(--ink)} .acv-acc--integral{--acc:var(--coral);--acc-tint:rgba(255,87,87,.12);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-sec{padding:clamp(48px,8vw,96px) var(--gutter);background:var(--cream);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip} .acv-sec *,.acv-sec *::before,.acv-sec *::after{box-sizing:border-box} .acv-sec--gray{background:var(--sand)} .acv-inner{max-width:var(--container);margin:0 auto} .acv-label{display:block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-78);margin:0 0 12px} .acv-label::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--acc);margin-right:8px} .acv-title{font-family:var(--font-head);font-size:clamp(28px,3vw + 14px,40px);font-weight:400;line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px;overflow-wrap: break-word} .acv-lead{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--ink-78);margin:0 0 clamp(24px,4vw,40px);max-width:760px} .acv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--btn-bg);color:var(--btn-ink);font-family:var(--font);font-weight:500;font-size:16px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;text-align:center;max-width:100%} .acv-btn::after{content:"\2192";display:inline-block;transition:transform .25s ease} .acv-btn:hover,.acv-btn:focus-visible{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,23,49,.14);text-decoration:none;color:var(--btn-ink)} .acv-btn:hover::after,.acv-btn:focus-visible::after{transform:translateX(5px)} .acv-btn:focus-visible,.acv-sec a:focus-visible,.acv-sec summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .acv-card{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px)} .acv-sec--gray .acv-card{background:var(--cream)} .acv-card h3{font-family:var(--font-head);font-size:clamp(18px,2.2vw,21px);font-weight:400;letter-spacing:-.03em;color:var(--ink);margin:0 0 8px} .acv-card p{margin:0;line-height:1.55} .acv-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:768px){.acv-grid--2,.acv-grid--3{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.acv-grid--3{grid-template-columns:repeat(3,1fr)}} @media(prefers-reduced-motion:reduce){.acv-btn,.acv-btn::after{transition:none}.acv-btn:hover,.acv-btn:focus-visible,.acv-btn:hover::after,.acv-btn:focus-visible::after{transform:none}} .acv-proc{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:16px} .acv-proc__step{flex:1 1 100%;display:flex;gap:16px;align-items:flex-start;background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(18px,3vw,26px);min-width:0} .acv-proc__num{flex:0 0 40px;width:40px;min-width:40px;height:40px;border-radius:50%;background:var(--btn-bg);color:var(--btn-ink);display:flex;align-items:center;justify-content:center;font-weight:800} .acv-proc__when{display:block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink-78);margin-bottom:4px} .acv-proc__step h3{margin:0 0 6px;font-size:clamp(17px,2.2vw,20px);color:var(--ink)} .acv-proc__step p{margin:0;line-height:1.55} @media(min-width:768px){.acv-proc__step{flex:0 1 calc(50% - 8px)}} @media(min-width:1024px){.acv-proc__step{flex:0 1 calc((100% - (var(--cols,4) - 1) * 16px) / var(--cols,4));flex-direction:column}} .acv-proc__step{position:relative} .acv-proc__step>div{min-width:0;overflow-wrap: break-word} .acv-proc__ico{position:absolute;top:16px;right:16px;stroke:var(--acc);opacity:.85} .acv-proc__num{position:relative;z-index:1} .acv-proc__step::after{content:"";position:absolute;pointer-events:none;background:var(--acc);opacity:.5;transform-origin:top;transition:transform .7s ease .3s;left:calc(clamp(18px,3vw,26px) + 19px);top:calc(clamp(18px,3vw,26px) + 40px);width:2px;height:calc(100% - clamp(18px,3vw,26px) - 40px + 16px)} .js .acv-proc__step::after{transform:scaleY(0)} .js .acv-proc__step.is-visible::after{transform:scaleY(1)} .acv-proc__step:last-child::after{display:none} @media(min-width:768px){.acv-proc__step::after{display:none}} @media(min-width:1024px){.acv-proc__step::after{display:block;left:calc(clamp(18px,3vw,26px) + 46px);top:calc(clamp(18px,3vw,26px) + 19px);height:2px;width:calc(100% - 46px - clamp(18px,3vw,26px) + 16px);transform-origin:left} .js .acv-proc__step::after{transform:scaleX(0)} .js .acv-proc__step.is-visible::after{transform:scaleX(1)} .acv-proc__step:last-child::after{display:none}} @media(prefers-reduced-motion:reduce){.acv-proc__step::after{transition:none}} /* === acervia-seccion-entregables.module === */ /* Acento por servicio (sistema nuevo): --acc tono fuerte, --acc-tint pastel, botón pastel con texto ink. Todo sale de css/tokens.css */ .acv-acc--none{--acc:var(--coral);--acc-tint:var(--sand);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-acc--diagnostico{--acc:var(--diag-strong);--acc-tint:var(--diag);--btn-bg:var(--diag);--btn-ink:var(--ink)} .acv-acc--brain{--acc:var(--brain-strong);--acc-tint:var(--brain);--btn-bg:var(--brain);--btn-ink:var(--ink)} .acv-acc--agente{--acc:var(--agente-strong);--acc-tint:var(--agente);--btn-bg:var(--agente);--btn-ink:var(--ink)} .acv-acc--backoffice{--acc:var(--backoff-strong);--acc-tint:var(--backoff);--btn-bg:var(--backoff);--btn-ink:var(--ink)} .acv-acc--retainer{--acc:var(--retainer-strong);--acc-tint:var(--retainer);--btn-bg:var(--retainer);--btn-ink:var(--ink)} .acv-acc--integral{--acc:var(--coral);--acc-tint:rgba(255,87,87,.12);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-sec{padding:clamp(48px,8vw,96px) var(--gutter);background:var(--cream);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip} .acv-sec *,.acv-sec *::before,.acv-sec *::after{box-sizing:border-box} .acv-sec--gray{background:var(--sand)} .acv-inner{max-width:var(--container);margin:0 auto} .acv-label{display:block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-78);margin:0 0 12px} .acv-label::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--acc);margin-right:8px} .acv-title{font-family:var(--font-head);font-size:clamp(28px,3vw + 14px,40px);font-weight:400;line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px;overflow-wrap: break-word} .acv-lead{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--ink-78);margin:0 0 clamp(24px,4vw,40px);max-width:760px} .acv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--btn-bg);color:var(--btn-ink);font-family:var(--font);font-weight:500;font-size:16px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;text-align:center;max-width:100%} .acv-btn::after{content:"\2192";display:inline-block;transition:transform .25s ease} .acv-btn:hover,.acv-btn:focus-visible{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,23,49,.14);text-decoration:none;color:var(--btn-ink)} .acv-btn:hover::after,.acv-btn:focus-visible::after{transform:translateX(5px)} .acv-btn:focus-visible,.acv-sec a:focus-visible,.acv-sec summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .acv-card{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px)} .acv-sec--gray .acv-card{background:var(--cream)} .acv-card h3{font-family:var(--font-head);font-size:clamp(18px,2.2vw,21px);font-weight:400;letter-spacing:-.03em;color:var(--ink);margin:0 0 8px} .acv-card p{margin:0;line-height:1.55} .acv-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:768px){.acv-grid--2,.acv-grid--3{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.acv-grid--3{grid-template-columns:repeat(3,1fr)}} @media(prefers-reduced-motion:reduce){.acv-btn,.acv-btn::after{transition:none}.acv-btn:hover,.acv-btn:focus-visible,.acv-btn:hover::after,.acv-btn:focus-visible::after{transform:none}} .acv-entreg{list-style:none;margin:0;padding:0} .acv-entreg__item{display:flex;gap:16px;align-items:flex-start;min-width:0} .acv-entreg__check{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--acc-tint);border:2px solid var(--acc);position:relative} .acv-entreg__check::after{content:"";position:absolute;left:9px;top:5px;width:6px;height:11px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)} .acv-entreg__check::after{display:none} .acv-entreg__check{display:flex;align-items:center;justify-content:center} .acv-entreg__check svg{display:block;stroke:var(--ink);stroke-dasharray:24;stroke-dashoffset:0} .js .acv-entreg__item[data-reveal] .acv-entreg__check svg{stroke-dashoffset:24;transition:stroke-dashoffset .6s ease .35s} .js .acv-entreg__item.is-visible .acv-entreg__check svg{stroke-dashoffset:0} .acv-entreg__item{transition:translate .25s ease,box-shadow .25s ease} .acv-entreg__item:hover{translate:0 -2px;box-shadow:0 10px 24px rgba(16, 23, 49,.08)} .acv-entreg__item h3,.acv-entreg__item p{overflow-wrap: break-word} @media(prefers-reduced-motion:reduce){.acv-entreg__item{transition:none}.acv-entreg__item:hover{translate:none}.js .acv-entreg__item[data-reveal] .acv-entreg__check svg{stroke-dashoffset:0;transition:none}} @media(min-width:768px){.acv-entreg>li:last-child:nth-child(odd){grid-column:1 / -1}} .acv-entreg__item h3{font-size:clamp(17px,1.2vw + 12px,20px)} /* === acervia-seccion-problema.module === */ /* Acento por servicio (sistema nuevo): --acc tono fuerte, --acc-tint pastel, botón pastel con texto ink. Todo sale de css/tokens.css */ .acv-acc--none{--acc:var(--coral);--acc-tint:var(--sand);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-acc--diagnostico{--acc:var(--diag-strong);--acc-tint:var(--diag);--btn-bg:var(--diag);--btn-ink:var(--ink)} .acv-acc--brain{--acc:var(--brain-strong);--acc-tint:var(--brain);--btn-bg:var(--brain);--btn-ink:var(--ink)} .acv-acc--agente{--acc:var(--agente-strong);--acc-tint:var(--agente);--btn-bg:var(--agente);--btn-ink:var(--ink)} .acv-acc--backoffice{--acc:var(--backoff-strong);--acc-tint:var(--backoff);--btn-bg:var(--backoff);--btn-ink:var(--ink)} .acv-acc--retainer{--acc:var(--retainer-strong);--acc-tint:var(--retainer);--btn-bg:var(--retainer);--btn-ink:var(--ink)} .acv-acc--integral{--acc:var(--coral);--acc-tint:rgba(255,87,87,.12);--btn-bg:var(--coral-600);--btn-ink:var(--cream)} .acv-sec{padding:clamp(48px,8vw,96px) var(--gutter);background:var(--cream);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip} .acv-sec *,.acv-sec *::before,.acv-sec *::after{box-sizing:border-box} .acv-sec--gray{background:var(--sand)} .acv-inner{max-width:var(--container);margin:0 auto} .acv-label{display:block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-78);margin:0 0 12px} .acv-label::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--acc);margin-right:8px} .acv-title{font-family:var(--font-head);font-size:clamp(28px,3vw + 14px,40px);font-weight:400;line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px;overflow-wrap: break-word} .acv-lead{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--ink-78);margin:0 0 clamp(24px,4vw,40px);max-width:760px} .acv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--btn-bg);color:var(--btn-ink);font-family:var(--font);font-weight:500;font-size:16px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;text-align:center;max-width:100%} .acv-btn::after{content:"\2192";display:inline-block;transition:transform .25s ease} .acv-btn:hover,.acv-btn:focus-visible{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,23,49,.14);text-decoration:none;color:var(--btn-ink)} .acv-btn:hover::after,.acv-btn:focus-visible::after{transform:translateX(5px)} .acv-btn:focus-visible,.acv-sec a:focus-visible,.acv-sec summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .acv-card{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px)} .acv-sec--gray .acv-card{background:var(--cream)} .acv-card h3{font-family:var(--font-head);font-size:clamp(18px,2.2vw,21px);font-weight:400;letter-spacing:-.03em;color:var(--ink);margin:0 0 8px} .acv-card p{margin:0;line-height:1.55} .acv-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:768px){.acv-grid--2,.acv-grid--3{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.acv-grid--3{grid-template-columns:repeat(3,1fr)}} @media(prefers-reduced-motion:reduce){.acv-btn,.acv-btn::after{transition:none}.acv-btn:hover,.acv-btn:focus-visible,.acv-btn:hover::after,.acv-btn:focus-visible::after{transform:none}} .acv-prob{display:grid;gap:24px;grid-template-columns:1fr} .acv-prob__desc{margin:0} .acv-prob__box{background:var(--acc-tint);border-radius:var(--radius-lg);padding:clamp(20px,3vw,32px)} .acv-prob__box h3{margin:0 0 12px;font-size:clamp(18px,2.2vw,22px);color:var(--ink)} .acv-prob__box ul{list-style:none;margin:0;padding:0;display:grid;gap:12px} .acv-prob__box li{position:relative;padding-left:28px;line-height:1.55;color:var(--ink)} .acv-prob__box li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:50%;background:var(--acc)} @media(min-width:1024px){.acv-prob{grid-template-columns:1fr 1fr;gap:48px;align-items:center}} /* === acervia-tabs-nicho.module === */ .acv-tabs-nicho{background:var(--sand);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip;padding:clamp(56px,8vw,104px) var(--gutter,24px)} .acv-tabs-nicho *,.acv-tabs-nicho *::before,.acv-tabs-nicho *::after{box-sizing:border-box} .acv-tabs-nicho__inner{max-width:var(--container,1280px);margin:0 auto} .acv-tabs-nicho__head{max-width:720px;margin:0 0 clamp(24px,4vw,40px)} .acv-tabs-nicho__label{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-78);margin:0 0 14px} .acv-tabs-nicho__label::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--coral)} .acv-tabs-nicho__title{font-family:var(--font-head);font-weight:400;letter-spacing:-.03em;line-height:1.12;font-size:clamp(28px,4vw,40px);color:var(--ink);margin:0 0 14px;overflow-wrap: break-word} .acv-tabs-nicho__intro{font-size:clamp(16px,1.8vw,18px);line-height:1.6;color:var(--ink-78);margin:0} .acv-tabs-nicho__listwrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 20px} .acv-tabs-nicho__list{display:none;flex:1 1 auto;gap:8px;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px} .acv-tabs-nicho__list::-webkit-scrollbar{display:none} .acv-tabs-nicho.is-js .acv-tabs-nicho__list{display:flex} .acv-tabs-nicho__tab{position:relative;flex:1 0 auto;text-align:center;min-height:48px;padding:12px 18px 16px;border:1px solid var(--line);border-radius:100px;background:var(--cream);color:var(--ink-78);font:500 15px/1.2 var(--font);cursor:pointer;overflow:hidden;transition:background .2s,color .2s} .acv-tabs-nicho__tab:hover{background:var(--pure-white)} .acv-tabs-nicho__tab[aria-selected="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)} .acv-tabs-nicho__tab:focus-visible,.acv-tabs-nicho__pause:focus-visible,.acv-tabs-nicho__panel:focus-visible,.acv-tabs-nicho a:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .acv-tabs-nicho__bar{position:absolute;left:18px;right:18px;bottom:7px;height:3px;border-radius:3px;background:transparent;overflow:hidden} .acv-tabs-nicho__tab[aria-selected="true"] .acv-tabs-nicho__bar{background:rgba(255,254,247,.25)} .acv-tabs-nicho__bar i{display:block;height:100%;background:var(--coral);transform:scaleX(0);transform-origin:left center} .acv-tabs-nicho__pause{min-height:44px;padding:8px 14px;border:0;background:none;color:var(--ink-78);font:400 14px var(--font);text-decoration:underline;cursor:pointer} .acv-tabs-nicho__panel{display:grid;gap:24px;padding:clamp(20px,3vw,36px);background:var(--cream);border:1px solid var(--line);border-radius:20px;margin:0 0 20px} .acv-tabs-nicho__panel:last-child{margin-bottom:0} .acv-tabs-nicho.is-js .acv-tabs-nicho__panel{margin:0} .acv-tabs-nicho__panel[hidden]{display:none} .acv-tabs-nicho__text{min-width:0;display:flex;flex-direction:column;align-items:flex-start} .acv-tabs-nicho__cases{width:100%} .acv-tabs-nicho__cta{margin-top:auto} .acv-tabs-nicho__tags{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px} .acv-tabs-nicho__tag{display:inline-flex;align-items:center;min-height:30px;padding:3px 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--ink);background:var(--sand);border:1px solid var(--line)} .acv-tabs-nicho__tag--prod{background:var(--agente);border-color:transparent} .acv-tabs-nicho__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .acv-tabs-nicho__panel h3{font-family:var(--font-head);font-weight:400;letter-spacing:-.03em;line-height:1.15;font-size:clamp(22px,2.8vw,30px);color:var(--ink);margin:0 0 8px;overflow-wrap: break-word} .acv-tabs-nicho__sum{margin:0 0 16px;font-size:17px;line-height:1.5;color:var(--ink-78)} .acv-tabs-nicho__cases{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px} .acv-tabs-nicho__cases li{position:relative;padding-left:26px;line-height:1.5} .acv-tabs-nicho__cases li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--agente-strong)} .acv-tabs-nicho__note{font-size:14px;color:var(--ink-45);margin:0 0 16px} .acv-tabs-nicho__cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 28px;border-radius:var(--radius-btn);background:var(--coral-600);color:var(--cream);font-weight:500;text-decoration:none;max-width:100%;transition:transform .2s} .acv-tabs-nicho__cta span{display:inline-block;transition:transform .2s} .acv-tabs-nicho__cta:hover span{transform:translateX(4px)} .acv-tabs-nicho__vis{align-self:stretch;display:flex;flex-direction:column;background:var(--sand);border:1px solid var(--line);border-radius:16px;overflow:hidden;min-width:0} .acv-tabs-nicho__vbar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--cream);border-bottom:1px solid var(--line);font-size:12px;font-weight:500;color:var(--ink-45)} .acv-tabs-nicho__vbar span{display:inline-flex;gap:5px} .acv-tabs-nicho__vbar i{width:9px;height:9px;border-radius:50%;background:var(--coral)} .acv-tabs-nicho__vbar i:nth-child(2){background:var(--diag)} .acv-tabs-nicho__vbar i:nth-child(3){background:var(--agente-strong)} .acv-tabs-nicho__vis ul{list-style:none;margin:0;padding:16px;display:grid;gap:10px;flex:1;align-content:center} .acv-tabs-nicho__vis li{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;background:var(--pure-white);border:1px solid var(--line);border-radius:10px;font-size:14px} .acv-tabs-nicho__vis li span{display:grid;min-width:0} .acv-tabs-nicho__vis b{font-weight:500;color:var(--ink)} .acv-tabs-nicho__vis small{font-size:12px;color:var(--ink-45)} .acv-tabs-nicho__vis em{font-style:normal;font-size:12px;background:var(--agente);color:var(--ink);border-radius:100px;padding:3px 10px} .acv-tabs-nicho__vis p{margin:0;padding:0 14px 12px;font-size:12px;color:var(--ink-45)} @media (min-width:900px){ .acv-tabs-nicho__panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:stretch} } @media (prefers-reduced-motion:reduce){ .acv-tabs-nicho__tab,.acv-tabs-nicho__cta,.acv-tabs-nicho__cta span{transition:none} } /* === acervia-texto-legal.module === */ .hs-legal{padding:clamp(40px,7vw,80px) var(--gutter)} .hs-legal__inner{max-width:var(--container);margin:0 auto} .hs-legal__title{font-family:var(--font-head);font-size:clamp(28px,2vw + 1.4rem,40px);font-weight:400;line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin:0 0 12px} .hs-legal__updated{color:var(--ink-78);margin:0 0 16px} .hs-legal__notice{background:var(--diag);border-left:4px solid var(--diag-strong);padding:14px 18px;border-radius:var(--radius-sm);color:var(--ink);line-height:1.6;margin:0 0 28px} .hs-legal__layout{display:block} .hs-legal__toc{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px 20px;margin-bottom:28px} .hs-legal__toc-title{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-78);margin:0 0 8px} .hs-legal__toc ol{list-style:none;margin:0;padding:0} .hs-legal__toc a{display:flex;align-items:center;min-height:var(--touch-target);color:var(--ink);text-decoration:none} .hs-legal__toc a:hover{text-decoration:underline} .hs-legal__section{scroll-margin-top:calc(var(--nav-h) + 16px);margin-bottom:32px} .hs-legal__section h2{font-family:var(--font-head);font-weight:400;letter-spacing:-.03em;font-size:clamp(20px,2.6vw,26px);color:var(--ink);margin:0 0 12px} .hs-legal__section p{line-height:1.75;color:var(--ink-78);margin:0 0 14px;overflow-wrap: break-word} .hs-legal__section table{display:block;overflow-x:auto} @media(min-width:1024px){.hs-legal__layout{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start}.hs-legal__toc{position:sticky;top:calc(var(--nav-h) + 16px);margin-bottom:0}} @media print{.hs-legal__toc{display:none}} /* === acervia-usabilidad.module === */ .acv-usab{background:var(--sand);color:var(--ink-78);font-family:var(--font);box-sizing:border-box;max-width:100%;overflow-x:clip;padding:clamp(56px,8vw,104px) var(--gutter,24px)} .acv-usab *,.acv-usab *::before,.acv-usab *::after{box-sizing:border-box} .acv-usab__inner{max-width:var(--container,1280px);margin:0 auto} .acv-usab__head{margin:0 0 clamp(24px,4vw,40px)} .acv-usab__label{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-78);margin:0 0 14px} .acv-usab__label::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--coral)} .acv-usab__title{font-family:var(--font-head);font-weight:400;letter-spacing:-.03em;line-height:1.12;font-size:clamp(28px,4vw,40px);color:var(--ink);margin:0;overflow-wrap:break-word} .acv-usab__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;grid-auto-rows:1fr} .acv-usab__item{min-width:0;display:flex} .acv-usab__tile{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-width:0;padding:clamp(16px,2.4vw,28px);background:var(--cream);border:1px solid var(--line);border-radius:20px;transition:transform .25s ease,box-shadow .25s ease} .acv-usab__tile:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(16,23,49,.10)} .acv-usab__ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;color:var(--ink);margin:0 0 clamp(14px,2vw,22px)} .acv-usab__ico--0{background:var(--agente)} .acv-usab__ico--1{background:var(--brain)} .acv-usab__ico--2{background:var(--diag)} .acv-usab__ico--3{background:var(--backoff)} .acv-usab__ico--4{background:var(--retainer)} .acv-usab__name{font-family:var(--font-head);font-weight:400;letter-spacing:-.03em;font-size:clamp(17px,1.8vw,20px);line-height:1.2;color:var(--ink);margin:0 0 8px;overflow-wrap:break-word} .acv-usab__text{font-size:15px;line-height:1.5;margin:0;color:var(--ink-78)} @media (min-width:900px){ .acv-usab__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} } @media (prefers-reduced-motion:reduce){ .acv-usab__tile{transition:none} .acv-usab__tile:hover{transform:none} } /* === acervia-valores.module === */ .hs-val__grid{display:grid;grid-template-columns:1fr;gap:16px} .hs-val__item{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px} .hs-val__item h3{margin:0 0 8px;font-size:19px;color:var(--ink)} .hs-val__item p{margin:0;line-height:1.6;color:var(--ink-78)} @media(min-width:768px){.hs-val__grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.hs-val__grid{grid-template-columns:repeat(4,1fr)}}