/* ═══════════════════════════════════════════════════════ PAGES.CSS — Sistema de páginas con TEMAS por página Cada página usa para cambiar el color de acento. Componentes variados para que ninguna página se vea igual a otra. WebClic Studio ═══════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────── TEMAS — acento por página (data-theme en ) --acc : color principal del acento --acc-d: variante oscura --acc-s: variante muy suave (fondos de íconos) --acc-g: gradiente característico del tema ──────────────────────────────────────────────── */ :root { --acc: #E0121B; --acc-d: #B50E15; --acc-s: #FEF2F2; --acc-g: linear-gradient(135deg, #E0121B, #B50E15); --ink: #0F172A; --ink-2: #334155; --muted: #64748B; --line: #EAECF0; --soft: #F8FAFC; } [data-theme="rojo"] { --acc:#E0121B; --acc-d:#B50E15; --acc-s:#FEF2F2; --acc-g:linear-gradient(135deg,#E0121B,#7F0A10); } [data-theme="azul"] { --acc:#2563EB; --acc-d:#1D4ED8; --acc-s:#EFF6FF; --acc-g:linear-gradient(135deg,#3B82F6,#1E3A8A); } [data-theme="indigo"] { --acc:#6366F1; --acc-d:#4338CA; --acc-s:#EEF2FF; --acc-g:linear-gradient(135deg,#818CF8,#3730A3); } [data-theme="teal"] { --acc:#0D9488; --acc-d:#0F766E; --acc-s:#F0FDFA; --acc-g:linear-gradient(135deg,#14B8A6,#0F766E); } [data-theme="verde"] { --acc:#16A34A; --acc-d:#15803D; --acc-s:#F0FDF4; --acc-g:linear-gradient(135deg,#22C55E,#15803D); } [data-theme="purpura"] { --acc:#9333EA; --acc-d:#7E22CE; --acc-s:#FAF5FF; --acc-g:linear-gradient(135deg,#A855F7,#6B21A8); } [data-theme="ambar"] { --acc:#D97706; --acc-d:#B45309; --acc-s:#FFFBEB; --acc-g:linear-gradient(135deg,#F59E0B,#B45309); } [data-theme="rosa"] { --acc:#DB2777; --acc-d:#BE185D; --acc-s:#FDF2F8; --acc-g:linear-gradient(135deg,#EC4899,#9D174D); } [data-theme="naranja"] { --acc:#EA580C; --acc-d:#C2410C; --acc-s:#FFF7ED; --acc-g:linear-gradient(135deg,#FB923C,#9A3412); } [data-theme="cian"] { --acc:#0891B2; --acc-d:#0E7490; --acc-s:#ECFEFF; --acc-g:linear-gradient(135deg,#06B6D4,#155E75); } [data-theme="slate"] { --acc:#475569; --acc-d:#1E293B; --acc-s:#F1F5F9; --acc-g:linear-gradient(135deg,#64748B,#0F172A); } /* La selección y enlaces toman el acento del tema */ ::selection { background: var(--acc); color:#fff; } .text-acc { color: var(--acc); } /* Offset global por topbar + navbar fijos */ .page-main { padding-top: calc(var(--nav-h) + var(--topbar-h)); } /* Utilidades de sección reusando main.css pero con acento variable */ .sec { padding: 96px 0; } @media (max-width:768px){ .sec { padding:64px 0; } } .sec--soft { background: var(--soft); } .sec--white { background:#fff; } .sec--ink { background:#0B0B0F; color:#fff; } .eyebrow-acc { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:var(--acc); margin-bottom:14px; } .eyebrow-acc::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--acc); } .h-sec { font-size:clamp(26px,3.4vw,40px); font-weight:900; line-height:1.14; letter-spacing:-0.02em; color:var(--ink); margin-bottom:14px; } .sec--ink .h-sec{ color:#fff; } .h-sec .text-acc{ color:var(--acc); } .p-lead{ font-size:17px; line-height:1.7; color:var(--muted); max-width:600px; } .center{ text-align:center; } .center .p-lead{ margin:0 auto; } /* Botones que toman acento (extienden .btn de main.css) */ .btn--acc { background:var(--acc); color:#fff; box-shadow:0 6px 20px -6px var(--acc); } .btn--acc:hover{ background:var(--acc-d); transform:translateY(-2px); } .btn--wa { background:#22C55E; color:#fff; box-shadow:0 6px 20px rgba(34,197,94,.32); } .btn--wa:hover{ background:#16A34A; transform:translateY(-2px); } .btn--ghost{ background:transparent; color:var(--ink-2); border:1.5px solid #D1D5DB; } .btn--ghost:hover{ border-color:#9CA3AF; background:#F9FAFB; } .btn--ink{ background:var(--ink); color:#fff; } .btn--ink:hover{ background:#000; transform:translateY(-2px); } .btn--light{ background:#fff; color:var(--acc); box-shadow:0 8px 30px rgba(0,0,0,.18); } .btn--light:hover{ transform:translateY(-2px); } /* Breadcrumb */ .crumbs{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:20px; flex-wrap:wrap; } .crumbs a{ color:inherit; transition:color .15s; } .crumbs a:hover{ color:var(--acc); } .crumbs span[aria-current]{ color:var(--acc); font-weight:600; } .crumbs__sep{ opacity:.5; } .on-dark .crumbs{ color:rgba(255,255,255,.55); } .on-dark .crumbs a:hover, .on-dark .crumbs span[aria-current]{ color:#fff; } /* ════════════════════════════════════════════ FEATURE LIST con check del acento ════════════════════════════════════════════ */ .flist{ display:grid; grid-template-columns:repeat(2,1fr); gap:13px 28px; } @media (max-width:640px){ .flist{ grid-template-columns:1fr; } } .flist li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--ink-2); line-height:1.5; } .flist li::before{ content:''; flex-shrink:0; width:22px; height:22px; margin-top:1px; border-radius:6px; background:var(--acc-s); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-position:center; background-repeat:no-repeat; background-size:12px; border:1px solid color-mix(in srgb, var(--acc) 30%, transparent); } /* ════════════════════════════════════════════ ICARDS (tarjetas con ícono) — varias formas ════════════════════════════════════════════ */ .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } @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; } } .icard{ background:#fff; border:1.5px solid var(--line); border-radius:20px; padding:28px; transition:border-color .2s, box-shadow .2s, transform .2s; } .icard:hover{ border-color:color-mix(in srgb,var(--acc) 40%,transparent); box-shadow:0 24px 50px -16px color-mix(in srgb,var(--acc) 30%,transparent); transform:translateY(-5px); } .icard__ico{ width:52px; height:52px; border-radius:14px; background:var(--acc-s); color:var(--acc); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px; transition:background .2s, transform .2s; } .icard:hover .icard__ico{ transform:scale(1.06) rotate(-3deg); } .icard h3{ font-size:17px; font-weight:800; color:var(--ink); margin-bottom:9px; } .icard p{ font-size:14px; color:var(--muted); line-height:1.65; } .icard__more{ margin-top:16px; font-size:13px; font-weight:700; color:var(--acc); display:inline-flex; align-items:center; gap:6px; } /* Variante numerada grande */ .icard--num{ position:relative; } .icard--num .num{ position:absolute; top:18px; right:22px; font-size:42px; font-weight:900; color:var(--acc-s); line-height:1; } /* ════════════════════════════════════════════ SPLIT texto + media ════════════════════════════════════════════ */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } @media (max-width:900px){ .split{ grid-template-columns:1fr; gap:36px; } } .split--rev .split__media{ order:-1; } @media (max-width:900px){ .split--rev .split__media{ order:0; } } .split__media img{ width:100%; border-radius:18px; box-shadow:0 36px 70px -24px rgba(16,24,40,.3); display:block; } .split__media--frame{ border-radius:18px; padding:14px; background:var(--acc-g); box-shadow:0 36px 70px -24px color-mix(in srgb,var(--acc) 50%,transparent); } .split__media--frame img{ border-radius:10px; box-shadow:none; } /* ════════════════════════════════════════════ STEPS — proceso (2 estilos) ════════════════════════════════════════════ */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } @media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr);} } @media (max-width:540px){ .steps{ grid-template-columns:1fr;} } .step{ padding:26px 22px; background:#fff; border:1.5px solid var(--line); border-radius:16px; position:relative; } .step__n{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:var(--acc-g); color:#fff; border-radius:13px; font-weight:900; font-size:16px; margin-bottom:16px; box-shadow:0 8px 20px -6px var(--acc); } .step h3{ font-size:16px; font-weight:800; color:var(--ink); margin-bottom:8px; } .step p{ font-size:13.5px; color:var(--muted); line-height:1.6; } /* Timeline horizontal (variante alternativa) */ .timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; } @media (max-width:900px){ .timeline{ grid-template-columns:1fr; gap:24px; } } .timeline::before{ content:''; position:absolute; top:21px; left:10%; right:10%; height:2px; background:linear-gradient(90deg,var(--acc),color-mix(in srgb,var(--acc) 20%,transparent)); } @media (max-width:900px){ .timeline::before{ display:none; } } .tl-item{ text-align:center; padding:0 14px; position:relative; } .tl-dot{ width:44px; height:44px; margin:0 auto 18px; border-radius:50%; background:#fff; border:3px solid var(--acc); color:var(--acc); display:flex; align-items:center; justify-content:center; font-weight:900; position:relative; z-index:1; box-shadow:0 6px 16px -4px var(--acc); } .tl-item h3{ font-size:15px; font-weight:800; color:var(--ink); margin-bottom:6px; } .tl-item p{ font-size:13px; color:var(--muted); line-height:1.55; } /* ════════════════════════════════════════════ FAQ ════════════════════════════════════════════ */ .faq{ max-width:760px; margin:0 auto; } .faq__item{ border:1.5px solid var(--line); border-radius:12px; margin-bottom:12px; background:#fff; overflow:hidden; transition:border-color .2s, box-shadow .2s; } .faq__item[open]{ border-color:color-mix(in srgb,var(--acc) 35%,transparent); box-shadow:0 12px 30px -14px color-mix(in srgb,var(--acc) 40%,transparent); } .faq__item summary{ list-style:none; cursor:pointer; padding:18px 22px; font-size:15.5px; font-weight:700; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:16px; } .faq__item summary::-webkit-details-marker{ display:none; } .faq__item summary::after{ content:'+'; font-size:22px; font-weight:400; color:var(--acc); transition:transform .2s; line-height:1; } .faq__item[open] summary::after{ transform:rotate(45deg); } .faq__item p{ padding:0 22px 20px; font-size:14.5px; color:var(--muted); line-height:1.7; } /* ════════════════════════════════════════════ CTA BAND (banda con gradiente del tema) ════════════════════════════════════════════ */ .cta-band{ background:var(--acc-g); border-radius:24px; padding:56px 48px; text-align:center; position:relative; overflow:hidden; } .cta-band::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.16),transparent 40%),radial-gradient(circle at 85% 80%,rgba(0,0,0,.2),transparent 45%); pointer-events:none; } .cta-band > *{ position:relative; z-index:1; } .cta-band h2{ font-size:clamp(24px,3.4vw,34px); font-weight:900; color:#fff; line-height:1.2; margin-bottom:12px; letter-spacing:-0.02em; } .cta-band p{ font-size:16px; color:rgba(255,255,255,.92); margin-bottom:28px; } /* ════════════════════════════════════════════ PLANES ════════════════════════════════════════════ */ .plans-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; } @media (max-width:900px){ .plans-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } } .plan{ display:flex; flex-direction:column; background:#fff; border:1.5px solid var(--line); border-radius:22px; padding:32px 28px; transition:.2s; } .plan:hover{ box-shadow:0 24px 60px rgba(16,24,40,.1); transform:translateY(-4px); } .plan--featured{ border-color:var(--acc); box-shadow:0 24px 60px -16px color-mix(in srgb,var(--acc) 45%,transparent); position:relative; } .plan__badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--acc); color:#fff; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 16px; border-radius:100px; } .plan__name{ font-size:18px; font-weight:800; color:var(--ink); margin-bottom:6px; } .plan__desc{ font-size:13.5px; color:var(--muted); margin-bottom:20px; min-height:38px; } .plan__price{ display:flex; align-items:baseline; gap:4px; margin-bottom:6px; } .plan__price .cur{ font-size:18px; font-weight:700; color:var(--muted); } .plan__price .amount{ font-size:34px; font-weight:900; color:var(--ink); line-height:1; letter-spacing:-0.02em; } .plan__note{ font-size:12.5px; color:#94A3B8; margin-bottom:22px; } .plan__features{ display:flex; flex-direction:column; gap:11px; margin-bottom:26px; flex:1; } .plan__features li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:#475569; line-height:1.5; } .plan__features li::before{ content:''; flex-shrink:0; width:18px; height:18px; margin-top:1px; border-radius:5px; background:var(--acc-s) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23E0121B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat; } .plan__features li.off{ color:#B0B7C3; } .plan__features li.off::before{ background:#F1F3F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/11px no-repeat; } .plan .btn{ width:100%; justify-content:center; } /* ════════════════════════════════════════════ BLOG ════════════════════════════════════════════ */ .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } @media (max-width:900px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } } .post-card{ display:flex; flex-direction:column; background:#fff; border:1.5px solid var(--line); border-radius:18px; overflow:hidden; text-decoration:none; transition:.2s; } .post-card:hover{ border-color:color-mix(in srgb,var(--acc) 35%,transparent); box-shadow:0 22px 48px -18px color-mix(in srgb,var(--acc) 40%,transparent); transform:translateY(-5px); } .post-card__img{ aspect-ratio:16/9; position:relative; overflow:hidden; } .post-card__img img{ width:100%; height:100%; object-fit:cover; } .post-card__cat{ position:absolute; top:12px; left:12px; background:rgba(255,255,255,.94); color:var(--ink); font-size:11px; font-weight:700; padding:5px 11px; border-radius:100px; } .post-card__body{ padding:20px 22px; flex:1; display:flex; flex-direction:column; } .post-card__meta{ font-size:12px; color:#94A3B8; margin-bottom:8px; } .post-card__body h3{ font-size:17px; font-weight:800; color:var(--ink); line-height:1.3; margin-bottom:10px; } .post-card__body p{ font-size:13.5px; color:var(--muted); line-height:1.6; flex:1; } .post-card__more{ margin-top:16px; font-size:13px; font-weight:700; color:var(--acc); display:inline-flex; align-items:center; gap:6px; } /* ════════════════════════════════════════════ CONTACTO ════════════════════════════════════════════ */ .contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start; } @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } } .form-card{ background:#fff; border:1.5px solid var(--line); border-radius:24px; padding:36px; box-shadow:0 24px 60px -24px rgba(16,24,40,.18); } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:560px){ .form-row{ grid-template-columns:1fr; } } .field{ margin-bottom:18px; } .field label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px; } .field label .req{ color:var(--acc); } .field input,.field select,.field textarea{ width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; font-size:14px; color:var(--ink); background:#fff; transition:.15s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent); } .field textarea{ resize:vertical; min-height:120px; } .form-card .btn{ width:100%; justify-content:center; margin-top:6px; } .form-note{ font-size:12px; color:#94A3B8; text-align:center; margin-top:14px; } .contact-info{ display:flex; flex-direction:column; gap:16px; } .cinfo{ display:flex; align-items:flex-start; gap:14px; padding:20px; background:#fff; border:1.5px solid var(--line); border-radius:16px; transition:.2s; } .cinfo:hover{ border-color:color-mix(in srgb,var(--acc) 30%,transparent); transform:translateY(-2px); } .cinfo__ico{ width:44px; height:44px; flex-shrink:0; border-radius:12px; background:var(--acc-s); color:var(--acc); display:flex; align-items:center; justify-content:center; font-size:18px; } .cinfo h3{ font-size:14px; font-weight:800; color:var(--ink); margin-bottom:3px; } .cinfo p,.cinfo a{ font-size:14px; color:var(--muted); line-height:1.5; } .cinfo a:hover{ color:var(--acc); } /* ════════════════════════════════════════════ PROYECTOS (galería) ════════════════════════════════════════════ */ .work-filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px; } .work-filter{ padding:8px 18px; border:1.5px solid var(--line); border-radius:100px; font-size:13px; font-weight:600; color:var(--muted); background:#fff; cursor:pointer; transition:.15s; } .work-filter:hover{ border-color:var(--acc); color:var(--acc); } .work-filter.is-active{ background:var(--acc); border-color:var(--acc); color:#fff; } .work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } @media (max-width:900px){ .work-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .work-grid{ grid-template-columns:1fr; } } .work-card{ display:flex; flex-direction:column; border-radius:18px; overflow:hidden; text-decoration:none; border:1.5px solid var(--line); background:#fff; transition:.2s; } .work-card:hover{ border-color:color-mix(in srgb,var(--acc) 35%,transparent); box-shadow:0 24px 52px -18px color-mix(in srgb,var(--acc) 40%,transparent); transform:translateY(-6px); } .work-card__img{ aspect-ratio:16/10; position:relative; overflow:hidden; background:#0B0B0F; } .work-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; } .work-card:hover .work-card__img img{ transform:scale(1.05); } .work-card__badge{ position:absolute; top:12px; left:12px; background:rgba(255,255,255,.94); color:var(--ink); font-size:11px; font-weight:700; padding:5px 11px; border-radius:100px; } .work-card__body{ padding:18px 20px; } .work-card__body h3{ font-size:16px; font-weight:800; color:var(--ink); margin-bottom:5px; } .work-card__body p{ font-size:13px; color:var(--muted); line-height:1.55; } .work-card__tags{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; } .work-card__tags span{ font-size:11px; font-weight:600; color:var(--acc); background:var(--acc-s); padding:4px 9px; border-radius:6px; } /* ════════════════════════════════════════════ STATS BANNER ════════════════════════════════════════════ */ .statbar{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1.5px solid var(--line); border-radius:22px; overflow:hidden; background:#fff; } @media (max-width:640px){ .statbar{ grid-template-columns:repeat(2,1fr); } } .statbar__c{ padding:32px 20px; text-align:center; border-right:1px solid var(--line); } .statbar__c:last-child{ border-right:none; } .statbar__n{ font-size:clamp(28px,3vw,38px); font-weight:900; color:var(--acc); line-height:1; } .statbar__l{ font-size:13px; color:var(--muted); margin-top:6px; } /* ════════════════════════════════════════════ PILLS / chips de tema ════════════════════════════════════════════ */ .pills{ display:flex; flex-wrap:wrap; gap:10px; } .pill{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:100px; font-size:13px; font-weight:600; background:var(--acc-s); color:var(--acc-d); } .pill i{ font-size:13px; } /* prose */ .prose{ max-width:720px; } .prose p{ font-size:16px; color:var(--ink-2); line-height:1.8; margin-bottom:18px; } /* helpers de animación al hacer scroll (activado por JS .reveal) */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .5s ease, transform .5s ease; } .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } }