/* ═══════════════════════════════════════════════════════════ MISUNET · Componentes reutilizables ═══════════════════════════════════════════════════════════ */ /* ══ Revelado al hacer scroll ══════════════════════════════ CRÍTICO: el estado oculto se aplica SOLO si `.js` está en . Si el script se bloquea, falla o el usuario no tiene JS, el contenido permanece visible en lugar de quedar en opacity:0. Fail-safe: el fallo degrada a "todo visible", nunca a "nada". */ .js [data-reveal]{ opacity:0; transform:translate3d(0,22px,0); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:var(--reveal-delay,0ms); will-change:opacity,transform; } .js [data-reveal].is-in{ opacity:1; transform:none; will-change:auto; } /* Título del hero: revelado palabra a palabra (lo compone el JS) */ .word{ display:inline-block; overflow:hidden; vertical-align:top; } .js .word>span{ display:inline-block; transform:translate3d(0,110%,0); transition:transform 1s var(--ease-out); transition-delay:calc(var(--w,0) * 55ms + 120ms); } .is-in .word>span{ transform:none; } /* ══ Botones ═══════════════════════════════════════════════ */ .btn{ --btn-bg:transparent; --btn-fg:currentColor; --btn-bd:transparent; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding:.875rem 1.5rem; font-size:var(--fs-sm); font-weight:600; letter-spacing:-.01em; line-height:1; border-radius:var(--r-full); border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg); white-space:nowrap; isolation:isolate; transition:transform var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); } .btn--sm{ padding:.6875rem 1.125rem; font-size:.8125rem; } .btn--lg{ padding:1.0625rem 1.875rem; font-size:var(--fs-base); } .btn--block{ width:100%; } .btn__arrow{ width:1.05em; height:1.05em; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--t-base) var(--ease-out); } .btn:hover .btn__arrow{ transform:translateX(3px); } .btn--primary{ --btn-bg:var(--brand-600); --btn-fg:#fff; box-shadow:var(--sh-brand); } .btn--primary:hover{ --btn-bg:var(--brand-500); transform:translateY(-2px); } .btn--primary:active{ transform:translateY(0); } /* Brillo que recorre el botón al pasar el cursor */ .btn--primary::after{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(110deg,transparent 20%,rgb(255 255 255 / .22) 50%,transparent 80%); transform:translateX(-120%); transition:transform .85s var(--ease-out); } .btn--primary:hover::after{ transform:translateX(120%); } .btn--ghost{ --btn-fg:var(--on-dark); --btn-bd:var(--line-dark-2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .btn--ghost:hover{ --btn-bg:rgb(255 255 255 / .07); --btn-bd:var(--brand-400); transform:translateY(-2px); } .btn--light{ --btn-bg:#fff; --btn-fg:var(--brand-900); box-shadow:var(--sh-3); } .btn--light:hover{ transform:translateY(-2px); box-shadow:var(--sh-4); } .btn--ghost-light{ --btn-fg:#fff; --btn-bd:rgb(255 255 255 / .35); } .btn--ghost-light:hover{ --btn-bg:rgb(255 255 255 / .12); --btn-bd:#fff; transform:translateY(-2px); } .btn[disabled],.btn[aria-busy=true]{ opacity:.6; pointer-events:none; } /* ══ Chip / badge ══════════════════════════════════════════ */ .chip{ display:inline-flex; align-items:center; gap:.6em; padding:.5rem 1rem .5rem .75rem; font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-2); border:1px solid var(--line-dark); border-radius:var(--r-full); background:rgb(255 255 255 / .04); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } .chip__dot{ width:6px; height:6px; border-radius:50%; background:var(--brand-400); box-shadow:0 0 0 0 rgb(74 155 240 / .55); animation:pulse 2.6s var(--ease-out) infinite; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgb(74 155 240 / .5); } 70%{ box-shadow:0 0 0 9px rgb(74 155 240 / 0); } 100%{ box-shadow:0 0 0 0 rgb(74 155 240 / 0); } } /* ══ Header ════════════════════════════════════════════════ */ .header{ position:fixed; inset-inline:0; top:0; z-index:120; transition:background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); border-bottom:1px solid transparent; } .header__bar{ display:flex; align-items:center; gap:var(--space-5); height:var(--header-h); } /* Sobre el hero oscuro */ .header[data-theme="dark"]{ background:transparent; } .header[data-theme="dark"] .brand__mark{ filter:brightness(0) invert(1); } .header[data-theme="dark"] .brand__name{ color:#fff; } .header[data-theme="dark"] .nav__link{ color:var(--on-dark-2); } .header[data-theme="dark"] .nav__link:hover, .header[data-theme="dark"] .nav__link[aria-current]{ color:#fff; } .header[data-theme="dark"] .burger__box i{ background:#fff; } /* Al bajar: cristal claro */ .header.is-stuck{ background:rgb(255 255 255 / .78); -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%); border-bottom-color:var(--line); box-shadow:0 1px 0 rgb(10 16 32 / .02), 0 8px 32px -12px rgb(10 16 32 / .12); } .header__progress{ height:2px; background:transparent; transform-origin:left; } .header__progress span{ display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--brand-600),var(--accent-400)); transform:scaleX(var(--p,0)); transform-origin:left; transition:transform .1s linear; } .brand{ display:inline-flex; align-items:center; gap:.6rem; margin-right:auto; } .brand__mark{ height:30px; width:auto; transition:filter var(--t-base) var(--ease-out); } .brand__name{ font-family:var(--font-display); font-weight:700; font-size:1.0625rem; letter-spacing:.06em; color:var(--brand-900); transition:color var(--t-base) var(--ease-out); } .nav{ display:none; } @media (min-width:940px){ .nav{ display:block; } } .nav__list{ display:flex; align-items:center; gap:var(--space-6); } .nav__link{ position:relative; font-size:.9rem; font-weight:500; color:var(--ink-2); padding-block:.35rem; transition:color var(--t-base) var(--ease-out); } .nav__link::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1.5px; border-radius:2px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform var(--t-base) var(--ease-out); } .nav__link:hover::after, .nav__link[aria-current]::after{ transform:scaleX(1); transform-origin:left; } .nav__link:hover,.nav__link[aria-current]{ color:var(--brand-600); } .header__actions{ display:none; } @media (min-width:940px){ .header__actions{ display:block; } } /* ══ Botón hamburguesa ═════════════════════════════════════ */ .burger{ display:grid; place-items:center; width:44px; height:44px; margin-right:-8px; border-radius:var(--r-sm); } @media (min-width:940px){ .burger{ display:none; } } .burger__box{ display:block; width:20px; height:12px; position:relative; } .burger__box i{ position:absolute; left:0; width:100%; height:1.75px; border-radius:2px; background:var(--ink); transition:transform var(--t-base) var(--ease-out), opacity var(--t-fast) linear; } .burger__box i:nth-child(1){ top:0; } .burger__box i:nth-child(2){ bottom:0; } [aria-expanded="true"] .burger__box i:nth-child(1){ transform:translateY(5px) rotate(45deg); } [aria-expanded="true"] .burger__box i:nth-child(2){ transform:translateY(-5px) rotate(-45deg); } /* ══ Menú móvil ════════════════════════════════════════════ */ .menu{ position:fixed; inset:0; z-index:110; background:rgb(4 8 16 / .96); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); opacity:0; visibility:hidden; transition:opacity var(--t-base) var(--ease-out), visibility var(--t-base); } .menu[hidden]{ display:none; } .menu.is-open{ opacity:1; visibility:visible; } .menu__inner{ height:100%; display:flex; flex-direction:column; justify-content:center; gap:var(--space-7); padding:calc(var(--header-h) + var(--space-6)) var(--gutter) var(--space-7); max-width:var(--container); margin-inline:auto; } /* El escalonado vive en CSS, no en atributos style= inline: así la CSP puede prescindir de 'unsafe-inline' en style-src. */ .menu__list li,.menu__foot{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay:calc(var(--i,0) * 45ms + 80ms); } .menu__list li:nth-child(1){ --i:0; } .menu__list li:nth-child(2){ --i:1; } .menu__list li:nth-child(3){ --i:2; } .menu__list li:nth-child(4){ --i:3; } .menu__list li:nth-child(5){ --i:4; } .menu__foot{ --i:5; } .menu.is-open .menu__list li, .menu.is-open .menu__foot{ opacity:1; transform:none; } .menu__list a{ display:block; padding:.55rem 0; font-family:var(--font-display); font-size:clamp(1.75rem,7vw,2.5rem); font-weight:600; letter-spacing:var(--tracking-tight); color:#fff; transition:color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); } .menu__list a:hover{ color:var(--brand-300); transform:translateX(6px); } .menu__foot{ display:grid; gap:var(--space-4); border-top:1px solid var(--line-dark); padding-top:var(--space-6); } .menu__contact{ color:var(--on-dark-2); font-size:var(--fs-sm); } .menu__contact:hover{ color:#fff; } /* ══ Tarjetas de solución ══════════════════════════════════ */ .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:clamp(1rem,.6rem + 1vw,1.25rem); } .card{ position:relative; padding:clamp(1.5rem,1.2rem + 1vw,2rem); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); overflow:hidden; transition:transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); } /* Luz que sigue al cursor — solo con puntero fino */ .card::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgb(var(--brand-rgb) / .07), transparent 62%); opacity:0; transition:opacity var(--t-base) var(--ease-out); } @media (hover:hover) and (pointer:fine){ .card:hover{ transform:translateY(-4px); border-color:var(--brand-200); box-shadow:var(--sh-3); } .card:hover::before{ opacity:1; } } .card__i{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.1em; color:var(--brand-400); } .card__icon{ width:26px; height:26px; margin:var(--space-5) 0 var(--space-4); fill:none; stroke:var(--brand-600); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--t-base) var(--ease-spring); } .card:hover .card__icon{ transform:translateY(-2px) scale(1.06); } .card h3{ font-size:var(--fs-md); margin-bottom:.5rem; } .card p{ font-size:var(--fs-sm); color:var(--ink-3); } /* ══ Marquesina de capacidades ═════════════════════════════ */ .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .marquee__track{ display:flex; width:max-content; animation:slide 46s linear infinite; } .marquee:hover .marquee__track{ animation-play-state:paused; } .marquee__row{ display:flex; align-items:center; gap:clamp(2rem,4vw,3.5rem); padding-right:clamp(2rem,4vw,3.5rem); } .marquee__row li{ display:flex; align-items:center; gap:clamp(2rem,4vw,3.5rem); font-family:var(--font-display); font-size:clamp(.95rem,.85rem + .35vw,1.15rem); font-weight:500; color:var(--on-dark-3); white-space:nowrap; transition:color var(--t-base) var(--ease-out); } .marquee__row li::after{ content:''; width:5px; height:5px; flex:none; background:var(--brand-600); transform:rotate(45deg); } .marquee__row li:hover{ color:var(--on-dark); } @keyframes slide{ to{ transform:translateX(-50%); } } /* ══ Acordeón FAQ ══════════════════════════════════════════ */ .faq{ border-top:1px solid var(--line); } .faq__item{ border-bottom:1px solid var(--line); } .faq__item h3{ margin:0; font-family:inherit; letter-spacing:normal; } .faq__q{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-5); width:100%; padding:1.375rem 0; text-align:left; font-family:var(--font-display); font-size:var(--fs-md); font-weight:600; line-height:1.4; letter-spacing:-.015em; color:var(--ink); transition:color var(--t-base) var(--ease-out); } .faq__q:hover{ color:var(--brand-600); } .faq__sign{ position:relative; flex:none; width:22px; height:22px; margin-top:2px; border:1px solid var(--line-2); border-radius:50%; transition:border-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); } .faq__sign::before,.faq__sign::after{ content:''; position:absolute; inset:50% 5px auto; height:1.5px; background:var(--brand-600); border-radius:2px; transform:translateY(-50%); transition:transform var(--t-base) var(--ease-out), background-color var(--t-base); } .faq__sign::after{ transform:translateY(-50%) rotate(90deg); } [aria-expanded="true"] .faq__sign{ background:var(--brand-600); border-color:var(--brand-600); transform:rotate(90deg); } [aria-expanded="true"] .faq__sign::before, [aria-expanded="true"] .faq__sign::after{ background:#fff; } [aria-expanded="true"] .faq__sign::after{ transform:translateY(-50%) rotate(0); } .faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-base) var(--ease-out); } .faq__a>div{ overflow:hidden; } .faq__a p{ padding-bottom:1.5rem; padding-right:clamp(0px,4vw,48px); color:var(--ink-3); font-size:var(--fs-sm); opacity:0; transition:opacity var(--t-base) var(--ease-out); } .faq__item.is-open .faq__a{ grid-template-rows:1fr; } .faq__item.is-open .faq__a p{ opacity:1; transition-delay:.08s; } /* ══ Formulario ════════════════════════════════════════════ */ .form-wrap{ padding:clamp(1.5rem,1rem + 2.4vw,2.75rem); background:var(--paper); border-radius:var(--r-xl); box-shadow:0 40px 80px -32px rgb(0 0 0 / .5); } .form__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-4); } @media (min-width:560px){ .form__grid{ grid-template-columns:1fr 1fr; gap:var(--space-4) var(--space-4); } .field--full{ grid-column:1 / -1; } } .field{ display:grid; gap:.4rem; } .field label{ font-size:.8125rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:.4em; } .field label span[aria-hidden]{ color:var(--brand-600); } .field__opt{ font-family:var(--font-mono); font-size:.6875rem; font-weight:500; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; } .field input,.field textarea{ width:100%; padding:.8125rem .9375rem; font-size:.9375rem; color:var(--ink); background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-sm); transition:border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); resize:vertical; } .field input::placeholder,.field textarea::placeholder{ color:#9AA7BD; } .field input:focus,.field textarea:focus{ outline:none; background:var(--paper); border-color:var(--brand-500); box-shadow:0 0 0 4px rgb(var(--brand-rgb) / .12); } .field.is-invalid input,.field.is-invalid textarea{ border-color:var(--danger); } .field.is-invalid input:focus{ box-shadow:0 0 0 4px rgb(216 69 59 / .14); } .field__error{ font-size:.75rem; color:var(--danger); min-height:0; } .field__error:empty{ display:none; } .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form button[type=submit]{ margin-top:var(--space-5); } .form__note{ margin-top:var(--space-4); font-size:.8125rem; font-weight:500; color:var(--brand-600); min-height:1.2em; } .form__note.is-error{ color:var(--danger); } .form__note.is-ok{ color:var(--ok); } .form__legal{ margin-top:var(--space-3); font-size:.75rem; line-height:1.55; color:var(--ink-3); } /* ══ Botón flotante de WhatsApp ════════════════════════════ */ .wa{ position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem); z-index:100; display:inline-flex; align-items:center; gap:0; height:56px; padding:0 15px; border-radius:var(--r-full); background:var(--wa); color:#fff; box-shadow:0 8px 20px -6px rgb(31 175 92 / .5), 0 18px 40px -14px rgb(0 0 0 / .4); transition:transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out); } .wa:hover{ transform:translateY(-3px); box-shadow:0 12px 28px -6px rgb(31 175 92 / .6), 0 24px 50px -16px rgb(0 0 0 / .45); } /* La etiqueta se despliega al pasar el cursor: el icono basta en reposo */ .wa__label{ max-width:0; overflow:hidden; font-size:var(--fs-sm); font-weight:600; white-space:nowrap; transition:max-width var(--t-base) var(--ease-out), margin-left var(--t-base) var(--ease-out); } @media (hover:hover) and (pointer:fine){ .wa:hover .wa__label, .wa:focus-visible .wa__label{ max-width:9rem; margin-left:.55rem; } } /* ══ Formulario: acciones, consentimiento ══════════════════ */ .form__actions{ display:grid; gap:var(--space-3); margin-top:var(--space-5); } .field--consent{ margin-top:var(--space-5); } .consent{ display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start; cursor:pointer; font-size:.8125rem; font-weight:400; line-height:1.55; color:var(--ink-2); } /* La casilla nativa se oculta pero sigue siendo la que recibe el foco y el estado: el recuadro visible es puramente decorativo. */ .consent input{ position:absolute; opacity:0; width:1.15rem; height:1.15rem; margin:0; } .consent__box{ position:relative; flex:none; width:1.15rem; height:1.15rem; margin-top:.1rem; border:1.5px solid var(--line-2); border-radius:5px; background:var(--paper); transition:background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .consent__box::after{ content:""; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform var(--t-fast) var(--ease-spring); } .consent input:checked + .consent__box{ background:var(--brand-600); border-color:var(--brand-600); } .consent input:checked + .consent__box::after{ transform:rotate(45deg) scale(1); } .consent input:focus-visible + .consent__box{ outline:2px solid var(--brand-500); outline-offset:3px; } .field--consent.is-invalid .consent__box{ border-color:var(--danger); } .consent__text a{ color:var(--brand-600); font-weight:600; text-decoration:underline; text-underline-offset:2px; } .consent__text a:hover{ color:var(--brand-700); } .form__legal a{ color:var(--brand-600); text-decoration:underline; text-underline-offset:2px; } /* ══ Footer legal ══════════════════════════════════════════ */ .footer__legal{ display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; } .footer__legal a{ font-size:.8125rem; color:var(--on-dark-3); text-decoration:underline; text-underline-offset:3px; transition:color var(--t-fast) var(--ease-out); } .footer__legal a:hover{ color:#fff; } /* WhatsApp como accion principal del formulario. Se anaden variantes nuevas; ninguna regla existente se modifica. */ .btn--wa-solid{ --btn-bg:var(--wa); --btn-fg:#fff; box-shadow:0 6px 16px -4px rgb(31 175 92 / .34), 0 16px 40px -12px rgb(31 175 92 / .28); } .btn--wa-solid:hover{ --btn-bg:#1B9C52; transform:translateY(-2px); } .btn--wa-solid:active{ transform:translateY(0); } /* Secundario sobre superficie clara (la tarjeta blanca del formulario) */ .btn--outline{ --btn-fg:var(--ink); --btn-bd:var(--line-2); } .btn--outline:hover{ --btn-bg:var(--paper-2); --btn-bd:var(--ink-3); transform:translateY(-2px); }