/* ========================================================================== Masters · Sistema visual global Tema claro, profesional y de alto contraste. Cada división aporta su color como acento mediante [data-division] en . Geometría recta (sin esquinas redondeadas) para un carácter técnico y sobrio. ========================================================================== */ :root { --bg: #ffffff; --bg-soft: #f4f5f7; --surface: #ffffff; --surface-2: #fafafb; --line: #e4e5ea; --line-strong: #d2d4db; --text: #14151a; --text-2: #33343d; --muted: #6a6c78; --ink: #14151a; /* Acento por defecto (Masters / WebMasters: blanco y negro → tinta) */ --accent: #14151a; /* relleno / vivo */ --accent-text: #14151a; /* legible sobre blanco */ --accent-contrast: #ffffff;/* texto sobre el acento */ --accent-on-dark: #ffffff; /* visible sobre el hero oscuro */ --accent-soft: rgba(20, 21, 26, 0.05); --accent-line: rgba(20, 21, 26, 0.24); /* Colores oficiales de división */ --c-web: #14151a; --c-site: #d9a62e; --c-design: #8b2fd1; --c-host: #d92b1f; --c-wp: #2b7fb5; --radius: 4px; --radius-sm: 3px; --shadow-sm: 0 1px 2px rgba(20, 21, 26, 0.04); --shadow: 0 12px 34px rgba(20, 21, 26, 0.08); --shadow-lg: 0 24px 60px rgba(20, 21, 26, 0.12); --font-head: "Poppins", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --header-h: 74px; } body[data-division="site"] { --accent: #d9a62e; --accent-text: #a67715; --accent-contrast: #1a1205; --accent-on-dark: #eab947; --accent-soft: rgba(217, 166, 46, 0.12); --accent-line: rgba(217, 166, 46, 0.5); } body[data-division="design"] { --accent: #8b2fd1; --accent-text: #8b2fd1; --accent-contrast: #ffffff; --accent-on-dark: #b877ea; --accent-soft: rgba(139, 47, 209, 0.09); --accent-line: rgba(139, 47, 209, 0.45); } body[data-division="host"] { --accent: #d92b1f; --accent-text: #d92b1f; --accent-contrast: #ffffff; --accent-on-dark: #ff6055; --accent-soft: rgba(217, 43, 31, 0.08); --accent-line: rgba(217, 43, 31, 0.45); } body[data-division="wp"] { --accent: #2b7fb5; --accent-text: #2b7fb5; --accent-contrast: #ffffff; --accent-on-dark: #5aa9dd; --accent-soft: rgba(43, 127, 181, 0.09); --accent-line: rgba(43, 127, 181, 0.45); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; padding-top: var(--header-h); } img { max-width: 100%; height: auto; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.14; margin: 0 0 0.5em; letter-spacing: -0.02em; color: var(--text); } h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); font-weight: 700; } h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); } h3 { font-size: 1.16rem; } p { margin: 0 0 1em; } a { color: inherit; text-decoration: none; } .muted { color: var(--muted); } .container { max-width: 1160px; margin: 0 auto; padding: 0 28px; } .section { padding: 96px 0; } .section-tight { padding: 60px 0; } .section-alt { background: var(--accent-soft); } .section-head { max-width: 680px; margin-bottom: 52px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head p { color: var(--muted); font-size: 1.06rem; margin: 0; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); } /* -------------------------------------------------------------------------- Botones (sin redondear) -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-head); font-size: 0.94rem; font-weight: 600; padding: 14px 30px; border-radius: 0; border: 1px solid transparent; cursor: pointer; transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .btn:hover { transform: translateY(-2px); } .btn-accent { background: var(--accent); color: var(--accent-contrast); } .btn-accent:hover { box-shadow: var(--shadow); } .btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; } .btn-ghost:hover { border-color: var(--text); } .btn-light { background: #ffffff; color: #14151a; } .btn-outline-light { border-color: rgba(255, 255, 255, 0.55); color: #ffffff; background: transparent; } .btn-outline-light:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.08); } .btn-small { padding: 10px 20px; font-size: 0.85rem; } /* CTA del header: compacto, destacado y animado */ .btn-cta { position: relative; overflow: hidden; padding: 11px 22px; font-size: 0.9rem; color: var(--accent-contrast); } /* Flecha con movimiento sutil en reposo */ .btn-cta::after { content: "→"; font-size: 1.05em; line-height: 1; animation: cta-nudge 2.4s ease-in-out infinite; transition: transform 0.18s ease; } .btn-cta:hover::after { animation: none; transform: translateX(5px); } /* Barrido de brillo al pasar el ratón */ .btn-cta::before { content: ""; position: absolute; top: 0; left: -75%; width: 55%; height: 100%; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.4), transparent ); transform: skewX(-20deg); transition: left 0.55s ease; pointer-events: none; } .btn-cta:hover::before { left: 135%; } .btn-cta:hover { box-shadow: var(--shadow); } @keyframes cta-nudge { 0%, 60%, 100% { transform: translateX(0); } 80% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .btn-cta::after { animation: none; } .btn-cta::before { display: none; } } /* -------------------------------------------------------------------------- Header global -------------------------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--header-h); background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .site-header.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); } .header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: inline-flex; align-items: center; flex-shrink: 0; } .brand img { height: 40px; width: auto; display: block; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); } /* Animación del logotipo al pasar el ratón: una elevación sutil, coherente con la estética técnica y sobria del sistema visual. */ .brand:hover img { transform: scale(1.06) translateY(-1px); } @media (prefers-reduced-motion: reduce) { .brand img { transition: none; } .brand:hover img { transform: none; } } /* El wordmark "Masters" es más ancho y bajo: se muestra algo mayor para equilibrar su peso visual con los logotipos de división. */ .brand img.brand-wordmark { height: 44px; } /* El archivo de WebMasters tiene menos aire interior que los demás logotipos. Se compensa con la misma proporción visual utilizada en las tarjetas de la portada, manteniendo intacta el área de interacción del enlace. */ .brand img.brand-logo-web { height: 22px; margin-block: 9px; } .main-nav { display: flex; align-items: center; gap: 28px; } .main-nav > a:not(.btn):not(.nav-shop-ico) { position: relative; font-size: 0.93rem; font-weight: 500; color: var(--text-2); transition: color 0.16s ease; } .main-nav > a:not(.btn):not(.nav-shop-ico):hover, .main-nav > a:not(.btn):not(.nav-shop-ico).active { color: var(--accent-text); } /* Subrayado animado: crece desde la izquierda al pasar el ratón o al estar en la página activa. No se aplica al icono de la tienda, que tiene su propio indicador de estado activo (ver .nav-shop-ico). */ .main-nav > a:not(.btn):not(.nav-shop-ico)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .main-nav > a:not(.btn):not(.nav-shop-ico):hover::after, .main-nav > a:not(.btn):not(.nav-shop-ico).active::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .main-nav > a:not(.btn):not(.nav-shop-ico)::after { transition: none; } } /* Iconos de sistemas en el menú: sustituyen al desplegable, uno junto al otro y con espacio suficiente para hacer clic, sin pasos adicionales. */ .nav-systems { display: flex; align-items: center; gap: 2px; } .nav-sys-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 6px; border-radius: var(--radius-sm); transition: background 0.16s ease, transform 0.16s ease; } .nav-sys-ico img { width: 100%; height: 100%; object-fit: contain; display: block; } .nav-sys-ico:hover, .nav-sys-ico:focus-visible { background: var(--bg-soft); transform: translateY(-1px); } /* Estado activo: el icono de la página actual (sistema o tienda) se distingue con un fondo suave, contorno y una sombra definida. */ .nav-sys-ico.active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line), 0 5px 14px rgba(20, 21, 26, 0.2); } /* Icono de la tienda: sustituye al enlace de texto "Tienda"; usa trazo currentColor para heredar el mismo comportamiento de color que el resto de enlaces del menú. */ .nav-shop-ico { color: var(--text-2); transition: background 0.16s ease, transform 0.16s ease, color 0.16s ease; } .nav-shop-ico svg { width: 100%; height: 100%; display: block; } .nav-shop-ico:hover, .nav-shop-ico:focus-visible, .nav-shop-ico.active { color: var(--accent-text); } /* Icono oficial de división (imagen original), reutilizado en el pie y la tienda; cada contexto ajusta su tamaño y, si hace falta, un fondo para que se lea sobre fondo oscuro. */ .div-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .div-ico img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Pie de página (fondo negro): una base clara conserva los colores originales de cada división y mantiene legibles las partes negras de los iconos. */ .footer-links .div-ico { width: 24px; height: 24px; padding: 2px; background: #ffffff; border-radius: var(--radius-sm); } /* Tienda: icono junto a la etiqueta de división */ .product-tag .div-ico { width: 18px; height: 18px; } .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); transition: transform 0.2s ease, opacity 0.2s ease; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 900px) { .nav-toggle { display: flex; } .main-nav { position: fixed; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 18px 28px 26px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } body.nav-open .main-nav { opacity: 1; visibility: visible; transform: translateY(0); } .main-nav > a:not(.btn) { padding: 11px 0; font-size: 1rem; } .nav-systems { gap: 10px; padding: 6px 0 4px; } .nav-sys-ico { width: 40px; height: 40px; } .main-nav .btn { margin-top: 12px; } } /* -------------------------------------------------------------------------- Hero de imagen a sangre -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 640px; display: flex; align-items: center; color: #ffffff; overflow: hidden; margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8, 9, 12, 0.9) 0%, rgba(8, 9, 12, 0.62) 46%, rgba(8, 9, 12, 0.2) 100%), linear-gradient(0deg, rgba(8, 9, 12, 0.55) 0%, rgba(8, 9, 12, 0) 45%); } .hero-content { position: relative; z-index: 2; width: 100%; padding-top: 60px; padding-bottom: 68px; } .hero-text { max-width: 660px; } .hero h1 { color: #ffffff; } .hero h1 .accent { color: var(--accent-on-dark); } .hero .eyebrow { color: rgba(255, 255, 255, 0.92); } .hero .eyebrow::before { background: var(--accent-on-dark); } .hero-sub { font-size: 1.16rem; line-height: 1.6; color: rgba(255, 255, 255, 0.86); max-width: 560px; margin-bottom: 34px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; } /* Hero sencillo sin imagen (tienda, páginas internas) */ .hero-plain { color: var(--text); min-height: 0; margin-top: 0; padding: 84px 0 44px; background: var(--bg-soft); border-bottom: 1px solid var(--line); } .hero-plain .hero-content { padding: 0; } .hero-plain .eyebrow { color: var(--accent-text); } .hero-plain .eyebrow::before { background: var(--accent); } .hero-plain h1 { color: var(--text); } .hero-plain .hero-sub { color: var(--muted); } @media (max-width: 720px) { .hero { min-height: 560px; } .hero-sub { font-size: 1.06rem; } } /* -------------------------------------------------------------------------- Tarjetas y rejillas -------------------------------------------------------------------------- */ .grid { display: grid; gap: 22px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow); } .card h3 { margin-bottom: 9px; } .card p { color: var(--muted); font-size: 0.96rem; margin: 0; } .card .card-icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); margin-bottom: 20px; font-size: 1.25rem; } /* Tarjetas de división (portada) */ .division-card { display: flex; flex-direction: column; gap: 16px; position: relative; --dc: var(--c-web); border-top: 3px solid var(--dc); } .division-card:hover { border-color: var(--line-strong); } .division-card .division-logo { height: 44px; width: auto; align-self: flex-start; object-fit: contain; } /* El archivo de WebMasters tiene una proporción mucho más ancha que el resto. Se reduce dentro del mismo espacio vertical para igualar su escala visual. */ .division-card .division-logo-web { height: 24px; margin-block: 10px; } .division-card p { flex: 1; } .division-card .division-link { font-family: var(--font-head); font-size: 0.88rem; font-weight: 600; color: var(--dc); display: inline-flex; align-items: center; gap: 6px; transition: gap 0.16s ease; } .division-card .division-link::after { content: "→"; } .division-card:hover .division-link { gap: 11px; } .division-card .badge { position: absolute; top: 22px; right: 22px; } .badge { display: inline-block; font-family: var(--font-head); font-size: 0.67rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 11px; } .badge-accent { color: var(--accent-text); border-color: var(--accent-line); } /* -------------------------------------------------------------------------- Pasos / forma de trabajo -------------------------------------------------------------------------- */ .steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } @media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .steps { grid-template-columns: 1fr; } } .step { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; } .step::before { content: "0" counter(step); display: block; font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--accent-text); margin-bottom: 14px; letter-spacing: -0.02em; } .step h3 { font-size: 1.04rem; margin-bottom: 7px; } .step p { color: var(--muted); font-size: 0.93rem; margin: 0; } /* -------------------------------------------------------------------------- Bloques destacados -------------------------------------------------------------------------- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 52px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 44px; align-items: center; } @media (max-width: 900px) { .panel { grid-template-columns: 1fr; padding: 34px 28px; gap: 28px; } } .panel-accent { border-color: var(--accent-line); background: linear-gradient(135deg, var(--accent-soft), var(--surface) 60%); } .panel h2 { margin-bottom: 12px; } .panel p { color: var(--muted); margin-bottom: 0; } .panel p + .btn { margin-top: 22px; } .panel-visual { display: flex; justify-content: center; } .panel-visual img { max-height: 130px; width: auto; object-fit: contain; } /* Banda con imagen (tecnología HostMasters, etc.) */ .feature-split { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); } @media (max-width: 900px) { .feature-split { grid-template-columns: 1fr; } } .feature-split .feature-media { min-height: 340px; background-size: cover; background-position: center; } .feature-split .feature-body { padding: 48px; } @media (max-width: 900px) { .feature-split .feature-media { min-height: 240px; } .feature-split .feature-body { padding: 34px 28px; } } .cta-banner { position: relative; text-align: center; color: #ffffff; overflow: hidden; padding: 104px 28px; background-image: url("../../img/cta-bg.webp"); background-size: cover; background-position: center; } .cta-banner::before { content: ""; position: absolute; inset: 0; background: var(--ink); opacity: 0.86; z-index: 0; } .cta-banner::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 70% 90% at 50% 120%, var(--accent-soft), transparent); opacity: 0.5; } .cta-banner > * { position: relative; z-index: 2; } .cta-banner h2 { color: #ffffff; margin-bottom: 14px; } .cta-banner p { color: rgba(255, 255, 255, 0.78); max-width: 560px; margin: 0 auto 32px; } .cta-banner .hero-actions { justify-content: center; } /* Lista de comprobación */ .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .checklist li { display: flex; gap: 13px; align-items: flex-start; color: var(--text-2); } .checklist li::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 0.8rem; font-weight: 700; } /* Aviso informativo (HostMasters) */ .notice { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface); padding: 22px 26px; color: var(--muted); font-size: 0.98rem; } .notice strong { color: var(--text); } /* -------------------------------------------------------------------------- Tienda -------------------------------------------------------------------------- */ .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 0.85rem; font-weight: 500; color: var(--text-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0; padding: 10px 20px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .chip:hover { border-color: var(--text); } .chip.active { color: #ffffff; background: var(--ink); border-color: var(--ink); } /* Icono de división en el chip: chapa clara fija, se lee tanto en reposo como en el estado activo (fondo oscuro). */ .chip .div-ico { width: 18px; height: 18px; background: #ffffff; border-radius: var(--radius-sm); padding: 2px; } .product-card { display: flex; flex-direction: column; gap: 11px; --dc: var(--c-web); border-top: 3px solid var(--dc); /* Cada tarjeta ocupa solo el alto de su propio contenido: al desplegarse una con el ratón, no estira a sus vecinas de la misma fila. */ align-self: start; } .product-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dc); } .product-card h3 { margin: 0; } .product-card .product-desc { color: var(--muted); font-size: 0.95rem; margin: 0; } .product-price { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; margin: 8px 0 4px; letter-spacing: -0.02em; } .product-price .price-note { font-size: 0.76rem; font-weight: 500; color: var(--muted); margin-left: 7px; letter-spacing: 0; } /* Contenido ampliado de la tarjeta: los servicios se muestran completos desde el primer momento, tanto con ratón como en pantallas táctiles. */ .product-more-inner { display: flex; flex-direction: column; gap: 11px; } .product-includes { list-style: none; margin: 0 0 8px; padding: 0; color: var(--text-2); font-size: 0.89rem; display: grid; gap: 6px; } .product-includes li { padding-left: 16px; position: relative; } .product-includes li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--dc); } .tc-web { --dc: var(--c-web); } .tc-site { --dc: var(--c-site); } .tc-design { --dc: var(--c-design); } .tc-host { --dc: var(--c-host); } .tc-wp { --dc: var(--c-wp); } .tc-pack { --dc: #14151a; } .btn-add { align-self: flex-start; margin-top: 10px; } /* Cuando el producto ya está en el carrito, el botón se sustituye por esta confirmación: se ve de un vistazo y permite quitarlo sin abrir el cajón lateral. */ .product-in-cart { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .product-in-cart-label { font-family: var(--font-head); font-size: 0.82rem; font-weight: 600; color: var(--dc); } /* -------------------------------------------------------------------------- Configurador de presupuesto -------------------------------------------------------------------------- */ .budget-hero .hero-text { max-width: 980px; } .hero-plain.budget-hero { padding: 104px 0 70px; color: #ffffff; background-color: var(--ink); background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.48)), url("../../img/cta-bg.png"); background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.48)), image-set( url("../../img/cta-bg.webp") type("image/webp"), url("../../img/cta-bg.png") type("image/png") ); background-position: center; background-size: cover; border-bottom: 0; } .hero-plain.budget-hero h1 { color: #ffffff; } .hero-plain.budget-hero .eyebrow { color: rgba(255, 255, 255, 0.9); } .hero-plain.budget-hero .eyebrow::before { background: #ffffff; } .budget-hero .hero-sub { max-width: 820px; font-size: 1.12rem; color: rgba(255, 255, 255, 0.82); } .budget-hero .container, .budget-section .container { max-width: 1240px; } .budget-section { padding-top: 54px; background: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 42px 42px; background-position: center top; } .budget-section > .container { position: relative; } .budget-steps { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border: 1px solid var(--line); margin-bottom: 44px; box-shadow: var(--shadow-sm); } .budget-step { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 0 13px; align-items: center; min-width: 0; padding: 18px 22px; border-right: 1px solid var(--line); } .budget-step:last-child { border-right: 0; } .budget-step > span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); color: var(--muted); font-family: var(--font-head); font-size: 0.82rem; font-weight: 700; } .budget-step.is-active > span { color: #fff; background: var(--ink); border-color: var(--ink); } .budget-step strong { font-family: var(--font-head); font-size: 0.94rem; line-height: 1.35; } .budget-step small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; } .budget-builder { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 34px; align-items: start; } .budget-choices { min-width: 0; background: var(--surface); border: 1px solid var(--line); padding: 38px; box-shadow: var(--shadow-sm); } .budget-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line); } .budget-section-head h2 { margin: 5px 0 8px; font-size: clamp(1.55rem, 3vw, 2.05rem); } .budget-section-head p { max-width: 610px; margin: 0; color: var(--muted); font-size: 1rem; } .budget-selection-count { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 88px; padding: 10px 14px; background: var(--bg-soft); border: 1px solid var(--line); } .budget-selection-count strong { color: var(--text); font-family: var(--font-head); font-size: 1.4rem; line-height: 1; } .budget-selection-count span { margin-top: 4px; color: var(--muted); font-size: 0.68rem; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.06em; } .service-builder { display: grid; gap: 4px; } .need-group { padding: 34px 0; border-bottom: 1px solid var(--line); } .need-group:last-child { padding-bottom: 0; border-bottom: 0; } .need-group-head { display: grid; grid-template-columns: 42px 1fr; gap: 15px; align-items: start; margin-bottom: 20px; } .need-number { padding-top: 2px; color: var(--muted); font-family: var(--font-head); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; } .need-group-head h3 { margin: 0 0 5px; font-size: 1.22rem; } .need-group-head p { max-width: 620px; margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.55; } .need-note { display: inline-block; margin-top: 8px; padding: 3px 8px; color: var(--text-2); background: var(--bg-soft); border: 1px solid var(--line); font-size: 0.68rem; line-height: 1.4; } .service-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-left: 57px; } .service-option-wrap { display: flex; flex-direction: column; min-width: 0; } .service-option { --dc: var(--c-web); position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 258px; padding: 20px 20px 18px; background: var(--surface); border: 1px solid var(--line-strong); border-top: 3px solid var(--dc); cursor: pointer; transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; } .service-option:hover { border-right-color: var(--dc); border-bottom-color: var(--dc); border-left-color: var(--dc); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .service-option:focus-within { outline: 3px solid color-mix(in srgb, var(--dc) 24%, transparent); outline-offset: 2px; } .service-option.is-selected { border-right-color: var(--dc); border-bottom-color: var(--dc); border-left-color: var(--dc); background: color-mix(in srgb, var(--dc) 4%, white); box-shadow: 0 0 0 1px var(--dc); } .service-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .service-check { position: absolute; top: 15px; right: 15px; display: grid; place-items: center; width: 24px; height: 24px; color: transparent; background: var(--surface); border: 1px solid var(--line-strong); } .service-check svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; } .service-option.is-selected .service-check { color: #fff; background: var(--dc); border-color: var(--dc); } .service-option-top { display: flex; justify-content: space-between; align-items: center; gap: 34px; margin-bottom: 14px; } .service-division { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--dc); font-family: var(--font-head); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .service-division .div-ico { width: 17px; height: 17px; } .service-price { padding-right: 30px; white-space: nowrap; font-family: var(--font-head); font-size: 0.9rem; line-height: 1.2; text-align: right; } .service-price small { display: block; margin-top: 2px; color: var(--muted); font-family: var(--font-body); font-size: 0.56rem; font-weight: 500; } .service-name { display: block; padding-right: 8px; font-family: var(--font-head); font-size: 1.08rem; font-weight: 600; line-height: 1.35; } .service-info { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; color: var(--dc); background: var(--surface); border: 1px solid var(--dc); font-family: var(--font-head); font-size: 1rem; font-weight: 500; line-height: 1; transition: color .15s ease, background .15s ease, transform .15s ease; } @media (prefers-reduced-motion: reduce) { .service-info { transition: none; } } .service-desc { display: block; margin-top: 6px; color: var(--muted); font-size: 0.88rem; line-height: 1.48; } .service-deliverables { display: block; margin-top: auto; padding-top: 15px; } .service-deliverables > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .service-deliverables ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: 0.79rem; line-height: 1.35; } .service-deliverables li { position: relative; padding-left: 12px; } .service-deliverables li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; background: var(--dc); } .budget-panel { position: sticky; top: calc(var(--header-h) + 20px); max-height: calc(100vh - var(--header-h) - 40px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); } .budget-panel::before { content: ""; display: block; height: 4px; background: linear-gradient( 90deg, var(--c-web) 0 20%, var(--c-site) 20% 40%, var(--c-design) 40% 60%, var(--c-wp) 60% 80%, var(--c-host) 80% 100% ); } .budget-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 24px 20px; border-bottom: 1px solid var(--line); } .budget-panel-head h2 { margin: 4px 0 0; font-size: 1.55rem; } .budget-live { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--muted); font-size: 0.67rem; white-space: nowrap; } .budget-live i { width: 7px; height: 7px; background: #1f9d55; border-radius: 50%; box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.12); } .budget-empty { min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px 34px; text-align: center; } .budget-empty-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; color: var(--muted); background: var(--bg-soft); border: 1px dashed var(--line-strong); font-family: var(--font-head); font-size: 1.65rem; font-weight: 500; } .budget-empty h3 { margin-bottom: 8px; } .budget-empty p { max-width: 280px; margin: 0; color: var(--muted); font-size: 0.88rem; } #budgetContent { padding: 0 24px 24px; } .budget-block { padding: 20px 0; border-bottom: 1px solid var(--line); } .budget-block-label { display: block; margin-bottom: 3px; color: var(--muted); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } .budget-block h3 { margin: 0 0 12px; font-size: 1rem; } .budget-results { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .budget-results li { position: relative; padding-left: 21px; color: var(--text-2); font-size: 0.83rem; line-height: 1.5; } .budget-results li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #157347; font-weight: 700; } .budget-teams { display: flex; flex-wrap: wrap; gap: 7px; } .budget-team { --dc: var(--c-web); display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 6px; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--dc); font-family: var(--font-head); font-size: 0.7rem; font-weight: 600; } .budget-team-icon { display: grid; place-items: center; width: 17px; height: 17px; } .budget-team-icon img { display: block; max-width: 15px; max-height: 15px; } .budget-services-block { max-height: 245px; overflow-y: auto; padding-right: 4px; } .budget-service-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); } .budget-service-line:last-child { border-bottom: 0; } .budget-service-line > div:first-child { min-width: 0; } .budget-service-title { display: flex; align-items: center; gap: 6px; } .budget-service-line strong { display: block; font-family: var(--font-head); font-size: 0.76rem; line-height: 1.4; } .budget-service-line span { display: block; color: var(--muted); font-size: 0.7rem; } .budget-service-title .service-info-small { display: grid; flex: 0 0 18px; width: 18px; height: 18px; color: var(--dc); border-color: var(--dc); font-size: 0.72rem; cursor: help; } /* Cantidades: disponibles solo para piezas digitales y plugins a medida. */ .quantity-control { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .quantity-label, .quantity-unit { color: var(--muted); font-size: 0.68rem; line-height: 1.25; } .quantity-label { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .quantity-stepper { display: inline-grid; grid-template-columns: 34px 38px 34px; height: 34px; background: var(--surface); border: 1px solid var(--line-strong); } .quantity-stepper button, .quantity-stepper output { display: grid; place-items: center; min-width: 0; padding: 0; color: var(--text); background: transparent; border: 0; font: inherit; line-height: 1; } .quantity-stepper button { cursor: pointer; font-size: 1.1rem; } .quantity-stepper button:first-child { border-right: 1px solid var(--line); } .quantity-stepper button:last-child { border-left: 1px solid var(--line); } .quantity-stepper button:hover:not(:disabled), .quantity-stepper button:focus-visible { color: #fff; background: var(--ink); outline: none; } .quantity-stepper button:disabled { color: var(--line-strong); cursor: not-allowed; } .quantity-stepper output { font-family: var(--font-head); font-size: 0.84rem; font-weight: 700; } .quantity-control-card { justify-content: space-between; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--line-strong); border-top: 0; opacity: 0.58; transition: opacity .15s ease, border-color .15s ease; } .service-option-wrap.is-selected .quantity-control-card { border-color: var(--text); opacity: 1; } .quantity-control-card .quantity-label { color: var(--text-2); } .quantity-control-budget, .quantity-control-checkout { margin-top: 8px; } .quantity-control-budget .quantity-label, .quantity-control-checkout .quantity-label { display: none; } .quantity-control-budget .quantity-stepper { grid-template-columns: 28px 32px 28px; height: 28px; } .quantity-control-budget .quantity-unit { font-size: 0.62rem; } .quantity-control-checkout .quantity-unit { font-size: 0.7rem; } .budget-service-price { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .budget-service-price strong { white-space: nowrap; } .budget-service-price button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; color: var(--muted); background: transparent; border: 1px solid transparent; cursor: pointer; font-size: 1rem; line-height: 1; } .budget-service-price button:hover, .budget-service-price button:focus-visible { color: var(--c-host); border-color: var(--line); } .budget-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 22px 0 18px; } .budget-total span, .budget-total small { display: block; } .budget-total span { font-family: var(--font-head); font-size: 0.84rem; font-weight: 600; } .budget-total small { margin-top: 2px; color: var(--muted); font-size: 0.67rem; } .budget-total > strong { white-space: nowrap; font-family: var(--font-head); font-size: 1.75rem; letter-spacing: -0.04em; } .budget-checkout { display: flex; justify-content: space-between; width: 100%; } .budget-checkout svg { width: 19px; height: 19px; } .budget-reset { display: block; margin: 13px auto 0; } .budget-guarantee { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; padding-top: 15px; color: var(--muted); border-top: 1px solid var(--line); font-size: 0.68rem; line-height: 1.45; } .budget-guarantee svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; } .budget-help { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 34px; padding: 30px 34px; background: var(--ink); color: #fff; } .budget-help h2 { margin: 5px 0 6px; color: #fff; font-size: 1.4rem; } .budget-help p { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 0.88rem; } .budget-help .eyebrow { color: rgba(255, 255, 255, 0.52); } .budget-help .btn { flex: 0 0 auto; color: #fff; border-color: rgba(255, 255, 255, 0.45); } .budget-help .btn:hover { background: #fff; color: var(--ink); border-color: #fff; } .budget-mobile-bar { position: fixed; z-index: 75; right: 0; bottom: 0; left: 0; display: none; align-items: stretch; gap: 10px; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--line-strong); box-shadow: 0 -12px 30px rgba(20, 21, 26, 0.12); } .budget-mobile-summary { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.25; } .budget-mobile-summary span { color: var(--muted); font-size: 0.7rem; } .budget-mobile-summary strong { font-family: var(--font-head); font-size: 1.05rem; } .budget-mobile-bar .btn { display: inline-flex; align-items: center; padding: 11px 18px; } .budget-mobile-bar[hidden], #budgetContent[hidden], #budgetEmpty[hidden] { display: none !important; } .checkout-plan-teams { padding: 0 0 18px; margin-bottom: 2px; border-bottom: 1px solid var(--line); } .checkout-plan-teams > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } @media (max-width: 1080px) { .budget-builder { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; } .budget-choices { padding: 28px; } .service-options { grid-template-columns: 1fr; } } @media (max-width: 880px) { .budget-builder { grid-template-columns: 1fr; } .budget-panel { position: static; max-height: none; overflow: visible; } .budget-mobile-bar { display: flex; } body.has-budget-mobile-bar { padding-bottom: 72px; } .budget-steps { margin-bottom: 28px; } .budget-step { grid-template-columns: 30px 1fr; padding: 14px; } .budget-step > span { width: 28px; height: 28px; } .budget-step small { display: none; } } @media (max-width: 620px) { .hero-plain.budget-hero { padding: 76px 0 54px; background-position: 58% center; } .budget-section { padding-top: 34px; padding-bottom: 64px; } .budget-steps { grid-template-columns: 1fr; } .budget-step { border-right: 0; border-bottom: 1px solid var(--line); } .budget-step:last-child { border-bottom: 0; } .budget-choices { padding: 22px 18px; } .budget-section-head { align-items: flex-start; } .budget-selection-count { min-width: 68px; padding: 8px; } .budget-selection-count span { display: none; } .need-group { padding: 28px 0; } .need-group-head { grid-template-columns: 32px 1fr; gap: 10px; } .service-options { margin-left: 0; } .service-option { min-height: 0; } .budget-panel-head, #budgetContent { padding-right: 18px; padding-left: 18px; } .budget-live { display: none; } .budget-help { align-items: flex-start; flex-direction: column; padding: 26px 22px; } .budget-help .btn { width: 100%; } } /* Botón flotante del carrito */ .cart-fab { position: fixed; right: 26px; bottom: 26px; z-index: 70; display: inline-flex; align-items: center; background: var(--ink); color: #ffffff; border: none; border-radius: 0; width: 54px; height: 54px; padding: 15px; font-family: var(--font-head); font-size: 0.92rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-lg); transition: transform 0.16s ease; } .cart-fab:hover { transform: translateY(-2px); } .cart-fab > svg { width: 24px; height: 24px; } .cart-count { position: absolute; top: -8px; right: -8px; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 999px; background: #ffffff; color: var(--ink); font-size: 0.78rem; padding: 0 6px; } /* Cajón lateral del carrito */ .cart-overlay { position: fixed; inset: 0; background: rgba(20, 21, 26, 0.4); z-index: 80; opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s; } .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100vw); background: var(--bg); border-left: 1px solid var(--line); z-index: 90; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.26s ease; box-shadow: var(--shadow-lg); } body.cart-open .cart-overlay { opacity: 1; visibility: visible; } body.cart-open .cart-drawer { transform: translateX(0); } .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; border-bottom: 1px solid var(--line); } .cart-head h3 { margin: 0; } .cart-head-actions { display: inline-flex; align-items: center; gap: 8px; } .cart-store-link, .cart-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 1px solid transparent; color: var(--muted); transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease; } .cart-store-link svg { width: 21px; height: 21px; } .cart-store-link:hover, .cart-store-link:focus-visible { color: var(--text); background: var(--bg-soft); border-color: var(--line); } .cart-close { border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; } .cart-close:hover { color: var(--text); } .cart-items { flex: 1; overflow-y: auto; padding: 20px 28px; display: flex; flex-direction: column; gap: 14px; } .cart-empty { color: var(--muted); text-align: center; margin-top: 44px; } .cart-item { display: flex; justify-content: space-between; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px 17px; } .cart-item-name { font-family: var(--font-head); font-size: 0.94rem; font-weight: 600; } .cart-item-division { font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .cart-item-desc { font-size: 0.82rem; color: var(--muted); margin: 4px 0 0; line-height: 1.45; } .cart-item-price { font-family: var(--font-head); font-weight: 600; white-space: nowrap; } .cart-item-remove { background: none; border: none; color: var(--muted); font-size: 0.8rem; cursor: pointer; padding: 0; margin-top: 6px; text-decoration: underline; } .cart-item-remove:hover { color: var(--c-host); } .cart-foot { border-top: 1px solid var(--line); padding: 22px 28px 28px; display: grid; gap: 13px; } .cart-total { display: flex; justify-content: space-between; font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; } .cart-foot .btn { width: 100%; } .cart-foot .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .cart-note { font-size: 0.8rem; color: var(--muted); margin: 0; text-align: center; } /* Modal genérico */ .modal-overlay { position: fixed; inset: 0; background: rgba(20, 21, 26, 0.5); z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; } .modal-overlay.open { display: flex; } .modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); max-width: 470px; width: 100%; max-height: calc(100vh - 48px); overflow-y: auto; padding: 36px; box-shadow: var(--shadow-lg); } .modal h3 { margin-bottom: 11px; } .modal p { color: var(--muted); font-size: 0.96rem; } .modal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } /* -------------------------------------------------------------------------- Sistema de compra avanzado -------------------------------------------------------------------------- */ /* Ítem del carrito: cada servicio se contrata una vez, sin cantidades */ .cart-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: start; } .cart-item-controls { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; margin-top: 4px; } /* Totales del carrito / resumen */ .sum-rows { display: grid; gap: 8px; } .sum-row { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--muted); } .sum-row.sum-discount { color: var(--accent-text); } .sum-row.total { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; color: var(--text); padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--line); } .cart-actions-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .link-quiet { background: none; border: none; color: var(--muted); font-size: 0.84rem; cursor: pointer; padding: 0; text-decoration: underline; } .link-quiet:hover { color: var(--c-host); } /* Estado de confirmación de "Vaciar carrito": un segundo clic borra de verdad, así no se pierde el carrito por un clic accidental. */ .link-quiet.confirming { color: var(--c-host); font-weight: 600; } /* Página de checkout */ .checkout-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: start; } @media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; gap: 28px; } } .checkout-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; } .checkout-summary { position: sticky; top: calc(var(--header-h) + 20px); } .checkout-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 16px 0; border-bottom: 1px solid var(--line); } .checkout-line:first-child { padding-top: 0; } .checkout-line-name { font-family: var(--font-head); font-weight: 600; font-size: 0.96rem; } .checkout-line-division { font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); } .checkout-line-desc { font-size: 0.82rem; color: var(--muted); margin: 4px 0 0; line-height: 1.45; } .checkout-line-price { font-family: var(--font-head); font-weight: 600; white-space: nowrap; } .checkout-line-controls { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; margin-top: 6px; } .checkout-totals { margin-top: 22px; } /* Cupón */ .coupon-row { display: flex; gap: 10px; margin: 22px 0; } .coupon-row input { flex: 1; text-transform: uppercase; } .coupon-msg { font-size: 0.84rem; margin: -12px 0 18px; } .coupon-msg.ok { color: #1c8f4e; } .coupon-msg.err { color: var(--c-host); } /* Formulario */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } } /* Formulario de una sola columna (modal de contacto) */ .contact-fields { display: grid; gap: 18px; } .form-field { display: flex; flex-direction: column; gap: 7px; } .form-field.full { grid-column: 1 / -1; } .form-field label { font-family: var(--font-head); font-size: 0.85rem; font-weight: 600; } .form-field label .req { color: var(--c-host); } .form-field input, .form-field textarea { font-family: var(--font-body); font-size: 0.95rem; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-field input:focus, .form-field textarea:focus, .coupon-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form-field input.invalid, .form-field textarea.invalid { border-color: var(--c-host); } .form-field .field-error { font-size: 0.8rem; color: var(--c-host); display: none; } .form-field.show-error .field-error { display: block; } .coupon-row input { font-family: var(--font-body); font-size: 0.95rem; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; } .form-consent { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0; font-size: 0.9rem; color: var(--muted); } .form-consent input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); } .form-consent a { color: var(--accent-text); text-decoration: underline; } .form-consent .field-error { display: none; margin-top: 6px; color: var(--c-host); font-size: 0.8rem; line-height: 1.4; } .form-consent.show-error .field-error { display: block; } .form-consent.show-error input { outline: 2px solid var(--c-host); outline-offset: 2px; } .pay-btn { width: 100%; padding: 16px; font-size: 1rem; } .pay-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 0.82rem; color: var(--muted); } .checkout-empty { text-align: center; padding: 60px 20px; } .checkout-empty h2 { margin-bottom: 12px; } .checkout-empty p { color: var(--muted); margin-bottom: 24px; } .checkout-steps { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 0.85rem; margin-bottom: 34px; flex-wrap: wrap; } .checkout-steps b { color: var(--text); } .checkout-steps .sep { color: var(--line-strong); } /* -------------------------------------------------------------------------- Panel de control de pedidos -------------------------------------------------------------------------- */ .panel-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--header-h); background: var(--ink); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .panel-topbar .header-inner { height: var(--header-h); } .panel-topbar .brand img { height: 26px; } .panel-badge { font-family: var(--font-head); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 4px 12px; margin-left: 12px; } .panel-topbar-actions { display: flex; align-items: center; gap: 14px; } .panel-topbar a, .panel-topbar button.link-light { color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; background: none; border: none; cursor: pointer; transition: color 0.15s ease; } .panel-topbar a:hover, .panel-topbar button.link-light:hover { color: #fff; } .panel-main { padding: 44px 0 96px; } /* KPIs */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; } @media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .kpi-grid { grid-template-columns: 1fr; } } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .kpi-label { font-size: 0.82rem; color: var(--muted); margin-bottom: 8px; } .kpi-value { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .kpi-sub { font-size: 0.8rem; color: var(--muted); margin-top: 8px; } /* Barra de herramientas */ .panel-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 22px; } .panel-search { flex: 1; min-width: 200px; max-width: 340px; font-family: var(--font-body); font-size: 0.92rem; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 11px 14px; } .panel-search:focus { outline: none; border-color: var(--text); } /* Tabla de pedidos */ .orders-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; background: var(--surface); } table.orders { width: 100%; border-collapse: collapse; min-width: 860px; } table.orders th, table.orders td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: 0.9rem; vertical-align: top; } table.orders th { font-family: var(--font-head); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--bg-soft); white-space: nowrap; } table.orders tbody tr:last-child td { border-bottom: none; } table.orders tbody tr:hover { background: var(--bg-soft); } .order-id { font-family: var(--font-head); font-weight: 600; } .order-date { color: var(--muted); font-size: 0.82rem; } .order-customer strong { display: block; } .order-customer span { display: block; color: var(--muted); font-size: 0.84rem; } .order-items-mini { color: var(--text-2); font-size: 0.85rem; max-width: 240px; } .order-money .t { font-family: var(--font-head); font-weight: 700; } .order-money .iva { color: var(--muted); font-size: 0.8rem; } .status-select { font-family: var(--font-body); font-size: 0.84rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; background: var(--surface); cursor: pointer; } .status-pill { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .st-nuevo { background: var(--c-wp); } .st-en_proceso { background: var(--c-site); } .st-completado { background: #1c8f4e; } .st-cancelado { background: var(--c-host); } .paid-tag { font-family: var(--font-head); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-strong); color: var(--muted); background: none; } .paid-tag.is-paid { color: #1c8f4e; border-color: rgba(28, 143, 78, 0.4); background: rgba(28, 143, 78, 0.08); } .order-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.84rem; text-decoration: underline; } .order-del:hover { color: var(--c-host); } .orders-empty { padding: 60px 24px; text-align: center; color: var(--muted); } .panel-note { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface); padding: 18px 22px; color: var(--muted); font-size: 0.9rem; margin-bottom: 32px; } .panel-note strong { color: var(--text); } /* Puerta de acceso */ .gate { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .gate-box { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; text-align: center; } .gate-box h1 { font-size: 1.5rem; margin-bottom: 8px; } .gate-box p { color: var(--muted); font-size: 0.92rem; margin-bottom: 22px; } .gate-box input { width: 100%; font-size: 0.95rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; } .gate-box input:focus { outline: none; border-color: var(--text); } .gate-err { color: var(--c-host); font-size: 0.85rem; min-height: 20px; margin-bottom: 8px; } /* -------------------------------------------------------------------------- Footer global · firma visual del ecosistema -------------------------------------------------------------------------- */ .site-footer { margin-top: 0; padding: 72px 0 0; color: var(--text-2); background: #ffffff; border-top: 1px solid var(--line); } .footer-grid { display: grid; grid-template-columns: minmax(220px, 1.45fr) repeat(5, minmax(88px, 1fr)); grid-template-rows: auto auto; gap: 18px; max-width: 1240px; padding-bottom: 46px; } /* Marca: ocupa la primera columna y acompaña visualmente las dos filas. */ .footer-grid > div:first-child { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; padding: 22px 32px 22px 0; border-right: 1px solid var(--line); } .footer-logo { width: auto; height: 38px; margin-bottom: 22px; } /* Se conserva para cabeceras oscuras del panel. En el footer blanco el logotipo recupera siempre su color original. */ .invert-dark { filter: invert(1); } .site-footer .invert-dark { filter: none; } .footer-claim { margin-bottom: 6px; color: var(--text); font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; } .site-footer .muted { max-width: 240px; color: var(--muted); } .site-footer h4 { margin: 0; color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; } /* El bloque "Sistemas" deja de comportarse como menú: sus cinco elementos pasan a ser cinco celdas hermanas dentro de la rejilla principal. */ .footer-grid > div:nth-child(2), .footer-grid > div:nth-child(2) .footer-links { display: contents; } .footer-grid > div:nth-child(2) > h4 { display: none; } .footer-links { margin: 0; padding: 0; list-style: none; } .footer-grid > div:nth-child(2) .footer-links li { --footer-division: var(--c-web); min-width: 0; } .footer-grid > div:nth-child(2) .footer-links li:nth-child(2) { --footer-division: var(--c-site); } .footer-grid > div:nth-child(2) .footer-links li:nth-child(3) { --footer-division: var(--c-design); } .footer-grid > div:nth-child(2) .footer-links li:nth-child(4) { --footer-division: var(--c-wp); } .footer-grid > div:nth-child(2) .footer-links li:nth-child(5) { --footer-division: var(--c-host); } .footer-grid > div:nth-child(2) .footer-links a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 154px; padding: 16px 10px 38px; color: transparent; background: transparent; border: 0; font-family: var(--font-head); font-size: 0; font-weight: 600; letter-spacing: 0.04em; text-align: center; transition: color .16s ease; } .footer-grid > div:nth-child(2) .footer-links a:hover, .footer-grid > div:nth-child(2) .footer-links a:focus-visible { color: var(--muted); outline: none; } .footer-grid > div:nth-child(2) .footer-links a::before, .footer-grid > div:nth-child(2) .footer-links a::after { position: absolute; right: 5px; bottom: 14px; left: 5px; color: var(--muted); font-family: var(--font-head); font-size: 0.66rem; font-weight: 600; line-height: 1.25; letter-spacing: 0.035em; text-align: center; transition: opacity .22s ease, transform .22s ease; } /* Nombre de la división: entra al hacer hover o al navegar con teclado. */ .footer-grid > div:nth-child(2) .footer-links a::before { opacity: 0; transform: translateY(5px); } /* Especialidad: visible en reposo. */ .footer-grid > div:nth-child(2) .footer-links a::after { opacity: 1; transform: translateY(0); } .footer-grid > div:nth-child(2) .footer-links li:nth-child(1) a::before { content: "WebMasters"; } .footer-grid > div:nth-child(2) .footer-links li:nth-child(2) a::before { content: "SiteMasters"; } .footer-grid > div:nth-child(2) .footer-links li:nth-child(3) a::before { content: "DesignMasters"; } .footer-grid > div:nth-child(2) .footer-links li:nth-child(4) a::before { content: "WPMasters"; } .footer-grid > div:nth-child(2) .footer-links li:nth-child(5) a::before { content: "HostMasters"; } .footer-grid > div:nth-child(2) .footer-links li:nth-child(1) a::after { content: "Diseño y desarrollo web"; } .footer-grid > div:nth-child(2) .footer-links li:nth-child(2) a::after { content: "Visibilidad digital"; } .footer-grid > div:nth-child(2) .footer-links li:nth-child(3) a::after { content: "Identidad y diseño"; } .footer-grid > div:nth-child(2) .footer-links li:nth-child(4) a::after { content: "WordPress a medida"; } .footer-grid > div:nth-child(2) .footer-links li:nth-child(5) a::after { content: "Infraestructura web"; } .footer-grid > div:nth-child(2) .footer-links a:hover::before, .footer-grid > div:nth-child(2) .footer-links a:focus-visible::before { opacity: 1; transform: translateY(0); } .footer-grid > div:nth-child(2) .footer-links a:hover::after, .footer-grid > div:nth-child(2) .footer-links a:focus-visible::after { opacity: 0; transform: translateY(-5px); } .footer-grid > div:nth-child(2) .footer-links .div-ico { display: grid; place-items: center; width: clamp(62px, 6vw, 82px); height: clamp(62px, 6vw, 82px); padding: 0; background: transparent; border-radius: 0; filter: drop-shadow(0 0 0 transparent); transform: scale(1); transform-origin: center; transition: filter .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1); } .footer-grid > div:nth-child(2) .footer-links .div-ico img { display: block; width: 100%; height: 100%; object-fit: contain; } .footer-grid > div:nth-child(2) .footer-links a:hover .div-ico, .footer-grid > div:nth-child(2) .footer-links a:focus-visible .div-ico { filter: drop-shadow(3px 4px 0 rgba(106, 108, 120, .12)); transform: scale(1.06); } @media (prefers-reduced-motion: reduce) { .footer-grid > div:nth-child(2) .footer-links .div-ico, .footer-grid > div:nth-child(2) .footer-links a::before, .footer-grid > div:nth-child(2) .footer-links a::after { transition: none; } } /* El antiguo bloque de navegación del ecosistema desaparece. */ .footer-grid > div:nth-child(3) { display: none; } /* Contacto, en una línea independiente bajo las cinco divisiones. */ .footer-grid > div:nth-child(4) { grid-column: 2 / -1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0 0; border-top: 1px solid var(--line); } .footer-grid > div:nth-child(4) .footer-links { display: block; } .footer-grid > div:nth-child(4) .footer-links a { color: var(--text); font-family: var(--font-head); font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 600; transition: color .15s ease; } .footer-grid > div:nth-child(4) .footer-links a:hover, .footer-grid > div:nth-child(4) .footer-links a:focus-visible { color: var(--accent-text); outline: none; } /* Redes a la izquierda, copyright al centro y enlaces legales a la derecha. */ .footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 24px; padding: 24px 28px; color: var(--muted); background: var(--surface-2); border-top: 1px solid var(--line); font-size: 0.85rem; } .footer-copyright { justify-self: center; text-align: center; } .footer-socials { justify-self: start; display: inline-flex; align-items: center; gap: 10px; } .footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--text-2); border: 1px solid var(--line-strong); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .footer-socials a:hover, .footer-socials a:focus-visible { color: #ffffff; border-color: var(--ink); background: var(--ink); } .footer-socials svg { width: 17px; height: 17px; } @media (max-width: 980px) { .footer-grid { grid-template-columns: repeat(5, minmax(90px, 1fr)); } .footer-grid > div:first-child { grid-column: 1 / -1; grid-row: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 0 0 28px; border-right: 0; border-bottom: 1px solid var(--line); } .footer-grid > div:first-child .footer-logo { flex: 0 0 auto; margin-bottom: 0; } .footer-grid > div:first-child .footer-claim, .footer-grid > div:first-child .muted { margin-bottom: 0; } .footer-grid > div:nth-child(4) { grid-column: 1 / -1; grid-row: auto; } } @media (max-width: 640px) { .site-footer { padding-top: 52px; } .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .footer-grid > div:first-child { align-items: flex-start; flex-direction: column; gap: 4px; } .footer-grid > div:first-child .footer-logo { margin-bottom: 14px; } .footer-grid > div:nth-child(2) .footer-links a { min-height: 126px; padding: 14px 6px 34px; } .footer-grid > div:nth-child(2) .footer-links .div-ico { width: 58px; height: 58px; } .footer-grid > div:nth-child(4) { align-items: flex-start; flex-direction: column; gap: 8px; padding-top: 22px; } } @media (max-width: 420px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; } .footer-copyright { justify-self: center; } .footer-socials { justify-self: center; } } /* -------------------------------------------------------------------------- Animación de aparición -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .btn-cta::after { transition: none; } } /* -------------------------------------------------------------------------- Banner de cookies (RGPD) -------------------------------------------------------------------------- */ .cookie-banner { position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 95; max-width: 560px; margin: 0 auto; background: var(--ink); color: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 22px 24px; display: none; } .cookie-banner.show { display: block; animation: cookie-in 0.4s ease; } @keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .cookie-banner p { font-size: 0.9rem; line-height: 1.55; margin: 0 0 16px; } .cookie-banner a { color: #ffffff; text-decoration: underline; } .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; } .cookie-actions .btn { padding: 10px 20px; font-size: 0.85rem; } @media (prefers-reduced-motion: reduce) { .cookie-banner.show { animation: none; } } /* -------------------------------------------------------------------------- Páginas legales -------------------------------------------------------------------------- */ .legal { padding: 72px 0 96px; } .legal-content { max-width: 760px; } .legal-content h2 { font-size: 1.4rem; margin: 44px 0 14px; } .legal-content h2:first-child { margin-top: 0; } .legal-content h3 { font-size: 1.08rem; margin: 26px 0 8px; } .legal-content p, .legal-content li { color: var(--text-2); font-size: 0.98rem; } .legal-content ul { padding-left: 20px; display: grid; gap: 6px; margin: 0 0 1em; } .legal-content a { color: var(--accent-text); text-decoration: underline; } .legal-content .legal-note { border-left: 3px solid var(--accent); background: var(--bg-soft); padding: 16px 20px; border-radius: var(--radius-sm); color: var(--muted); font-size: 0.9rem; } .legal-updated { color: var(--muted); font-size: 0.88rem; margin-bottom: 40px; } /* Enlaces legales en el extremo derecho del pie inferior. */ .footer-legal { display: inline-flex; flex-wrap: wrap; gap: 8px 14px; justify-content: flex-end; justify-self: end; } @media (max-width: 560px) { .footer-legal { justify-content: center; justify-self: center; } } .footer-legal a { color: var(--muted); transition: color 0.15s ease; } .footer-legal a:hover { color: var(--text); } /* -------------------------------------------------------------------------- Páginas individuales de servicio -------------------------------------------------------------------------- */ /* Hero y contexto de navegación */ .service-detail-hero { min-height: 700px; } .service-detail-hero .hero-content { padding-top: 82px; padding-bottom: 72px; } .service-detail-hero .hero-text { max-width: 720px; } .service-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; max-width: 820px; margin-bottom: 44px; color: rgba(255, 255, 255, 0.58); font-size: 0.82rem; line-height: 1.45; } .service-breadcrumb a { color: rgba(255, 255, 255, 0.84); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 0.16s ease; } .service-breadcrumb a:hover { color: #ffffff; text-decoration: underline; } .service-breadcrumb a:focus-visible, .service-detail-hero .btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; } .service-hero-assurances { display: flex; flex-wrap: wrap; gap: 10px 24px; max-width: 720px; margin: 32px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.24); list-style: none; } .service-hero-assurances li { display: inline-flex; align-items: flex-start; gap: 8px; color: rgba(255, 255, 255, 0.82); font-size: 0.88rem; line-height: 1.45; } .service-hero-assurances li::before { content: "✓"; flex: 0 0 auto; color: var(--accent-on-dark); font-weight: 700; } /* Navegación interna: permanece bajo la cabecera global. */ .service-anchor-bar { position: sticky; top: var(--header-h); z-index: 50; background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px rgba(20, 21, 26, 0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .service-anchor-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 64px; } .service-anchor-links { display: flex; align-items: stretch; gap: clamp(18px, 2.8vw, 34px); min-width: 0; } .service-anchor-links a { position: relative; display: inline-flex; align-items: center; padding: 20px 0; color: var(--text-2); font-family: var(--font-head); font-size: 0.82rem; font-weight: 600; line-height: 1; white-space: nowrap; transition: color 0.16s ease; } .service-anchor-links a::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; } .service-anchor-links a:hover { color: var(--accent-text); } .service-anchor-links a:hover::after, .service-anchor-links a:focus-visible::after { transform: scaleX(1); } .service-anchor-links a:focus-visible { color: var(--accent-text); outline: 3px solid var(--accent-text); outline-offset: 4px; } .service-anchor-price { flex: 0 0 auto; color: var(--text); font-family: var(--font-head); font-size: 0.82rem; font-weight: 600; white-space: nowrap; } .service-anchor-bar ~ section[id] { scroll-margin-top: calc(var(--header-h) + 78px); } /* Resultado y ficha rápida */ .service-intro-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.75fr); gap: clamp(40px, 7vw, 84px); align-items: start; } .service-intro-copy { max-width: 720px; } .service-intro-copy p { color: var(--text-2); font-size: 1.04rem; } .service-intro-copy p:last-child { margin-bottom: 0; } .service-facts { align-self: start; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); box-shadow: var(--shadow); } .service-facts-head { padding: 28px 30px 24px; background: var(--accent-soft); border-bottom: 1px solid var(--line); } .service-facts-head > span { display: block; margin-bottom: 7px; color: var(--muted); font-family: var(--font-head); font-size: 0.69rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .service-facts-head > strong { display: block; color: var(--text); font-family: var(--font-head); font-size: clamp(1.65rem, 3vw, 2.1rem); line-height: 1.1; } .service-facts-head > small { display: block; margin-top: 7px; color: var(--muted); font-size: 0.76rem; } .service-fact { display: grid; grid-template-columns: minmax(90px, 0.72fr) minmax(0, 1.28fr); gap: 18px; align-items: baseline; padding: 17px 30px; border-bottom: 1px solid var(--line); } .service-fact > span { color: var(--muted); font-size: 0.78rem; } .service-fact > strong { color: var(--text-2); font-family: var(--font-head); font-size: 0.88rem; line-height: 1.4; text-align: right; } .service-facts > p { margin: 0; padding: 20px 30px 23px; color: var(--muted); font-size: 0.8rem; line-height: 1.55; } /* Entregables */ .service-deliverable-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .service-deliverable { position: relative; min-width: 0; min-height: 230px; padding: 30px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--accent-line); } .service-deliverable-number { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 34px; margin-bottom: 28px; padding: 5px 9px; color: var(--accent-text); background: var(--accent-soft); font-family: var(--font-head); font-size: 0.77rem; font-weight: 700; letter-spacing: 0.08em; } .service-deliverable h3 { margin-bottom: 10px; } .service-deliverable p { margin: 0; color: var(--muted); font-size: 0.93rem; } .service-feature .feature-body > p { color: var(--muted); } .service-feature .feature-body .checklist { margin-top: 26px; } .service-feature .feature-media { background-position: center; } .service-process .step { border-top: 2px solid var(--accent-line); } /* Alcance y claridad comercial */ .service-clarity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .service-clarity-card { min-width: 0; padding: 34px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); } .service-clarity-card:nth-child(2) { border-top-color: var(--line-strong); } .service-clarity-kicker { display: block; margin-bottom: 12px; color: var(--accent-text); font-family: var(--font-head); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .service-clarity-card:nth-child(2) .service-clarity-kicker { color: var(--muted); } .service-clarity-card h3 { margin-bottom: 20px; } .service-clarity-card ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .service-clarity-card li { display: flex; gap: 11px; color: var(--text-2); font-size: 0.93rem; } .service-clarity-card li::before { content: "→"; flex: 0 0 auto; color: var(--accent-text); font-weight: 700; } .service-clarity-card:nth-child(2) li::before { content: "—"; color: var(--muted); } .service-scope { display: grid; grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 72px); align-items: start; margin-top: 42px; padding: 46px; color: rgba(255, 255, 255, 0.78); background: var(--ink); border-top: 3px solid var(--accent); box-shadow: var(--shadow-lg); } .service-scope-head { min-width: 0; } .service-scope .eyebrow { color: rgba(255, 255, 255, 0.74); } .service-scope .eyebrow::before { background: var(--accent-on-dark); } .service-scope h2 { margin-bottom: 0; color: #ffffff; } .service-scope dl { margin: 0; } .service-scope dl > div { display: grid; grid-template-columns: minmax(105px, 0.45fr) minmax(0, 1fr); gap: 24px; padding: 17px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .service-scope dl > div:first-child { padding-top: 0; } .service-scope dl > div:last-child { padding-bottom: 0; border-bottom: 0; } .service-scope dt { color: rgba(255, 255, 255, 0.54); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .service-scope dd { margin: 0; color: #ffffff; font-size: 0.94rem; line-height: 1.5; } /* Qué ocurre después de comprar */ .service-after-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .service-after { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; align-items: start; min-width: 0; padding: 26px; background: var(--surface); border: 1px solid var(--line); } .service-after > span { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; color: var(--accent-text); background: var(--accent-soft); font-family: var(--font-head); font-size: 0.84rem; font-weight: 700; } .service-after h3 { margin-bottom: 7px; font-size: 1.02rem; } .service-after p { margin: 0; color: var(--muted); font-size: 0.91rem; } .service-purchase-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); } .service-purchase-actions .btn:focus-visible, .service-faq-layout .btn:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; } /* Preguntas frecuentes */ .service-faq-layout { display: grid; grid-template-columns: minmax(260px, 0.68fr) minmax(0, 1.32fr); gap: clamp(40px, 7vw, 86px); align-items: start; } .service-faq-layout > .section-head { margin-bottom: 0; } .service-faq-layout > .section-head .btn { margin-top: 18px; } .service-faq-list { background: var(--surface); border: 1px solid var(--line); } .service-faq-item + .service-faq-item { border-top: 1px solid var(--line); } .service-faq-item summary { position: relative; padding: 23px 66px 23px 26px; color: var(--text); font-family: var(--font-head); font-size: 0.98rem; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; transition: color 0.16s ease, background 0.16s ease; } .service-faq-item summary::-webkit-details-marker { display: none; } .service-faq-item summary::after { content: "+"; position: absolute; top: 50%; right: 26px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--accent-text); background: var(--accent-soft); font-size: 1.16rem; line-height: 1; transform: translateY(-50%); } .service-faq-item[open] summary { color: var(--accent-text); } .service-faq-item[open] summary::after { content: "−"; } .service-faq-item summary:hover { background: var(--surface-2); } .service-faq-item summary:focus-visible { outline: 3px solid var(--accent-text); outline-offset: -3px; } .service-faq-item > p { margin: 0; padding: 0 66px 25px 26px; color: var(--muted); font-size: 0.94rem; } /* Servicios relacionados */ .service-related-card { display: flex; flex-direction: column; min-height: 100%; } .service-related-card > p { flex: 1; } .service-related-card > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); } .service-related-card > div:last-child > span { flex: 0 0 auto; color: var(--text); font-family: var(--font-head); font-size: 0.9rem; font-weight: 600; white-space: nowrap; } .service-related-card .card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-family: var(--font-head); font-size: 0.84rem; font-weight: 600; transition: gap 0.16s ease, color 0.16s ease; } .service-related-card .card-link::after { content: "→"; } .service-related-card .card-link:hover { gap: 10px; } .service-related-card .card-link:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 4px; } .service-related-card:focus-within { border-color: var(--accent-line); } @media (prefers-reduced-motion: reduce) { .service-breadcrumb a, .service-anchor-links a, .service-anchor-links a::after, .service-faq-item summary, .service-related-card .card-link { transition: none; } } @media (max-width: 900px) { .service-detail-hero { min-height: 660px; } .service-detail-hero .hero-content { padding-top: 70px; padding-bottom: 62px; } .service-anchor-inner { min-height: 60px; } .service-anchor-links { width: 100%; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-inline: contain; } .service-anchor-price { display: none; } .service-intro-grid, .service-faq-layout { grid-template-columns: 1fr; gap: 38px; } .service-facts { width: 100%; } .service-deliverable-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service-scope { grid-template-columns: 1fr; gap: 32px; } .service-faq-layout > .section-head { max-width: 680px; } } @media (max-width: 640px) { .service-detail-hero { min-height: 620px; } .service-detail-hero .hero-content { padding-top: 52px; padding-bottom: 52px; } .service-breadcrumb { gap: 5px; margin-bottom: 32px; font-size: 0.75rem; } .service-detail-hero .hero-actions, .service-detail-hero .hero-actions .btn { width: 100%; } .service-hero-assurances { display: grid; gap: 9px; margin-top: 26px; padding-top: 18px; } .service-anchor-inner { padding-right: 20px; padding-left: 20px; } .service-anchor-links { gap: 22px; } .service-anchor-links a { padding: 18px 0; font-size: 0.78rem; } .service-anchor-bar ~ section[id] { scroll-margin-top: calc(var(--header-h) + 70px); } .service-facts-head, .service-facts > p { padding-right: 24px; padding-left: 24px; } .service-fact { grid-template-columns: 1fr; gap: 4px; padding: 15px 24px; } .service-fact > strong { text-align: left; } .service-deliverable-grid, .service-clarity-grid, .service-after-grid { grid-template-columns: 1fr; } .service-deliverable { min-height: 0; padding: 26px; } .service-deliverable-number { margin-bottom: 22px; } .service-clarity-card { padding: 28px 26px; } .service-scope { margin-top: 30px; padding: 30px 26px; } .service-scope dl > div { grid-template-columns: 1fr; gap: 6px; padding: 15px 0; } .service-after { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px; } .service-after > span { width: 44px; height: 44px; } .service-purchase-actions { flex-direction: column; } .service-purchase-actions .btn { width: 100%; } .service-faq-item summary { padding: 21px 58px 21px 22px; } .service-faq-item summary::after { right: 20px; } .service-faq-item > p { padding: 0 22px 23px; } .service-related-card > div:last-child { align-items: flex-start; flex-direction: column; gap: 10px; } } /* Enlaces hacia el detalle desde las landings de división y la tienda. */ .service-overview-card { display: flex; flex-direction: column; min-height: 100%; } .service-overview-card > p { flex: 1; } .service-overview-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); } .service-overview-footer > span { color: var(--text); font-family: var(--font-head); font-size: 0.78rem; font-weight: 600; } .service-overview-footer .card-link, .service-checkout-details { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-family: var(--font-head); font-size: 0.8rem; font-weight: 600; transition: gap 0.16s ease, color 0.16s ease; } .service-overview-footer .card-link::after { content: "→"; } .service-overview-footer .card-link:hover, .service-checkout-details:hover { gap: 10px; } .service-overview-footer .card-link:focus-visible, .service-option-details:focus-visible, .service-checkout-details:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; } .service-option-details { --dc: var(--c-web); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 20px; color: var(--dc); background: var(--surface-2); border: 1px solid var(--line-strong); border-top: 0; font-family: var(--font-head); font-size: 0.76rem; font-weight: 600; transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease; } .service-option-details:hover { color: var(--accent-contrast); background: var(--dc); border-color: var(--dc); } .service-option-details.tc-site:hover { color: #1a1205; } .service-option-details + .quantity-control-card { border-top: 0; } .budget-service-title a.service-info-small { cursor: pointer; } .budget-service-title a.service-info-small:hover { color: #ffffff; background: var(--dc); } .budget-service-title a.service-info-small.tc-site:hover { color: #1a1205; } .budget-service-title a.service-info-small:focus-visible { outline: 2px solid var(--dc); outline-offset: 2px; } .service-checkout-details { width: fit-content; margin: 8px 0 2px; } .service-checkout-details span { transition: transform 0.16s ease; } .service-checkout-details:hover span { transform: translateX(4px); } .checkout-validation-note { margin: 18px 0 22px; padding: 18px 20px; color: var(--text-2); background: rgba(43, 127, 181, 0.08); border: 1px solid rgba(43, 127, 181, 0.32); border-left: 3px solid var(--c-wp); } .checkout-validation-note strong { display: block; color: var(--text); font-family: var(--font-head); font-size: 0.9rem; } .checkout-validation-note p { margin: 6px 0 10px; color: var(--muted); font-size: 0.82rem; line-height: 1.5; } .checkout-validation-note ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } .checkout-validation-note a { display: inline-flex; align-items: center; gap: 6px; color: var(--c-wp); font-family: var(--font-head); font-size: 0.78rem; font-weight: 600; } .checkout-validation-note a:focus-visible { outline: 3px solid var(--c-wp); outline-offset: 3px; } #need-web, #need-visibility, #need-brand, #need-wordpress { scroll-margin-top: calc(var(--header-h) + 20px); } .pay-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } @media (prefers-reduced-motion: reduce) { .service-overview-footer .card-link, .service-option-details, .service-checkout-details, .service-checkout-details span { transition: none; } } @media (max-width: 640px) { .service-overview-footer { align-items: flex-start; flex-direction: column; } }