/* Generado por tools/build_whmcs.py desde creativasitperu/assets/css/redesign.css. No editar aqui. */ /* Restablece los valores por defecto del navegador dentro de .cit */ .cit h1, .cit h2, .cit h3, .cit h4, .cit h5, .cit h6 { font-weight: 700; color: inherit; text-transform: none; } .cit h1 { font-size: 2em; margin: 0.67em 0; } .cit h2 { font-size: 1.5em; margin: 0.83em 0; } .cit h3 { font-size: 1.17em; margin: 1em 0; } .cit h4 { font-size: 1em; margin: 1.33em 0; } .cit p { margin: 1em 0; } .cit ul, .cit ol { margin: 1em 0; padding-left: 40px; } .cit blockquote, .cit figure { margin: 1em 40px; } /* :where() deja esta regla con el peso de ".cit a" (0,1,1): basta para ganarle al a:hover de Lagom (0,1,1, que va antes), pero pierde frente al color propio de botones y enlaces del sitio (p. ej. .cit .cit-btn-primary, 0,2,0). Con ".cit a:hover" (0,2,1) el texto de los botones se volvia oscuro. */ .cit a:where(:hover, :focus) { color: inherit; text-decoration: none; } .cit label { margin-bottom: 0; } .cit button { border-radius: 0; } /* Tipografia: Manrope (texto del sitio) y Montserrat (texto vivo de los SVG del logo). Se cargan con + en el de cada pagina, no con @import, para que la descarga no quede encadenada a este archivo. */ .cit { --color-primary: #2563eb; --color-accent: #f97316; --color-secondary: #7c3aed; --color-ink: #1e293b; --color-muted: #64748b; --color-surface: #ffffff; --color-surface-dark: #0f172a; --color-muted-dark: #94a3b8; --brand: var(--color-primary); --brand-dark: var(--color-surface-dark); --ink: var(--color-ink); --ink-soft: var(--color-muted); --paper: var(--color-surface); --surface: var(--color-surface); --soft-blue: rgba(37, 99, 235, 0.08); --accent-soft: rgba(249, 115, 22, 0.12); --secondary-soft: rgba(124, 58, 237, 0.09); --orange: var(--color-accent); --border: rgba(30, 41, 59, 0.2); --success: var(--color-primary); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-badge: 26px; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --shadow: 0 14px 36px rgba(15, 23, 42, 0.08); --container: min(1180px, calc(100% - 40px)); /* Escala H1 (MARCA.md §3) — se sobreescribe en los media queries */ --h1-size: 64px; --h1-line: 72px; --h1-weight: 700; /* Tope del H1 del hero en desktop (2 columnas desde 1025px) */ --h1-hero-size: 56px; /* Escala tipografica unica — 12 / 14 / 16 / 18 / 20 / 26 / 32 / 48 / 64 px. Tomada de la referencia iori (h1 64, h2 48, h3 32, h4 26, h5 20, h6 18; texto 20/18/16/14/12). Ningun tamano fuera de esta escala. */ --fs-xs: 0.75rem; /* 12px — badges, glifos decorativos */ --fs-sm: 0.875rem; /* 14px — etiquetas, pies, metadatos */ --fs-md: 1rem; /* 16px — texto base y descripciones */ --fs-lg: 1.125rem; /* 18px — texto largo, lead movil */ --fs-xl: 1.25rem; /* 20px — lead desktop, titulo de tarjeta compacta */ --fs-h4: 1.625rem; /* 26px — titulo de tarjeta */ --fs-h3: 2rem; /* 32px — subtitulo de seccion */ --fs-h2: 3rem; /* 48px — titulo de seccion */ --fs-h1: 4rem; /* 64px — titular de hero */ /* Interlineados emparejados con la escala */ --lh-tight: 1.15; /* titulares grandes */ --lh-heading: 1.3; /* titulos de tarjeta y seccion */ --lh-body: 1.6; /* parrafos */ /* Tamanos de icono como tokens (Lucide, trazo 2px, viewBox 24) */ --icon-sm: 18px; --icon-md: 24px; --icon-lg: 28px; } /* ============================================================ ICONOS — Lucide v1.47.0 (ISC), incrustados como SVG inline. Heredan el color del texto via currentColor y comparten trazo de 2px, por lo que basta una clase para todos. ============================================================ */ .cit .cit-icon { width: var(--icon-md); height: var(--icon-md); flex: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cit .cit-icon-sm { width: var(--icon-sm); height: var(--icon-sm); } .cit .cit-icon-lg { width: var(--icon-lg); height: var(--icon-lg); } .cit *, .cit *::before, .cit *::after { box-sizing: border-box; } .cit { margin: 0; background: var(--paper); color: var(--ink); font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: var(--fs-md); line-height: 1.65; overflow-x: hidden; } .cit img, .cit svg { display: block; max-width: 100%; } .cit img { height: auto; } .cit a { color: inherit; text-decoration: none; } .cit button, .cit input, .cit textarea, .cit select { font: inherit; } .cit button, .cit a { -webkit-tap-highlight-color: transparent; } .cit button { cursor: pointer; } .cit h1, .cit h2, .cit h3, .cit h4, .cit p { margin-top: 0; } .cit h1, .cit h2, .cit h3, .cit h4 { font-family: "Manrope", "Segoe UI", Arial, sans-serif; line-height: 1.02; letter-spacing: -0.035em; } .cit p:last-child { margin-bottom: 0; } .cit :focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; } .cit .cit-skip-link { position: fixed; top: 12px; left: 12px; z-index: 9999; padding: 10px 16px; border-radius: var(--radius-badge); background: var(--ink); color: #fff; transform: translateY(-160%); } .cit .cit-skip-link:focus { transform: translateY(0); } .cit .cit-container { width: var(--container); margin-inline: auto; } .cit .cit-section { padding: 110px 0; } .cit .cit-section-sm { padding: 76px 0; } .cit .cit-surface-section { margin: 20px; border-radius: var(--radius-lg); background: var(--surface); } /* Fondos ambientales inspirados en la referencia, construidos solo con colores planos de la marca: círculos, aros y una trama de puntos. */ .cit .cit-hero, .cit .cit-page-hero, .cit .cit-ambient-section { position: relative; overflow: hidden; isolation: isolate; background-color: var(--color-surface); } .cit .cit-hero, .cit .cit-page-hero { margin: 20px; border: 1px solid rgba(37, 99, 235, 0.12); border-radius: var(--radius-lg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M40 0H0V40' fill='none' stroke='%232563EB' stroke-opacity='.055' stroke-width='1'/%3E%3C/svg%3E"); background-repeat: repeat; box-shadow: 0 18px 54px rgba(15, 23, 42, 0.04); } .cit .cit-hero::before, .cit .cit-page-hero::before, .cit .cit-ambient-section::before { position: absolute; z-index: 0; top: 58px; right: 5%; width: 168px; height: 168px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='3' cy='3' r='1.5' fill='%232563EB' fill-opacity='.22'/%3E%3C/svg%3E"); background-repeat: repeat; content: ""; opacity: 0.72; pointer-events: none; } .cit .cit-hero::after, .cit .cit-page-hero::after, .cit .cit-ambient-section::after { position: absolute; z-index: 0; top: -310px; right: -190px; width: 560px; height: 560px; border: 88px solid rgba(124, 58, 237, 0.07); border-radius: 50%; background: rgba(37, 99, 235, 0.035); box-shadow: -760px 520px 0 -118px rgba(37, 99, 235, 0.045), -440px 80px 0 -210px rgba(249, 115, 22, 0.055); content: ""; pointer-events: none; } /* En el hero la trama de puntos y el aro van juntos arriba a la derecha. Repetir esa misma composicion en .ambient-section hacia que las dos zonas parecieran la misma pieza. Aqui se separan: la trama ancla a la izquierda y el aro sale por la derecha, de modo que la seccion queda equilibrada por los dos flancos y se distingue del hero. */ .cit .cit-ambient-section::before { top: auto; right: auto; bottom: 72px; left: 3%; opacity: 0.6; } .cit .cit-ambient-section::after { top: 50%; right: -260px; width: 520px; height: 520px; transform: translateY(-50%); /* Los satelites del box-shadow estaban calculados para la diagonal del hero; aqui solo uno, al flanco izquierdo, para acompanar a la trama. */ box-shadow: -620px 0 0 -190px rgba(249, 115, 22, 0.05); } @media (max-width: 820px) { /* En movil la seccion es mucho mas alta y estrecha: el aro gigante invadia el texto. Se reduce y se retira mas hacia fuera. */ .cit .cit-ambient-section::after { width: 320px; height: 320px; right: -200px; border-width: 54px; box-shadow: none; } .cit .cit-ambient-section::before { bottom: 32px; left: -2%; opacity: 0.4; } } .cit .cit-hero > .cit-container, .cit .cit-page-hero > .cit-container, .cit .cit-ambient-section > .cit-container { position: relative; z-index: 1; } .cit .cit-dark-section { position: relative; overflow: hidden; background: var(--color-surface-dark); color: #fff; } .cit .cit-dark-section::after { position: absolute; right: -8%; bottom: -50%; width: 430px; height: 430px; border: 95px solid rgba(37, 99, 235, 0.32); border-radius: 50%; content: ""; pointer-events: none; } .cit .cit-muted { color: var(--ink-soft); } .cit .cit-eyebrow { display: inline-flex; align-self: flex-start; align-items: center; min-height: 30px; margin-bottom: 24px; padding: 5px 15px; border-radius: var(--radius-badge); background: var(--accent-soft); color: var(--ink); font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.18em; line-height: 1; white-space: nowrap; text-transform: uppercase; } .cit .cit-eyebrow.cit-blue { background: var(--soft-blue); color: var(--color-primary); } .cit .cit-eyebrow.cit-orange { background: var(--secondary-soft); color: var(--color-secondary); } .cit .cit-dark-section .cit-eyebrow, .cit .cit-contact-panel .cit-eyebrow, .cit .cit-site-footer .cit-eyebrow { border: 1px solid rgba(255, 255, 255, 0.34); background: rgba(15, 23, 42, 0.52); color: var(--color-surface); } .cit .cit-cta-band .cit-eyebrow { align-self: center; border: 1px solid rgba(255, 255, 255, 0.34); background: rgba(15, 23, 42, 0.52); color: var(--color-surface); } .cit .cit-display-title { max-width: 1000px; margin-bottom: 28px; font-size: var(--h1-size); line-height: var(--h1-line); font-weight: var(--h1-weight); } .cit .cit-section-title { max-width: 820px; margin-bottom: 26px; font-size: clamp(var(--fs-h3), 4vw, var(--fs-h2)); font-weight: 650; } .cit .cit-section-title.cit-small { font-size: clamp(var(--fs-h4), 3.2vw, var(--fs-h3)); } .cit .cit-lead { max-width: 680px; color: var(--ink-soft); font-size: clamp(var(--fs-lg), 1.5vw, var(--fs-xl)); line-height: 1.62; } .cit .cit-dark-section .cit-lead, .cit .cit-footer-copy { color: #aebbd0; } .cit .cit-button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .cit .cit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 13px 24px; border: 1px solid transparent; border-radius: var(--radius-badge); font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-weight: 700; line-height: 1; transition: transform 200ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease; } /* Los botones no se elevan al pasar el puntero: el unico movimiento es la pulsacion (scale 0.96) que aplica Motion desde cit.js, como en el hero de inicio. Antes el translateY se quedaba puesto tras el clic en todas las paginas menos el hero y las bandas CTA, donde .pointer-motion ya lo anulaba. */ .cit .cit-btn-primary { background: var(--brand); color: #fff; } .cit .cit-btn-primary:hover { background: var(--brand-dark); } .cit .cit-btn-dark { background: var(--color-surface-dark); color: #fff; } .cit .cit-btn-light { border-color: var(--border); background: #fff; color: var(--ink); } .cit .cit-btn-accent { background: var(--color-accent); color: #fff; } .cit .cit-btn-icon { width: 19px; height: 19px; } .cit .cit-site-header { position: sticky; top: 0; z-index: 1000; padding: 16px 0; background: rgba(246, 247, 243, 0.88); backdrop-filter: blur(18px); transition: box-shadow 200ms ease, background 200ms ease; } .cit .cit-site-header.cit-scrolled { background: rgba(255, 255, 255, 0.94); box-shadow: 0 10px 35px rgba(12, 23, 41, 0.08); } .cit .cit-nav-shell { display: flex; align-items: center; justify-content: space-between; min-height: 58px; gap: 32px; } .cit .cit-brand-logo { flex: 0 0 auto; } .cit .cit-brand-logo img { width: 218px; height: auto; } .cit .cit-nav-panel { display: flex; align-items: center; gap: 32px; } .cit .cit-nav-list { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; } .cit .cit-nav-link { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: var(--fs-md); font-weight: 600; } .cit .cit-nav-link::after { position: absolute; right: 0; bottom: 5px; left: 0; height: 2px; background: var(--brand); content: ""; transform: scaleX(0); transform-origin: right; transition: transform 200ms ease; } .cit .cit-nav-link:hover::after, .cit .cit-nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } /* Navigation Dropdown Menu */ .cit .cit-has-dropdown { position: relative; } .cit .cit-nav-dropdown-toggle-wrapper { display: inline-flex; align-items: center; gap: 2px; } .cit .cit-dropdown-trigger { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: transparent; border: 0; color: inherit; cursor: pointer; border-radius: var(--radius-sm); transition: transform 200ms ease, background-color 150ms ease; } .cit .cit-dropdown-trigger:hover { background: var(--soft-blue); color: var(--color-primary); } .cit .cit-dropdown-icon { width: 16px; height: 16px; transition: transform 200ms ease; } .cit .cit-has-dropdown:hover .cit-dropdown-icon, .cit .cit-has-dropdown:focus-within .cit-dropdown-icon, .cit .cit-has-dropdown.cit-open-dropdown .cit-dropdown-icon { transform: rotate(180deg); } .cit .cit-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); min-width: 360px; padding: 10px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease; z-index: 1000; } .cit .cit-has-dropdown:hover .cit-dropdown-menu, .cit .cit-has-dropdown:focus-within .cit-dropdown-menu, .cit .cit-has-dropdown.cit-open-dropdown .cit-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .cit .cit-dropdown-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm); transition: background-color 150ms ease, transform 150ms ease; } .cit .cit-dropdown-item:hover, .cit .cit-dropdown-item:focus, .cit .cit-dropdown-item.cit-active { background: var(--soft-blue); transform: translateX(3px); } .cit .cit-dropdown-item-icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 6px; background: var(--soft-blue); border-radius: 8px; flex-shrink: 0; } .cit .cit-dropdown-item:hover .cit-dropdown-item-icon { background: #fff; } .cit .cit-dropdown-item-icon img { width: 100%; height: 100%; object-fit: contain; } .cit .cit-dropdown-item-text { display: flex; flex-direction: column; } .cit .cit-dropdown-item-text strong { font-size: var(--fs-md); font-weight: 700; color: var(--ink); line-height: 1.25; } .cit .cit-dropdown-item-text span { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.25; } .cit .cit-dropdown-footer { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); text-align: center; } .cit .cit-dropdown-footer-link { font-size: var(--fs-sm); font-weight: 700; color: var(--color-primary); display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; transition: color 150ms ease; } .cit .cit-dropdown-footer-link:hover { text-decoration: underline; } .cit .cit-nav-toggle { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 14px; background: var(--ink); color: #fff; } .cit .cit-nav-toggle svg { width: 24px; height: 24px; } .cit .cit-hero { position: relative; padding: 74px 0 70px; } .cit .cit-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr); /* center, no end: la columna de texto es mas baja que el panel visual, y alineandola al pie quedaban 101px muertos encima y 0 debajo. */ align-items: center; gap: 48px; } .cit .cit-hero-copy { position: relative; z-index: 2; } .cit .cit-hero-copy h1 { margin-bottom: 28px; font-size: var(--h1-size); line-height: var(--h1-line); font-weight: var(--h1-weight); } /* Desde 1025px el hero es de 2 columnas y la columna de texto crece ~0.52px por cada px de viewport, asi que un tamano fijo se parte en algun punto del rango. El clamp sigue esa curva: ~43px a 1025px y tope de 56px desde ~1290px. */ @media (min-width: 1025px) { .cit .cit-hero-copy h1 { font-size: clamp(2.6rem, calc(4.9vw - 7px), var(--h1-hero-size)); line-height: 1.14; } } .cit .cit-hero-title-line { display: block; /* Sin nowrap: con la escala H1 (64px) cada linea puede exceder la columna */ } .cit .cit-hero-copy h1 .cit-hero-highlight { color: var(--brand); } .cit .cit-hero-copy .cit-lead { max-width: 590px; } .cit .cit-hero-visual { position: relative; min-height: 580px; overflow: hidden; border-radius: var(--radius-lg); background: radial-gradient(circle at 75% 25%, #1e40af 0%, #1e3a8a 45%, #0f172a 100%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18); isolation: isolate; display: flex; align-items: center; justify-content: center; padding: 16px; } .cit .cit-hero-visual::before, .cit .cit-hero-visual::after { position: absolute; border: 1.5px solid rgba(255, 255, 255, 0.12); border-radius: 50%; content: ""; pointer-events: none; } .cit .cit-hero-visual::before { top: -85px; right: -100px; width: 360px; height: 360px; } .cit .cit-hero-visual::after { bottom: -60px; left: -90px; width: 320px; height: 320px; } .cit .cit-hero-visual > img, .cit .cit-hero-visual .cit-hero-svg { position: relative; z-index: 2; width: 100%; height: auto; max-width: 620px; object-fit: contain; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.28)); transition: transform 300ms ease; } .cit .cit-hero-visual:hover > img, .cit .cit-hero-visual:hover .cit-hero-svg { transform: translateY(-4px) scale(1.01); } .cit .cit-hero-visual.cit-hero-visual--light, .cit .cit-page-hero-media.cit-page-hero-media--light { min-height: 0; padding: 0; background: linear-gradient(135deg, #fffaf5, #f4efff); border: 0; box-shadow: none; } .cit .cit-hero-visual--light::before, .cit .cit-hero-visual--light::after, .cit .cit-page-hero-media--light::before, .cit .cit-page-hero-media--light::after { display: none; } .cit .cit-hero-visual.cit-hero-visual--light > img, .cit .cit-page-hero-media.cit-page-hero-media--light > img { display: block; max-width: 100%; filter: none; transition: none; transform: none; } .cit .cit-hero-stat { position: absolute; z-index: 3; padding: 17px 20px; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow); backdrop-filter: blur(10px); } .cit .cit-hero-stat strong, .cit .cit-hero-stat span { display: block; } .cit .cit-hero-stat strong { font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: var(--fs-h4); line-height: 1; } .cit .cit-hero-stat span { margin-top: 6px; color: var(--ink-soft); font-size: var(--fs-sm); } .cit .cit-hero-stat.cit-one { top: 36px; left: 30px; } .cit .cit-hero-stat.cit-two { right: 26px; bottom: 28px; } .cit .cit-metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .cit .cit-metric { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 32px 26px; border-right: 1px solid var(--border); } .cit .cit-metric > .cit-icon { color: var(--brand); } .cit .cit-metric:last-child { border-right: 0; } .cit .cit-metric strong { display: block; margin-bottom: 4px; font-family: "Manrope", "Segoe UI", Arial, sans-serif; /* Reducido de 32-48px: varios valores son palabras ("SSL / TLS", "Movil & PC") y a ese tamano se partian en dos lineas. */ font-size: clamp(var(--fs-xl), 2.2vw, var(--fs-h4)); line-height: var(--lh-tight); text-wrap: balance; } .cit .cit-metric span { color: var(--ink-soft); font-size: var(--fs-md); } .cit .cit-section-heading { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr); align-items: end; gap: 42px; margin-bottom: 56px; } .cit .cit-section-heading .cit-section-title { margin-bottom: 0; } .cit .cit-section-heading .cit-lead { margin-left: auto; } .cit .cit-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cit .cit-service-card { position: relative; display: flex; min-height: 360px; flex-direction: column; padding: 30px; overflow: hidden; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .cit .cit-service-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow); transform: translateY(-6px); } .cit .cit-quote-card, .cit .cit-value-card, .cit .cit-service-detail, .cit .cit-price-card { transition: border-color 220ms ease, transform 220ms ease; } .cit .cit-quote-card:hover, .cit .cit-value-card:hover, .cit .cit-service-detail:hover, .cit .cit-price-card:hover { border-color: rgba(37, 99, 235, 0.62); transform: translateY(-3px); } .cit .cit-service-card.cit-featured { border-color: var(--color-primary); background: var(--brand); color: #fff; } .cit .cit-service-card.cit-featured p { color: #dfe9ff; } .cit .cit-service-number { margin-bottom: 70px; color: var(--brand); font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: var(--fs-sm); font-weight: 700; } .cit .cit-featured .cit-service-number { color: var(--color-accent); } .cit .cit-service-card h3 { margin-bottom: 14px; font-size: var(--fs-h4); } .cit .cit-service-card p { color: var(--ink-soft); } .cit .cit-service-link { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 22px; font-weight: 700; } .cit .cit-service-link svg { width: 18px; transition: transform 200ms ease; } .cit .cit-service-link:hover svg { transform: translateX(4px); } .cit .cit-story-panel { display: grid; grid-template-columns: 0.95fr 1.05fr; min-height: 650px; } .cit .cit-story-media { min-height: 520px; } .cit .cit-story-media img { width: 100%; height: 100%; object-fit: cover; } .cit .cit-story-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 80px clamp(34px, 6vw, 90px); } .cit .cit-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 50px; border-top: 1px solid rgba(255, 255, 255, 0.18); } .cit .cit-step { padding: 28px 24px 0 0; border-right: 1px solid rgba(255, 255, 255, 0.18); } .cit .cit-step + .cit-step { padding-left: 24px; } .cit .cit-step:last-child { border-right: 0; } .cit .cit-step span { display: block; margin-bottom: 16px; color: var(--color-accent); font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-weight: 700; } .cit .cit-step h3 { margin-bottom: 10px; font-size: var(--fs-h4); } .cit .cit-step p { color: #aebbd0; font-size: var(--fs-md); } .cit .cit-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 58px 26px; } .cit .cit-project-card:nth-child(even) { transform: translateY(70px); } .cit .cit-project-card { position: relative; min-width: 0; isolation: isolate; } .cit .cit-project-image { display: block; position: relative; width: 100%; aspect-ratio: 1.47 / 1; overflow: hidden; box-sizing: border-box; border: 1.5px solid rgba(37, 99, 235, 0.32); border-radius: var(--radius-md); background: #dfe6ee; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08); transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .cit .cit-project-image img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1); } .cit .cit-project-card:hover .cit-project-image { border-color: rgba(37, 99, 235, 0.72); box-shadow: 0 18px 42px rgba(37, 99, 235, 0.14); transform: translateY(-3px); } .cit .cit-project-card:hover .cit-project-image img { transform: scale(1.035); } .cit .cit-project-action { position: absolute; right: 20px; bottom: 20px; display: grid; width: 56px; height: 56px; place-items: center; border-radius: 50%; background: var(--color-accent); color: #fff; } .cit .cit-project-action svg { width: 22px; } .cit .cit-project-info { position: relative; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 20px 4px 0; background: var(--paper); } .cit .cit-project-info h2, .cit .cit-project-info h3 { margin-bottom: 5px; font-size: var(--fs-h4); line-height: 1.12; letter-spacing: -0.035em; } .cit .cit-project-info p { color: var(--ink-soft); font-size: var(--fs-md); } .cit .cit-project-index { color: var(--brand); font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-weight: 700; } .cit .cit-logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .cit .cit-logo-tile { display: grid; min-height: 120px; place-items: center; padding: 20px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.06); } .cit .cit-logo-tile img { width: 100%; height: 72px; border-radius: 10px; object-fit: cover; } .cit .cit-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cit .cit-quote-card { display: flex; min-height: 330px; flex-direction: column; padding: 30px; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: #fff; } .cit .cit-quote-mark { color: var(--brand); font-family: Georgia, serif; font-size: 4.5rem; line-height: 0.8; } .cit .cit-quote-card blockquote { margin: 28px 0; color: #25324a; font-size: var(--fs-lg); } .cit .cit-quote-author { display: flex; align-items: center; gap: 13px; margin-top: auto; } .cit .cit-quote-author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .cit .cit-quote-author strong, .cit .cit-quote-author span { display: block; } .cit .cit-quote-author strong { font-family: "Manrope", "Segoe UI", Arial, sans-serif; } .cit .cit-quote-author span { color: var(--ink-soft); font-size: var(--fs-sm); } .cit .cit-cta-band { position: relative; display: flex; width: var(--container); min-height: 390px; overflow: hidden; isolation: isolate; /* Simetrico: antes era 20px arriba contra 110px abajo, y la banda quedaba pegada a la seccion anterior. */ margin: 110px auto; padding: 64px 0; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); /* Superficie navy de la marca con formas planas (MASTER.md, "Fondos decorativos"): sin degradados, solo colores de la paleta. */ background: var(--color-surface-dark); color: var(--color-surface); } /* Tras una seccion blanca, su padding inferior (110px) ya separa el CTA; con el margen superior se sumaban 220px de blanco. Tras una seccion oscura el margen se mantiene: ahi el blanco si hace de separacion entre dos bloques. */ .cit .cit-section:not(.cit-dark-section) + .cit-cta-band { margin-top: 0; } /* En movil el CTA baja a 10px de margen superior; tras una seccion oscura los dos bloques navy quedaban casi pegados y se leian como uno solo. */ @media (max-width: 640px) { .cit .cit-section.cit-dark-section + .cit-cta-band { margin-top: 40px; } } /* Trama de puntos: esquina superior izquierda y franja inferior derecha. */ .cit .cit-cta-band::before { position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.6' fill='%2394A3B8'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.6' fill='%2394A3B8'/%3E%3C/svg%3E"); background-position: 24px 24px, right 24px bottom 24px; background-repeat: repeat; background-size: 22px 22px; clip-path: polygon(0 0, 30% 0, 30% 46%, 0 46%, 0 0, 70% 60%, 100% 60%, 100% 100%, 70% 100%, 70% 60%); content: ""; opacity: 0.28; pointer-events: none; } /* Formas: aro azul (arriba derecha), disco coral (abajo izquierda) y un aro violeta pequeno como detalle creativo. Recortadas por el borde de la banda. */ .cit .cit-cta-band::after { position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Ccircle cx='180' cy='180' r='156' fill='none' stroke='%232563EB' stroke-width='30'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='100' fill='%23F97316'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='26' fill='none' stroke='%237C3AED' stroke-width='8'/%3E%3C/svg%3E"); background-position: right -130px top -160px, left -80px bottom -100px, left 14% top 18%; background-repeat: no-repeat; background-size: 360px 360px, 190px 190px, 56px 56px; content: ""; opacity: 0.55; pointer-events: none; } .cit .cit-cta-inner { position: relative; z-index: 1; display: flex; min-height: 236px; align-items: center; flex-direction: column; justify-content: center; text-align: center; } .cit .cit-cta-inner > div { display: flex; align-items: center; flex-direction: column; } .cit .cit-cta-isologo { width: 56px; height: 56px; margin-bottom: 20px; } .cit .cit-cta-inner h2 { max-width: 960px; margin-bottom: 0; color: var(--color-surface); font-size: clamp(var(--fs-h3), 4vw, var(--fs-h2)); font-weight: 700; letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; } .cit .cit-cta-copy { max-width: 700px; margin: 18px auto 0; /* #94A3B8 sobre #0F172A: contraste 6.9:1 */ color: var(--color-muted-dark); font-size: clamp(var(--fs-md), 1.2vw, var(--fs-lg)); line-height: 1.65; text-wrap: balance; } .cit .cit-cta-inner > .cit-cta-actions { display: flex; /* .cta-inner > div impone column a todos los div hijos; hay que revertirlo aqui explicitamente o los dos botones se apilan en escritorio. */ flex-direction: row; margin-top: 28px; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; } .cit .cit-cta-inner > .cit-btn { margin-top: 24px; } .cit .cit-cta-band .cit-btn-accent { color: var(--color-surface); } /* El hover global de .btn-primary vuelve el boton navy y desapareceria sobre esta banda: aqui se invierte a blanco con texto azul. */ .cit .cit-cta-band .cit-btn-primary:hover { background: var(--color-surface); color: var(--color-primary); } .cit .cit-cta-band .cit-btn-light { border-color: var(--color-surface); } .cit .cit-cta-band .cit-btn:focus-visible { outline: 2px solid var(--color-surface); outline-offset: 3px; } .cit .cit-site-footer { margin-top: 20px; padding: 84px 0 30px; background: var(--color-surface-dark); color: #fff; } .cit .cit-footer-grid { display: grid; grid-template-columns: 1.6fr 0.7fr 0.9fr 1fr; gap: 50px; padding-bottom: 62px; } .cit .cit-footer-brand img { width: 235px; margin-bottom: 24px; } .cit .cit-footer-brand p { max-width: 410px; } .cit .cit-footer-title { margin-bottom: 22px; color: var(--color-accent); font-size: var(--fs-sm); letter-spacing: 0.14em; text-transform: uppercase; } .cit .cit-footer-links { margin: 0; padding: 0; list-style: none; } .cit .cit-footer-links li + li { margin-top: 10px; } .cit .cit-footer-links a { color: #dbe3f0; transition: color 200ms ease; } .cit .cit-footer-links a:hover { color: var(--color-accent); } .cit .cit-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 25px; border-top: 1px solid rgba(255, 255, 255, 0.13); color: #92a1b8; font-size: var(--fs-sm); } .cit .cit-social-links { display: flex; gap: 10px; } .cit .cit-social-links a { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; } .cit .cit-social-links svg { width: 18px; } .cit .cit-whatsapp-float { position: fixed; z-index: 900; right: 22px; bottom: 22px; display: grid; width: 58px; height: 58px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #20b85a; color: #fff; box-shadow: 0 16px 36px rgba(17, 131, 71, 0.35); transition: transform 200ms ease; } .cit .cit-whatsapp-float:hover { transform: translateY(-4px) scale(1.03); } .cit .cit-whatsapp-float svg { width: 28px; } .cit .cit-page-hero { padding: 72px 0 92px; } .cit .cit-page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); /* Mismo criterio que .hero-grid: las dos columnas se centran entre si en lugar de alinearse al pie. */ align-items: center; gap: 60px; } .cit .cit-page-hero-grid > * { min-width: 0; overflow-wrap: anywhere; } .cit .cit-page-hero h1 { margin-bottom: 26px; font-size: var(--h1-size); line-height: var(--h1-line); font-weight: var(--h1-weight); } .cit .cit-page-hero-media { position: relative; min-height: 420px; overflow: hidden; border-radius: var(--radius-lg); background: radial-gradient(circle at 75% 25%, #1e40af 0%, #1e3a8a 45%, #0f172a 100%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18); isolation: isolate; display: flex; align-items: center; justify-content: center; padding: 18px; } .cit .cit-page-hero-media::before, .cit .cit-page-hero-media::after { position: absolute; border: 1.5px solid rgba(255, 255, 255, 0.1); border-radius: 50%; content: ""; pointer-events: none; } .cit .cit-page-hero-media::before { top: -70px; right: -80px; width: 280px; height: 280px; } .cit .cit-page-hero-media::after { bottom: -50px; left: -70px; width: 240px; height: 240px; } .cit .cit-page-hero-media img { position: relative; z-index: 2; width: 100%; height: auto; max-width: 580px; object-fit: contain; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.28)); transition: transform 300ms ease; } .cit .cit-page-hero-media:hover img { transform: translateY(-4px) scale(1.01); } .cit .cit-page-hero-media.cit-contain img { padding: 0; object-fit: contain; } .cit .cit-story-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; } .cit .cit-story-grid .cit-section-title { position: sticky; top: 120px; } .cit .cit-story-grid .cit-history-intro .cit-section-title { position: static; } .cit .cit-history-image { display: block; width: 100%; height: auto; margin-top: 28px; border-radius: var(--radius-lg); } .cit .cit-rich-copy p { margin-bottom: 24px; color: var(--ink-soft); font-size: var(--fs-lg); } .cit .cit-check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 34px 0 0; padding: 0; list-style: none; } .cit .cit-check-grid li { position: relative; padding-left: 28px; font-weight: 600; } .cit .cit-check-grid li .cit-icon { position: absolute; top: 2px; left: 0; width: var(--icon-sm); height: var(--icon-sm); color: var(--brand); } .cit .cit-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cit .cit-value-card { min-height: 275px; padding: 32px; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: #fff; } .cit .cit-value-card > .cit-icon { margin-bottom: 14px; color: var(--brand); } .cit .cit-value-card:nth-child(2) { background: var(--soft-blue); } .cit .cit-value-card:nth-child(3) { background: var(--secondary-soft); } .cit .cit-value-card span { color: var(--brand); font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-weight: 700; } .cit .cit-value-card h3 { margin: 70px 0 14px; font-size: var(--fs-h4); } .cit .cit-service-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .cit .cit-service-detail { display: grid; grid-template-columns: 68px 1fr; gap: 24px; min-height: 300px; padding: 34px; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: #fff; } .cit .cit-service-icon { display: grid; width: 62px; height: 62px; place-items: center; border-radius: var(--radius-md); background: var(--soft-blue); color: var(--brand); } .cit .cit-service-icon .cit-icon { width: var(--icon-lg); height: var(--icon-lg); } .cit .cit-service-detail h2 { margin: 7px 0 16px; font-size: clamp(var(--fs-h4), 3vw, var(--fs-h3)); } .cit .cit-service-detail p { color: var(--ink-soft); } .cit .cit-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); } .cit .cit-process-item { display: flex; min-height: 290px; flex-direction: column; padding: 34px 26px; border-right: 1px solid rgba(255, 255, 255, 0.16); } .cit .cit-process-item > .cit-icon { margin-bottom: 14px; color: var(--accent); } .cit .cit-process-item:last-child { border-right: 0; } .cit .cit-process-item span { display: block; color: var(--color-accent); font-size: var(--fs-sm); letter-spacing: 0.08em; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-weight: 700; } .cit .cit-process-item h3 { /* Flujo natural: icono, numero, titulo y texto alineados arriba en todas las tarjetas. El 90px fijo anterior descuadraba al anadir el icono, y alinear al pie desalineaba los titulos por el largo de cada parrafo. */ margin: 16px 0 12px; font-size: var(--fs-h4); line-height: var(--lh-heading); } .cit .cit-process-item p { color: #aebbd0; } .cit .cit-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cit .cit-price-card { position: relative; display: flex; min-height: 640px; flex-direction: column; padding: 32px; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: #fff; } .cit .cit-price-card.cit-popular { border: 2px solid var(--brand); box-shadow: 0 25px 70px rgba(37, 99, 235, 0.15); } .cit .cit-popular-tag { position: absolute; top: 20px; right: 20px; padding: 5px 10px; border-radius: var(--radius-badge); background: var(--color-accent); color: #fff; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .cit .cit-price-card h2 { margin-bottom: 8px; font-size: var(--fs-h4); } .cit .cit-storage { color: var(--brand); font-weight: 700; } .cit .cit-price { margin: 28px 0 7px; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.045em; line-height: 1; } .cit .cit-period { color: var(--ink-soft); font-size: var(--fs-md); } .cit .cit-feature-list { margin: 28px 0; padding: 24px 0 0; border-top: 1px solid var(--border); list-style: none; } .cit .cit-feature-list li { display: flex; margin-bottom: 11px; align-items: flex-start; gap: 10px; color: #344158; font-size: var(--fs-md); } .cit .cit-feature-list li .cit-icon { margin-top: 4px; color: var(--success); } .cit .cit-price-card .cit-btn { width: 100%; margin-top: auto; } .cit .cit-faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 70px; } .cit .cit-faq-list details { border-bottom: 1px solid var(--border); } .cit .cit-faq-list summary { position: relative; padding: 23px 48px 23px 0; cursor: pointer; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: var(--fs-lg); font-weight: 650; list-style: none; } .cit .cit-faq-list summary::-webkit-details-marker { display: none; } .cit .cit-faq-list summary::after { position: absolute; top: 20px; right: 6px; content: ""; width: var(--icon-md); height: var(--icon-md); background-color: var(--brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 220ms ease; } .cit .cit-faq-list details[open] summary::after { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .cit .cit-faq-list summary::after { transition: none; } } .cit .cit-faq-list details[open] summary::after { content: "−"; } .cit .cit-faq-list details p { padding: 0 45px 24px 0; color: var(--ink-soft); } .cit .cit-contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 22px; } .cit .cit-contact-panel, .cit .cit-contact-form { padding: clamp(30px, 5vw, 56px); border-radius: var(--radius-md); } .cit .cit-contact-panel { border: 1.5px solid var(--color-primary); background: var(--color-surface-dark); color: #fff; } .cit .cit-contact-panel h2, .cit .cit-contact-form h2 { margin-bottom: 24px; font-size: clamp(var(--fs-h4), 3vw, var(--fs-h3)); } .cit .cit-contact-list { margin: 45px 0 0; padding: 0; list-style: none; } .cit .cit-contact-list li { display: grid; grid-template-columns: var(--icon-md) 1fr; column-gap: 14px; align-items: start; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.15); } .cit .cit-contact-list li .cit-icon { grid-row: span 2; margin-top: 2px; opacity: 0.75; } .cit .cit-contact-list span, .cit .cit-contact-list a { display: block; } .cit .cit-contact-list span { margin-bottom: 5px; color: var(--color-accent); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .cit .cit-contact-form { border: 1.5px solid var(--border); background: #fff; } .cit .cit-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .cit .cit-field.cit-full { grid-column: 1 / -1; } .cit .cit-field label { display: block; margin-bottom: 8px; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: var(--fs-sm); font-weight: 650; } .cit .cit-field input, .cit .cit-field select, .cit .cit-field textarea { width: 100%; min-height: 52px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 13px; background: #f9fafb; color: var(--ink); } .cit .cit-field textarea { min-height: 145px; resize: vertical; } .cit .cit-field input:focus, .cit .cit-field select:focus, .cit .cit-field textarea:focus { border-color: var(--brand); } .cit .cit-form-note { margin-top: 14px; color: var(--ink-soft); font-size: var(--fs-sm); } .cit .cit-error-page { display: grid; min-height: calc(100vh - 110px); place-items: center; padding: 70px 20px; text-align: center; } .cit .cit-error-code { margin: 0; color: var(--brand); font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: clamp(8rem, 24vw, 19rem); font-weight: 800; letter-spacing: -0.08em; line-height: 0.72; } .cit .cit-error-page h1 { margin: 45px 0 18px; font-size: var(--h1-size); line-height: var(--h1-line); font-weight: var(--h1-weight); } .cit .cit-reveal { opacity: 0; transform: translateY(24px); transition: opacity 550ms ease, transform 550ms cubic-bezier(0.2, 0.7, 0.2, 1); } .cit .cit-reveal.cit-is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 1024px) { .cit { --container: min(100% - 32px, 920px); --h1-size: 52px; --h1-line: 60px; } .cit .cit-section { padding: 90px 0; } .cit .cit-hero-grid, .cit .cit-page-hero-grid { grid-template-columns: 1fr; } .cit .cit-hero-copy h1, .cit .cit-page-hero h1 { max-width: 900px; } .cit .cit-hero-visual { min-height: 570px; } .cit .cit-services-grid, .cit .cit-testimonial-grid, .cit .cit-pricing-grid { grid-template-columns: repeat(2, 1fr); } .cit .cit-story-panel { grid-template-columns: 1fr; } .cit .cit-story-media { max-height: 620px; } .cit .cit-story-content { padding: 70px 42px; } .cit .cit-footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); } .cit .cit-footer-brand { grid-column: 1 / -1; } .cit .cit-process-grid { grid-template-columns: repeat(2, 1fr); } .cit .cit-process-item:nth-child(2) { border-right: 0; } .cit .cit-process-item:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.16); } } @media (max-width: 820px) { .cit { --h1-size: 44px; --h1-line: 52px; } .cit .cit-nav-toggle { display: flex; } .cit .cit-nav-panel { position: fixed; inset: 86px 16px auto; display: none; max-height: calc(100vh - 110px); flex-direction: column; align-items: stretch; padding: 24px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); } .cit .cit-nav-panel.cit-open { display: flex; } .cit .cit-nav-list { flex-direction: column; align-items: stretch; gap: 3px; } .cit .cit-nav-link { width: 100%; min-height: 50px; } .cit .cit-has-dropdown { width: 100%; } .cit .cit-nav-dropdown-toggle-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; } .cit .cit-dropdown-trigger { width: 44px; height: 44px; background: var(--soft-blue); } .cit .cit-dropdown-menu { position: static; transform: none !important; min-width: 100%; box-shadow: none; border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 4px 0 10px; display: none; opacity: 1; visibility: visible; pointer-events: auto; background: #fafbfc; } .cit .cit-has-dropdown.cit-open-mobile .cit-dropdown-menu { display: flex; flex-direction: column; } .cit .cit-has-dropdown.cit-open-mobile .cit-dropdown-icon { transform: rotate(180deg); } .cit .cit-nav-panel .cit-btn { width: 100%; } .cit .cit-metric-strip { grid-template-columns: repeat(2, 1fr); } .cit .cit-metric:nth-child(2) { border-right: 0; } .cit .cit-metric:nth-child(-n + 2) { border-bottom: 1px solid var(--border); } .cit .cit-section-heading, .cit .cit-story-grid, .cit .cit-faq-grid, .cit .cit-contact-grid { grid-template-columns: 1fr; gap: 28px; } .cit .cit-story-grid .cit-section-title { position: static; } .cit .cit-logo-grid { grid-template-columns: repeat(2, 1fr); } .cit .cit-service-detail-grid, .cit .cit-values-grid { grid-template-columns: 1fr; } .cit .cit-cta-inner { align-items: center; flex-direction: column; } } @media (max-width: 640px) { .cit { --container: min(100% - 24px, 600px); --radius-lg: 20px; --h1-size: 34px; --h1-line: 40px; } .cit .cit-section { padding: 72px 0; } .cit .cit-surface-section, .cit .cit-hero, .cit .cit-page-hero { margin: 10px; } .cit .cit-cta-band { margin: 10px auto 72px; } .cit .cit-brand-logo img { width: 185px; } .cit .cit-hero { padding-top: 48px; } /* La escala H1 se controla con --h1-size / --h1-line (MARCA.md §3) */ .cit .cit-hero-visual { min-height: auto; padding: 12px; border-radius: var(--radius-lg); } .cit .cit-hero-visual > img, .cit .cit-hero-visual .cit-hero-svg { width: 100%; max-width: 100%; right: auto; bottom: auto; } .cit .cit-hero-stat { padding: 13px 15px; } .cit .cit-hero-stat strong { font-size: var(--fs-xl); } .cit .cit-hero-stat.cit-one { top: 18px; left: 16px; } .cit .cit-hero-stat.cit-two { right: 14px; bottom: 18px; } .cit .cit-services-grid, .cit .cit-testimonial-grid, .cit .cit-pricing-grid, .cit .cit-project-grid { grid-template-columns: 1fr; } .cit .cit-project-card:nth-child(even) { transform: none; } .cit .cit-story-content { padding: 58px 24px; } .cit .cit-steps { grid-template-columns: 1fr; } .cit .cit-step, .cit .cit-step + .cit-step { padding: 24px 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); } .cit .cit-step:last-child { border-bottom: 0; } .cit .cit-logo-grid { gap: 10px; } .cit .cit-logo-tile { min-height: 95px; padding: 12px; } .cit .cit-logo-tile img { height: 58px; } .cit .cit-footer-grid { grid-template-columns: 1fr; } .cit .cit-footer-brand { grid-column: auto; } .cit .cit-footer-bottom { align-items: flex-start; flex-direction: column; } .cit .cit-page-hero { padding: 52px 0 70px; } .cit .cit-page-hero-media { min-height: auto; padding: 14px; } .cit .cit-page-hero-media img { min-height: auto; max-height: none; } .cit .cit-check-grid, .cit .cit-process-grid, .cit .cit-form-grid { grid-template-columns: 1fr; } .cit .cit-process-item, .cit .cit-process-item:nth-child(2) { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); } .cit .cit-process-item:last-child { border-bottom: 0; } .cit .cit-service-detail { grid-template-columns: 1fr; } .cit .cit-cta-band { min-height: 0; padding: 52px 0; } .cit .cit-cta-inner { min-height: 0; } .cit .cit-cta-inner h2 { font-size: clamp(var(--fs-h4), 7vw, var(--fs-h3)); } .cit .cit-cta-break { display: none; } .cit .cit-cta-inner > .cit-cta-actions { width: 100%; flex-direction: column; gap: 12px; } .cit .cit-cta-actions .cit-btn { width: 100%; justify-content: center; } .cit .cit-cta-isologo { width: 48px; height: 48px; margin-bottom: 16px; } .cit .cit-cta-band::after { background-position: right -150px top -190px, left -90px bottom -120px, left 8% top 5%; background-size: 300px 300px, 170px 170px, 44px 44px; opacity: 0.45; } .cit .cit-whatsapp-float { right: 14px; bottom: 14px; } } /* Service Card Icon Header */ .cit .cit-service-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .cit .cit-service-card-header .cit-service-number { margin-bottom: 0; } .cit .cit-service-card-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--soft-blue); padding: 6px; flex-shrink: 0; transition: transform 250ms ease, background-color 250ms ease, box-shadow 250ms ease; } .cit .cit-service-card:hover .cit-service-card-icon { transform: translateY(-3px) scale(1.06); } .cit .cit-service-card.cit-featured .cit-service-card-icon { background: rgba(255, 255, 255, 0.18); } .cit .cit-service-card-icon img { width: 100%; height: 100%; object-fit: contain; transition: filter 250ms ease; } /* Service Page Tech Logos / Brands Strip */ .cit .cit-tech-strip { padding: 36px 0; border-bottom: 1px solid var(--border); background: var(--surface); } .cit .cit-tech-strip-title { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); text-align: center; margin-bottom: 22px; } .cit .cit-tech-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; } .cit .cit-tech-item { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-badge); font-size: var(--fs-md); font-weight: 600; color: var(--ink); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } .cit .cit-tech-item img { width: 24px; height: 24px; object-fit: contain; } .cit .cit-tech-item .cit-tech-mark-wide { width: 42px; height: 14px; padding: 3px 4px; border-radius: 4px; background: #172033; } .cit .cit-tech-marks { display: inline-flex; align-items: center; gap: 3px; } .cit .cit-tech-marks img { width: 18px; height: 18px; } /* Service Detail Features / Sub-services Grid */ .cit .cit-solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 36px; } .cit .cit-solution-card { padding: 30px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-md); transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .cit .cit-solution-card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: var(--shadow); } .cit .cit-solution-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--soft-blue); color: var(--color-primary); margin-bottom: 20px; } .cit .cit-solution-icon img, .cit .cit-solution-icon svg { width: 28px; height: 28px; object-fit: contain; } .cit .cit-solution-card h3 { font-size: var(--fs-xl); margin-bottom: 12px; } .cit .cit-solution-card p { color: var(--ink-soft); font-size: var(--fs-md); line-height: 1.6; margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .cit *, .cit *::before, .cit *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } .cit .cit-reveal { opacity: 1; transform: none; } } /* ============================================================ MOVIMIENTO (assets/js/motion.js) .motion-ready: GSAP controla los revelados, asi que el CSS deja de ocultar .reveal y de transicionarlo (si no, ambos pelearian). .pointer-motion: Motion anima hover con resortes; se apagan los transform de hover del CSS en esos elementos por la misma razon. ============================================================ */ .cit-motion-ready .cit .cit-reveal { opacity: 1; transform: none; transition: none; } .cit-pointer-motion .cit .cit-btn:hover, .cit-pointer-motion .cit .cit-service-card:hover, .cit-pointer-motion .cit .cit-service-card:hover .cit-service-card-icon, .cit-pointer-motion .cit .cit-solution-card:hover, .cit-pointer-motion .cit .cit-solution-card:hover .cit-solution-icon { transform: none; } .cit-pointer-motion .cit .cit-btn, .cit-pointer-motion .cit .cit-service-card, .cit-pointer-motion .cit .cit-service-card-icon, .cit-pointer-motion .cit .cit-solution-card, .cit-pointer-motion .cit .cit-solution-icon { transition-property: background, color, border-color, box-shadow, background-color; } .cit-pointer-motion .cit .cit-services-grid, .cit-pointer-motion .cit .cit-solutions-grid { perspective: 1000px; } .cit-pointer-motion .cit .cit-service-card, .cit-pointer-motion .cit .cit-solution-card { will-change: transform; } /* Mascaras de SplitText: overflow:hidden con interlineado ajustado recortaria los descendentes (g, y, p). Se amplia la caja y se compensa con margen. */ .cit .cit-split-word-mask, .cit .cit-split-line-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; } /* Formas decorativas animadas desde motion.js via variables CSS (los pseudo-elementos no son accesibles desde JS). Sin JS valen 0 / 1 y no cambia nada. Se usa translate/scale individuales para no pisar el transform que ya tienen algunas formas (p. ej. translateY(-50%)). */ .cit .cit-hero::before, .cit .cit-page-hero::before, .cit .cit-ambient-section::before, .cit .cit-cta-band::before { translate: 0 var(--para-dots, 0px); } .cit .cit-hero::after, .cit .cit-page-hero::after, .cit .cit-ambient-section::after, .cit .cit-dark-section::after, .cit .cit-cta-band::after { translate: 0 var(--para-ring, 0px); } .cit .cit-hero::before, .cit .cit-hero::after, .cit .cit-page-hero::before, .cit .cit-page-hero::after { scale: var(--shape-scale, 1); } .cit .cit-hero::after, .cit .cit-page-hero::after { opacity: var(--shape-o, 1); } .cit .cit-hero::before, .cit .cit-page-hero::before { opacity: calc(0.72 * var(--shape-o, 1)); } /* Franja de cifras (todas las paginas): icono a la izquierda en un cuadro azul suave, cifra y etiqueta apiladas a la derecha. La cifra se lee primero y icono + texto quedan alineados como una sola pieza. Sobrescribe la disposicion en columna de las reglas .metric de mas arriba. */ .cit .cit-metric-strip .cit-metric { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: center; padding: 28px 24px; } .cit .cit-metric-strip .cit-metric > .cit-icon { grid-row: 1 / span 2; width: 48px; height: 48px; padding: 12px; border-radius: var(--radius-md); background: var(--soft-blue); box-sizing: border-box; } .cit .cit-metric-strip .cit-metric strong { margin-bottom: 0; align-self: end; } .cit .cit-metric-strip .cit-metric span { align-self: start; line-height: 1.35; } @media (max-width: 640px) { .cit .cit-metric-strip .cit-metric { column-gap: 12px; padding: 22px 14px; } .cit .cit-metric-strip .cit-metric > .cit-icon { width: 40px; height: 40px; padding: 10px; } .cit .cit-metric-strip .cit-metric span { font-size: var(--fs-sm); } } /* Contenedor del boton flotante de WhatsApp: sin fondo ni alto propio */ .cit.cit-float-wrap { background: none; height: 0; overflow: visible; } /* Espaciado del CTA entre bloques .cit (ver CROSS_WRAPPER en build_whmcs.py) */ .cit:has(> .cit-section:not(.cit-dark-section)) + .cit > .cit-cta-band { margin-top: 0; } @media (max-width: 640px) { .cit:has(> .cit-section.cit-dark-section) + .cit > .cit-cta-band { margin-top: 40px; } } /* ===== Pie de Lagom con el diseno de Creativas IT Peru (ver LAGOM_FOOTER) ===== */ body .main-footer.main-footer-extended { background: #0f172a; color: #dbe3f0; font-family: "Manrope", "Segoe UI", Arial, sans-serif; } body .main-footer.main-footer-extended .footer-company-desc { color: #aebbd0; line-height: 1.65; } body .main-footer.main-footer-extended .footer-title { color: #f97316; font-family: inherit; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } body .main-footer.main-footer-extended .footer-icon { color: #f97316; } body .main-footer.main-footer-extended .footer-nav .nav-link, body .main-footer.main-footer-extended .footer-nav a { color: #dbe3f0; transition: color 200ms ease; } body .main-footer.main-footer-extended .footer-nav .nav-link:hover, body .main-footer.main-footer-extended .footer-nav a:hover { color: #f97316; } body .main-footer.main-footer-extended .footer-company-socials { gap: 10px; } body .main-footer.main-footer-extended .footer-company-socials a { display: inline-flex; width: 40px; height: 40px; padding: 0; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; background: transparent; color: #dbe3f0; transition: background 200ms ease, border-color 200ms ease, color 200ms ease; } body .main-footer.main-footer-extended .footer-company-socials a i { color: inherit; } body .main-footer.main-footer-extended .footer-company-socials a:hover { border-color: #f97316; background: #f97316; color: #fff; } body .main-footer.main-footer-extended .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.13); background: transparent; color: #92a1b8; } body .main-footer.main-footer-extended .footer-copyright, body .main-footer.main-footer-extended .footer-bottom .nav-link { color: #92a1b8; } body .main-footer.main-footer-extended .footer-bottom .nav-link:hover { color: #f97316; } /* ===== Iconos del submenu de Lagom con el estilo del sitio (ver LAGOM_MENU) ===== */ body .menu-primary .dropdown-extended .dropdown-menu > li > a > i { display: inline-flex; flex: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 8px; background: rgba(37, 99, 235, 0.08); color: #2563eb; font-size: 18px; transition: background-color 150ms ease, color 150ms ease; } body .menu-primary .dropdown-extended .dropdown-menu > li > a:hover > i, body .menu-primary .dropdown-extended .dropdown-menu > li > a:focus-visible > i { background: #2563eb; color: #fff; } /* Submenu en dos columnas (solo escritorio). Lagom oculta el desplegable con visibility/opacity, no con display, asi que la rejilla no altera la animacion. Se centra bajo "Servicios": alineado a la izquierda se salia de la pantalla por la derecha. El ultimo elemento ("Ver todos los servicios") ocupa las dos columnas como pie del desplegable. */ @media (min-width: 1200px) { body .menu-primary .dropdown-extended > .dropdown-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 640px; max-height: none; overflow: visible; left: 50%; right: auto; margin-left: -320px; padding: 12px; column-gap: 4px; } body .menu-primary .dropdown-extended > .dropdown-menu > li > a { padding: 14px 16px; border-radius: 8px; } body .menu-primary .dropdown-extended > .dropdown-menu > li:last-child { grid-column: 1 / -1; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(30, 41, 59, 0.1); } } /* ===== Tarjetas de /store/* con el diseno del sitio (ver LAGOM_STORE) ===== */ body #products .row { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 18px; } body #products .row > .col { flex: 0 0 calc(33.333% - 12px); max-width: calc(33.333% - 12px); min-width: 0; padding: 0; } body #products .package { position: relative; display: flex; height: 100%; flex-direction: column; padding: 32px 28px; border: 1.5px solid rgba(30, 41, 59, 0.2); border-radius: 14px; background: #fff; box-shadow: none; text-align: left; font-family: "Manrope", "Segoe UI", Arial, sans-serif; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } body #products .package:hover { transform: translateY(-4px); border-color: rgba(37, 99, 235, 0.45); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1); } body #products .package.package-featured { border: 2px solid #2563eb; box-shadow: 0 25px 70px rgba(37, 99, 235, 0.15); } body #products .package .package-side-left { display: contents; } /* La etiqueta de destacado de Lagom, con la pildora naranja del sitio */ body #products .package .label-corner { position: absolute; transform: none; width: auto; height: auto; overflow: visible; top: 20px; right: 20px; padding: 5px 10px; border: 0; border-radius: 26px; background: #f97316; color: #fff; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } body #products .package .package-header { padding: 0; border: 0; background: none; } body #products .package .package-title { margin: 0; color: #0f172a; font-size: 1.625rem; font-weight: 700; line-height: 1.3; text-align: left; text-transform: none; } body #products .package .package-header .package-price { margin-top: 28px; } body #products .package .package-price .price, body #products .package .package-price .price-amount, body #products .package .package-price .price-cycle { margin: 0; padding: 0; text-align: left; } body #products .package .package-price .price-amount { display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; color: #0f172a; font-size: 3rem; font-weight: 700; letter-spacing: -0.045em; line-height: 1; } body #products .package .package-price .price-cycle { margin-top: 7px; color: #64748b; font-size: 1rem; font-weight: 500; line-height: 1.4; } body #products .package .package-price .price-starting-from { margin-bottom: 4px; color: #64748b; font-size: 0.875rem; font-weight: 600; text-align: left; } body #products .package .package-body { padding: 0; } body #products .package .package-content { margin: 28px 0; padding-top: 24px; border-top: 1px solid rgba(30, 41, 59, 0.2); text-align: left; } body #products .package .package-content ul, body #products .package .package-features { margin: 0; padding: 0; list-style: none; } body #products .package .package-content li { position: relative; margin-bottom: 11px; padding-left: 28px; color: #344158; font-size: 1rem; line-height: 1.5; text-align: left; } body #products .package .package-content li::before { position: absolute; top: 3px; left: 0; content: ""; width: 18px; height: 18px; background-color: #2563eb; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } body #products .package .package-content strong { color: #0f172a; font-weight: 700; } /* El pie repite el precio de la cabecera: se oculta el duplicado */ body #products .package .package-footer { margin-top: auto; padding: 0; border: 0; background: none; } body #products .package .package-footer .package-price { display: none; } body #products .package .btn-order-now { display: inline-flex; width: 100%; min-height: 52px; padding: 13px 24px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 26px; background: #0f172a; font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1; transition: transform 200ms ease, background 200ms ease; } body #products .package a.btn-order-now, body #products .package a.btn-order-now:link, body #products .package a.btn-order-now:visited, body #products .package a.btn-order-now:hover, body #products .package a.btn-order-now:focus { color: #fff; } body #products .package .btn-order-now:hover { background: #1b2a44; transform: translateY(-2px); } body #products .package.package-featured .btn-order-now { background: #2563eb; } body #products .package.package-featured .btn-order-now:hover { background: #1d4ed8; } body #products .package .package-qty { margin-top: 12px; color: #64748b; font-size: 0.875rem; } /* Respaldo de "incluido con los planes" con el marcado nativo de Lagom */ body .main-content .panel-form .list-features.list-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px 32px; margin: 0; padding: 0; list-style: none; } body .main-content .panel-form .list-features.list-info li { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid rgba(30, 41, 59, 0.12); color: #344158; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.45; } body .main-content .panel-form .list-features.list-info li i { color: #2563eb; } body .main-content .panel-form .list-features.list-info li .h6 { margin: 0; font-family: inherit; font-size: inherit; font-weight: inherit; text-transform: none; } /* ===== Menu lateral de la tienda: mas peso y contraste (ver LAGOM_STORE) ===== Aparece en /store/*, carrito y configuracion de producto. No depende de la plantilla parcheada, asi que sobrevive a las actualizaciones de Lagom. */ body .main-sidebar .panel-sidebar { border: 0; background: none; box-shadow: none; } body .main-sidebar .panel-sidebar .panel-heading { padding: 0; border: 0; background: none; } body .main-sidebar .panel-sidebar .panel-title { margin: 0 0 12px; color: #0f172a; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } body .main-sidebar .panel-sidebar .panel-title > i:first-child, body .main-sidebar .panel-sidebar .panel-minimise { color: #94a3b8; } body .main-sidebar .panel-sidebar .list-group { margin-bottom: 32px; } body .main-sidebar .panel-sidebar .list-group-item { padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: #344158; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.4; transition: background 200ms ease, color 200ms ease; } body .main-sidebar .panel-sidebar .list-group-item i { color: #2563eb; } body .main-sidebar .panel-sidebar a.list-group-item:hover, body .main-sidebar .panel-sidebar a.list-group-item:focus { background: rgba(37, 99, 235, 0.08); color: #0f172a; } body .main-sidebar .panel-sidebar .list-group-item.active, body .main-sidebar .panel-sidebar a.list-group-item.active:hover, body .main-sidebar .panel-sidebar a.list-group-item.active:focus { background: rgba(37, 99, 235, 0.1); color: #1d4ed8; font-weight: 700; } @media (max-width: 1024px) { body #products .row > .col { flex: 0 0 calc(50% - 9px); max-width: calc(50% - 9px); } } @media (max-width: 640px) { body #products .row { gap: 16px; } body #products .row > .col { flex: 0 0 100%; max-width: 100%; } body #products .package { padding: 28px 22px; } body #products .package .package-price .price-amount { font-size: 2.5rem; } } /* ===== Buscador de dominios con el diseno del sitio (ver LAGOM_DOMAINS) ===== El hero a dos columnas lo arma cit-dominios.js, que añade .cit-dom-2col. Sin JS la pagina queda en una columna, correcta pero sin el panel lateral. */ body .main-banner.banner-domain-register { position: relative; padding: 72px 0 76px; background: #0f172a; overflow: hidden; } body .main-banner.banner-domain-register .banner-background { display: none; } body .main-banner.banner-domain-register::after { position: absolute; right: -160px; top: -140px; content: ""; width: 540px; height: 540px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, 0.3) 0%, rgba(37, 99, 235, 0) 70%); pointer-events: none; } body .banner-domain-register .container { position: relative; z-index: 1; } body .banner-domain-register .banner-title { margin: 0 0 14px; color: #fff; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: 2.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-transform: none; } /* ----- Dos columnas (solo cuando el script ha reordenado el hero) ----- */ body .banner-domain-register.cit-dom-2col .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; } body .banner-domain-register.cit-dom-2col .banner-title { max-width: 15ch; text-align: left; } .cit-dom-main { min-width: 0; } .cit-dom-lead { margin: 0 0 30px; max-width: 44ch; color: #94a3b8; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: 1.0625rem; line-height: 1.6; } /* ----- Panel de precios ----- */ .cit-dom-aside { padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.05); } .cit-dom-aside__title { margin: 0; padding: 14px 16px 10px; color: #64748b; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .cit-dom-aside__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-family: "Manrope", "Segoe UI", Arial, sans-serif; } .cit-dom-aside__tld { color: #fff; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; } .cit-dom-aside__tld i { color: #60a5fa; font-style: normal; } .cit-dom-aside__price { color: #e2e8f0; font-size: 1rem; font-weight: 700; white-space: nowrap; } .cit-dom-aside__price small { color: #94a3b8; font-size: 0.8125rem; font-weight: 500; } /* Las tarjetas destacadas repiten lo que ya muestra el panel del hero, y solo se ocultan cuando el script ha podido montarlo (clase en ). */ body.cit-dom-2col-page #spotlightTlds, body.cit-dom-2col-page .featured-tlds { display: none; } /* ----- Caja de busqueda ----- */ body .banner-domain-register #frmDomainChecker { margin: 0; } body .banner-domain-register .search-field, body .banner-domain-register .domain-search-input { border-radius: 26px; background: #fff; } body .banner-domain-register input.form-control { height: 58px; padding: 0 20px; border: 0; background: transparent; box-shadow: none; color: #1e293b; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: 1rem; } body .banner-domain-register input.form-control::placeholder { color: #94a3b8; } body .banner-domain-register .btn-primary, body .banner-domain-register button[type="submit"] { min-height: 50px; padding: 13px 26px; border: 0; border-radius: 26px; background: #2563eb; color: #fff; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: 1rem; font-weight: 700; line-height: 1; transition: background 200ms ease, transform 200ms ease; } body .banner-domain-register .btn-primary:hover { background: #1d4ed8; transform: translateY(-2px); } body .banner-domain-register .btn-sm { padding: 9px 18px; border: 0; border-radius: 26px; background: transparent; color: #94a3b8; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: 0.875rem; font-weight: 700; } body .banner-domain-register .btn-sm.active { background: #2563eb; color: #fff; } /* ----- Resto de la pagina ----- */ body .main-content .section-title { color: #0f172a; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: 2rem; font-weight: 700; text-transform: none; } body .tld-option { font-family: "Manrope", "Segoe UI", Arial, sans-serif; } body .tld-option td { padding-top: 18px; padding-bottom: 18px; } body .main-content table td, body .main-content table th { color: #344158; font-family: "Manrope", "Segoe UI", Arial, sans-serif; } body .main-content table th { color: #0f172a; font-weight: 700; } body .tld-option .domain, body .tld-option td:first-child { color: #0f172a; font-size: 1.25rem; font-weight: 700; } body a.btn-register-domain { padding: 10px 22px; border: 0; border-radius: 26px; background: #0f172a; color: #fff; font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: 0.875rem; font-weight: 700; line-height: 1; transition: background 200ms ease, transform 200ms ease; } body a.btn-register-domain:hover, body a.btn-register-domain:focus { background: #2563eb; color: #fff; } /* Solo en :hover: con :focus el boton se queda subido tras el clic. */ body a.btn-register-domain:hover { transform: translateY(-2px); } @media (max-width: 900px) { body .banner-domain-register.cit-dom-2col .container { grid-template-columns: 1fr; gap: 32px; } body .banner-domain-register .banner-title { font-size: 2rem; max-width: none; } } @media (max-width: 640px) { body .main-banner.banner-domain-register { padding: 56px 0 60px; } body .banner-domain-register .banner-title { font-size: 1.625rem; } } /* Microinteracciones suaves: footer y acciones comerciales */ body .main-footer.main-footer-extended .footer-nav .nav-link, body .main-footer.main-footer-extended .footer-nav a { transition: color 280ms cubic-bezier(.22, .61, .36, 1), opacity 280ms cubic-bezier(.22, .61, .36, 1); } body .main-footer.main-footer-extended .footer-company-socials a { transition: background-color 280ms cubic-bezier(.22, .61, .36, 1), border-color 280ms cubic-bezier(.22, .61, .36, 1), color 280ms cubic-bezier(.22, .61, .36, 1); } .cit .cit-btn, body #products .package .btn-order-now, body .banner-domain-register .btn-primary, body a.btn-register-domain { transition: background-color 260ms cubic-bezier(.22, .61, .36, 1), color 260ms cubic-bezier(.22, .61, .36, 1), border-color 260ms cubic-bezier(.22, .61, .36, 1), box-shadow 260ms cubic-bezier(.22, .61, .36, 1); } body #products .package { transition: transform 320ms cubic-bezier(.22, .61, .36, 1), box-shadow 320ms cubic-bezier(.22, .61, .36, 1), border-color 320ms cubic-bezier(.22, .61, .36, 1); } body #products .package:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.09); } body #products .package .btn-order-now:hover, body .banner-domain-register .btn-primary:hover, body a.btn-register-domain:hover { transform: none; }