/* ========================================================= CentralWeb - Estilos principales Diseno minimalista en azul profesional. Los colores se controlan con variables desde el Customizer. ========================================================= */ :root { /* Valores de respaldo (el Customizer los sobreescribe en ) */ --cw-primary: #1d4ed8; --cw-primary-dark: #1a45be; --cw-accent: #38bdf8; --cw-navy: #0f172a; --cw-text: #334155; --cw-muted: #64748b; --cw-bg: #ffffff; --cw-bg-alt: #f8fafc; --cw-border: #e2e8f0; --cw-white: #ffffff; --cw-whatsapp: #25d366; --cw-radius: 16px; --cw-radius-sm: 10px; --cw-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); --cw-shadow-lg: 0 24px 60px rgba(29, 78, 216, 0.18); --cw-max: 1140px; --cw-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ---------- Reset basico ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--cw-font); color: var(--cw-text); background: var(--cw-bg); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: var(--cw-primary); text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; } a:hover { color: var(--cw-primary-dark); } h1, h2, h3, h4 { color: var(--cw-navy); line-height: 1.2; margin: 0 0 0.4em; font-weight: 700; letter-spacing: -0.02em; } p { margin: 0 0 1rem; } /* ---------- Contenedor ---------- */ .cw-container { width: 100%; max-width: var(--cw-max); margin: 0 auto; padding: 0 24px; } .cw-container--narrow { max-width: 760px; } .cw-section { padding: 96px 0; } .cw-section__head { text-align: center; max-width: 640px; margin: 0 auto 56px; } .cw-section__title { font-size: clamp(1.7rem, 3.5vw, 2.4rem); } .cw-section__subtitle { color: var(--cw-muted); font-size: 1.05rem; margin: 0; } /* ---------- Botones ---------- */ .cw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 0.98rem; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; line-height: 1; font-family: inherit; } .cw-btn:hover { transform: translateY(-2px); } .cw-btn--primary { background: var(--cw-primary); color: var(--cw-white); box-shadow: 0 10px 24px rgba(29, 78, 216, 0.25); } .cw-btn--primary:hover { background: var(--cw-primary-dark); color: var(--cw-white); } .cw-btn--ghost { background: rgba(255, 255, 255, 0.12); color: var(--cw-white); border-color: rgba(255, 255, 255, 0.4); } .cw-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); color: var(--cw-white); } .cw-btn--outline { background: transparent; color: var(--cw-primary); border-color: var(--cw-border); } .cw-btn--outline:hover { border-color: var(--cw-primary); color: var(--cw-primary-dark); } .cw-btn--lg { padding: 16px 32px; font-size: 1.05rem; } .cw-btn--block { width: 100%; } /* ---------- Encabezado / Nav ---------- */ .cw-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--cw-border); } .cw-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; } .cw-brand__link { display: inline-flex; align-items: center; } .cw-brand__name { font-size: 1.35rem; font-weight: 800; color: var(--cw-navy); letter-spacing: -0.03em; } .custom-logo-link { display: inline-flex; } .custom-logo { max-height: 48px; width: auto; } .cw-nav { display: flex; align-items: center; gap: 28px; } .cw-nav__list { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; } .cw-nav__list a { color: var(--cw-text); font-weight: 500; font-size: 0.98rem; } .cw-nav__list a:hover { color: var(--cw-primary); } .cw-nav__cta { padding: 10px 22px; } /* Boton hamburguesa */ .cw-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 8px; } .cw-nav-toggle span { display: block; height: 2px; width: 100%; background: var(--cw-navy); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } .cw-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .cw-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .cw-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Hero ---------- */ .cw-hero { position: relative; overflow: hidden; background: var(--cw-navy); color: var(--cw-white); padding: 120px 0 130px; text-align: center; } .cw-hero__bg { position: absolute; inset: 0; background: radial-gradient(900px circle at 80% -10%, color-mix(in srgb, var(--cw-accent) 30%, transparent), transparent 55%), radial-gradient(700px circle at 0% 110%, color-mix(in srgb, var(--cw-primary) 55%, transparent), transparent 50%), linear-gradient(160deg, var(--cw-navy), color-mix(in srgb, var(--cw-primary) 35%, var(--cw-navy))); z-index: 0; } .cw-hero__inner { position: relative; z-index: 1; max-width: 820px; } .cw-hero__eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; font-weight: 600; color: var(--cw-accent); margin-bottom: 18px; padding: 6px 16px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; } .cw-hero__title { color: var(--cw-white); font-size: clamp(2.1rem, 5.5vw, 3.6rem); font-weight: 800; margin-bottom: 20px; } .cw-hero__subtitle { color: rgba(255, 255, 255, 0.82); font-size: clamp(1rem, 2vw, 1.2rem); max-width: 620px; margin: 0 auto 36px; } .cw-hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ---------- Servicios ---------- */ .cw-services { background: var(--cw-bg); } .cw-services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .cw-service { background: var(--cw-bg-alt); border: 1px solid var(--cw-border); border-radius: var(--cw-radius); padding: 32px 26px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .cw-service:hover { transform: translateY(-4px); box-shadow: var(--cw-shadow); border-color: color-mix(in srgb, var(--cw-primary) 30%, var(--cw-border)); } .cw-service__num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--cw-primary) 12%, transparent); color: var(--cw-primary); font-weight: 700; margin-bottom: 18px; } .cw-service__title { font-size: 1.15rem; margin-bottom: 8px; } .cw-service__text { color: var(--cw-muted); font-size: 0.96rem; margin: 0; } /* ---------- Planes ---------- */ .cw-pricing { background: var(--cw-bg-alt); } .cw-pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; } .cw-plan { position: relative; display: flex; flex-direction: column; background: var(--cw-white); border: 1px solid var(--cw-border); border-radius: var(--cw-radius); padding: 36px 30px; box-shadow: var(--cw-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; } .cw-plan:hover { transform: translateY(-4px); } .cw-plan--featured { border: 2px solid var(--cw-primary); box-shadow: var(--cw-shadow-lg); transform: scale(1.03); } .cw-plan--featured:hover { transform: scale(1.03) translateY(-4px); } .cw-plan__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--cw-primary); color: var(--cw-white); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; white-space: nowrap; } .cw-plan__name { font-size: 1.3rem; margin-bottom: 14px; } .cw-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--cw-border); } .cw-plan__amount { font-size: 2.6rem; font-weight: 800; color: var(--cw-navy); letter-spacing: -0.03em; } .cw-plan__period { color: var(--cw-muted); font-size: 0.9rem; } .cw-plan__desc { color: var(--cw-muted); font-size: 0.96rem; } .cw-plan__features { list-style: none; margin: 8px 0 28px; padding: 0; display: grid; gap: 12px; flex-grow: 1; } .cw-plan__features li { position: relative; padding-left: 30px; font-size: 0.96rem; color: var(--cw-text); } .cw-plan__features li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--cw-primary) 15%, transparent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11px; } .cw-plan__btn { margin-top: auto; } /* ---------- Contacto ---------- */ .cw-contact { background: var(--cw-bg); } .cw-contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .cw-contact__text { color: var(--cw-muted); font-size: 1.05rem; margin-bottom: 28px; } .cw-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .cw-contact__list li { display: flex; flex-direction: column; gap: 2px; } .cw-contact__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cw-muted); font-weight: 600; } .cw-contact__list a, .cw-contact__list span:not(.cw-contact__label) { font-size: 1.1rem; font-weight: 600; color: var(--cw-navy); } .cw-contact__list a:hover { color: var(--cw-primary); } /* Formulario */ .cw-contact__form-wrap { background: var(--cw-bg-alt); border: 1px solid var(--cw-border); border-radius: var(--cw-radius); padding: 34px; box-shadow: var(--cw-shadow); } .cw-contact-form { display: grid; gap: 18px; } .cw-contact-form label { display: grid; gap: 7px; font-size: 0.9rem; font-weight: 600; color: var(--cw-navy); } .cw-contact-form input, .cw-contact-form select, .cw-contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--cw-border); border-radius: var(--cw-radius-sm); font-family: inherit; font-size: 0.98rem; color: var(--cw-text); background: var(--cw-white); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .cw-contact-form input:focus, .cw-contact-form select:focus, .cw-contact-form textarea:focus { outline: none; border-color: var(--cw-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cw-primary) 18%, transparent); } .cw-contact-form textarea { resize: vertical; } .cw-contact-form__note { font-size: 0.82rem; color: var(--cw-muted); text-align: center; margin: 0; } /* ---------- Footer ---------- */ .cw-footer { background: var(--cw-navy); color: rgba(255, 255, 255, 0.72); } .cw-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding: 64px 24px 40px; } .cw-footer__name { color: var(--cw-white); font-size: 1.3rem; font-weight: 800; } .cw-footer__desc { margin: 8px 0 0; max-width: 320px; font-size: 0.95rem; } .cw-footer__nav { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; } .cw-footer__nav a, .cw-footer__social a { color: rgba(255, 255, 255, 0.72); font-weight: 500; } .cw-footer__nav a:hover, .cw-footer__social a:hover { color: var(--cw-white); } .cw-footer__social { display: flex; gap: 16px; align-items: center; } .cw-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 20px 0; text-align: center; font-size: 0.88rem; } .cw-footer__bottom p { margin: 0; } /* ---------- Boton flotante WhatsApp ---------- */ .cw-whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 60px; height: 60px; border-radius: 50%; background: var(--cw-whatsapp); color: var(--cw-white) !important; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45); transition: transform 0.2s ease, box-shadow 0.2s ease; animation: cw-pulse 2.6s infinite; } .cw-whatsapp-float:hover { transform: scale(1.08); color: var(--cw-white); } @keyframes cw-pulse { 0% { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.5); } 70% { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45), 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0); } } /* ---------- Contenido generico (paginas/blog) ---------- */ .cw-page__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 24px; } .cw-post { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--cw-border); } /* ========================================================= Responsive ========================================================= */ @media (max-width: 960px) { .cw-services__grid { grid-template-columns: repeat(2, 1fr); } .cw-pricing__grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } .cw-plan--featured { transform: none; } .cw-plan--featured:hover { transform: translateY(-4px); } .cw-contact__inner { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 768px) { .cw-section { padding: 64px 0; } .cw-nav-toggle { display: flex; } .cw-nav { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--cw-white); border-bottom: 1px solid var(--cw-border); box-shadow: var(--cw-shadow); padding: 8px 0 16px; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .cw-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .cw-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .cw-nav__list li a { display: block; padding: 14px 24px; } .cw-nav__cta { margin: 12px 24px 0; text-align: center; } } @media (max-width: 540px) { .cw-services__grid { grid-template-columns: 1fr; } .cw-hero { padding: 90px 0 96px; } .cw-btn--lg { width: 100%; } .cw-hero__actions { flex-direction: column; } }