/* ============================================================ Adsorio — hoja de estilos única Orden: 1.Tokens 2.Base 3.Layout 4.Componentes 5.Secciones 6.Páginas 7.Responsive ============================================================ */ /* ---------- 1. TOKENS ---------- El tema claro es el que manda por defecto. El oscuro se activa poniendo data-theme="dark" en (lo hace el botón del header y se recuerda). ------------------------------------------------------------------ */ :root{ color-scheme:light; --bg:#ffffff; --bg-soft:#f5f5f6; --surface:#ffffff; --surface-2:#f1f1f3; --line:rgba(0,0,0,.11); --line-strong:rgba(0,0,0,.22); --text:#131316; --muted:#5e5e66; --dim:#8a8a92; --accent:#131316; /* la tinta del logo: botones y titulares */ --accent-ink:#ffffff; --accent-hover:#2d2d33; /* Color de marca. Sale del propio material: más de la mitad de las piezas tienen dominante naranja/coral. --brand pinta, --brand-ink se lee. */ --brand:255 90 43; --brand-ink:#c93c0e; --brand-soft:rgba(255,90,43,.10); /* un color por familia de trabajo, tomado de las piezas de cada una */ --cat-ugc:255 90 43; --cat-packshot:29 91 255; --cat-motion:224 33 138; --cat-photo:26 150 92; --header-bg:rgba(255,255,255,.8); --hover-bg:rgba(0,0,0,.05); --pill-bg:rgba(0,0,0,.02); --ring:rgba(0,0,0,.10); --glow:rgba(0,0,0,.05); --hero-glow:rgba(0,0,0,.055); --hero-dim:#7d7d86; --overlay:rgba(244,244,245,.94); --tile-shadow:0 24px 50px -28px rgba(0,0,0,.45); --shadow:0 24px 60px -24px rgba(0,0,0,.16); --err:#c0392b; --radius:20px; --radius-sm:12px; --container:1200px; --font-display:'Jost','Century Gothic','Segoe UI',system-ui,sans-serif; --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; --ease:cubic-bezier(.22,.7,.28,1); } :root[data-theme="dark"]{ color-scheme:dark; --bg:#0b0b0c; --bg-soft:#101011; --surface:#141416; --surface-2:#1b1b1e; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.22); --text:#f7f7f8; --muted:#9b9ba2; --dim:#6e6e75; --accent:#ffffff; --accent-ink:#0b0b0c; --accent-hover:#e7e7ea; --brand:255 122 77; --brand-ink:#ff8a5c; --brand-soft:rgba(255,122,77,.14); --cat-ugc:255 122 77; --cat-packshot:96 140 255; --cat-motion:255 92 176; --cat-photo:52 190 124; --header-bg:rgba(11,11,12,.74); --hover-bg:rgba(255,255,255,.05); --pill-bg:rgba(255,255,255,.03); --ring:rgba(255,255,255,.12); --glow:rgba(255,255,255,.07); --hero-glow:rgba(255,255,255,.10); --hero-dim:#c3c3c9; --overlay:rgba(4,5,7,.9); --tile-shadow:0 30px 60px -30px rgba(0,0,0,.9); --shadow:0 24px 60px -20px rgba(0,0,0,.75); --err:#ff8080; } body,.site-header,.card,.tile,.plan,.step,.compare-card,.info-card, .field input,.field select,.field textarea{ transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease); } /* ---------- 2. BASE ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--font-body);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,video{max-width:100%;display:block} /* el atributo hidden gana siempre: sin esto, cualquier regla nuestra con display lo anula y el elemento se muestra igual (el navegador lo oculta con la prioridad más baja que existe) */ [hidden]{display:none !important} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em} h1{font-size:clamp(2.4rem,5.5vw,4.4rem);font-weight:700} h2{font-size:clamp(2rem,4.2vw,3.3rem);font-weight:700} h3{font-size:1.28rem;font-weight:600;letter-spacing:-.01em} p{margin:0 0 1rem} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid rgb(var(--brand));outline-offset:3px;border-radius:6px} ::selection{background:rgb(var(--brand));color:#fff} .skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink); padding:.7rem 1.2rem;border-radius:0 0 10px 0;font-weight:600;z-index:200} .skip:focus{left:0} /* ---------- 3. LAYOUT ---------- */ .container{width:min(100% - 2.5rem,var(--container));margin-inline:auto} .section{padding:clamp(4rem,9vw,7.5rem) 0} .section--tight{padding:clamp(3rem,6vw,5rem) 0} .section--soft{background:var(--bg-soft);border-block:1px solid var(--line)} .section--tinted{position:relative;isolation:isolate} .section--tinted::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(58% 52% at 10% 0%,rgb(var(--brand) / .07),transparent 72%), radial-gradient(52% 48% at 94% 100%,rgb(var(--cat-packshot) / .05),transparent 74%); } .stack-sm > * + *{margin-top:.6rem} .grid{display:grid;gap:1.4rem} .center{text-align:center} .mx-auto{margin-inline:auto} .narrow{max-width:62ch} .section-head{max-width:64ch;margin-bottom:clamp(2rem,4vw,3.2rem)} .section-head.center{margin-inline:auto} /* ---------- 4. COMPONENTES ---------- */ .eyebrow{ font-family:var(--font-display);font-size:.78rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--brand-ink); display:flex;align-items:center;gap:.6rem;margin-bottom:1rem; } .eyebrow.center{justify-content:center} .eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:rgb(var(--brand));opacity:.95} .lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted)} .muted{color:var(--muted)} .btn{ --btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--line-strong); display:inline-flex;align-items:center;justify-content:center;gap:.55rem; padding:.9rem 1.6rem;border-radius:999px;border:1px solid var(--btn-bd); background:var(--btn-bg);color:var(--btn-fg); font-family:var(--font-display);font-size:.98rem;font-weight:600; cursor:pointer;transition:transform .18s var(--ease),background .18s,border-color .18s,opacity .18s; } .btn:hover{transform:translateY(-2px)} .btn--primary{--btn-bg:var(--accent);--btn-fg:var(--accent-ink);--btn-bd:var(--accent)} .btn--primary:hover{background:var(--accent-hover)} .btn--ghost:hover{border-color:rgb(var(--brand));color:var(--brand-ink);background:var(--brand-soft)} .btn--sm{padding:.62rem 1.15rem;font-size:.9rem} .btn--block{width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.8rem} .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:1.7rem;transition:transform .25s var(--ease),border-color .25s,background .25s; } .card:hover{transform:translateY(-4px);border-color:rgb(var(--brand) / .45); box-shadow:0 18px 40px -26px rgb(var(--brand) / .5)} .card h3{margin-bottom:.45rem} .card p{color:var(--muted);margin:0;font-size:.98rem} .pill{ display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .9rem; border:1px solid var(--line-strong);border-radius:999px; font-size:.82rem;color:var(--muted);background:var(--pill-bg); } .pill .dot{width:7px;height:7px;border-radius:50%;background:rgb(var(--brand)); box-shadow:0 0 0 4px rgb(var(--brand) / .18)} .tag{ font-family:var(--font-display);font-size:.72rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--brand-ink); } /* --- Header --- */ .site-header{ position:sticky;top:0;z-index:100; background:var(--header-bg);backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .nav{display:flex;align-items:center;gap:1.4rem;height:72px} .logo{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display); font-weight:700;font-size:1.22rem;letter-spacing:-.03em;margin-right:auto} .logo{letter-spacing:.01em;font-weight:500} .logo .mark{width:26px;height:auto;flex:none} :root[data-theme="dark"] .logo .mark{filter:invert(1)} .nav-links{display:flex;gap:1.5rem;align-items:center} /* El JS clona el CTA del header dentro del menú (initNav), porque en un celular el original no entra al lado del logo. En escritorio el menú es una fila horizontal, así que ese clon se dibujaba al lado del original: dos botones idénticos en el header. Sólo se muestra donde hace falta. */ .nav-links .nav-cta{display:none} .nav-links a{font-size:.96rem;color:var(--muted);transition:color .18s;position:relative;padding:.3rem 0} .nav-links a:hover{color:var(--text)} .nav-links a[aria-current="page"]{color:var(--text)} .nav-links a[aria-current="page"]::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:rgb(var(--brand));border-radius:2px} .nav-actions{display:flex;align-items:center;gap:.8rem} .lang{display:flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden} .lang button{ background:none;border:0;color:var(--muted);font-family:var(--font-display); font-size:.8rem;font-weight:600;padding:.4rem .72rem;cursor:pointer;transition:.18s} .lang button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)} .theme-toggle{ display:grid;place-items:center;width:36px;height:36px;flex:none; border:1px solid var(--line-strong);border-radius:999px;background:none; color:var(--text);cursor:pointer;transition:background .18s,border-color .18s} .theme-toggle:hover{background:var(--hover-bg)} .theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .theme-toggle .ico-moon{display:none} :root[data-theme="dark"] .theme-toggle .ico-moon{display:block} :root[data-theme="dark"] .theme-toggle .ico-sun{display:none} .burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:10px; width:42px;height:42px;cursor:pointer;color:var(--text)} .burger span{display:block;width:18px;height:2px;background:currentColor;margin:3px auto;border-radius:2px;transition:.2s} .nav[data-open="true"] .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)} .nav[data-open="true"] .burger span:nth-child(2){opacity:0} .nav[data-open="true"] .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)} /* --- Media tiles (videos y fotos) --- */ .tile{ position:relative;display:block;width:100%;padding:0;border:1px solid var(--line); border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2);color:#fff; aspect-ratio:9/16;cursor:pointer;isolation:isolate;font-family:var(--font-body); --tint:140 140 150; /* cada pieza lo pisa con su color dominante */ transition:transform .3s var(--ease),border-color .3s,box-shadow .3s; } .tile:hover{ transform:translateY(-5px); border-color:rgb(var(--tint) / .85); box-shadow:0 22px 48px -22px rgb(var(--tint) / .6); } .tile--wide{aspect-ratio:16/9} .tile--photo{aspect-ratio:3/4} .tile--square{aspect-ratio:1} .tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .tile video{opacity:0;transition:opacity .35s} .tile.is-playing video{opacity:1} .tile::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 28%,transparent 100%); } .tile-meta{ position:absolute;left:0;right:0;bottom:0;z-index:2;padding:3rem 1rem .95rem; display:flex;justify-content:space-between;align-items:flex-end;gap:.6rem;text-align:left; background:linear-gradient(180deg,transparent,rgba(0,0,0,.6) 42%,rgba(0,0,0,.92) 100%); } .tile-meta strong{font-family:var(--font-display);font-size:1rem;font-weight:600;display:block;text-shadow:0 1px 6px rgba(0,0,0,.9)} .tile-meta small{color:rgba(255,255,255,.86);font-size:.8rem;text-shadow:0 1px 6px rgba(0,0,0,.9)} .tile-play{ position:absolute;top:.85rem;right:.85rem;z-index:2; width:34px;height:34px;border-radius:50%;display:grid;place-items:center; background:rgba(10,12,16,.6);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22); font-size:.7rem;color:#fff; } .tile-dur{ position:absolute;top:.85rem;left:.85rem;z-index:2;font-size:.72rem; padding:.18rem .5rem;border-radius:6px;background:rgba(10,12,16,.78); backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);font-variant-numeric:tabular-nums; } /* --- Profundidad 3D (sutil, se apaga con reduced-motion y en táctil) --- */ [data-tilt]{ --rx:0deg;--ry:0deg;--mx:50%;--my:50%; transform-style:preserve-3d; transition:transform .55s var(--ease),border-color .3s; } [data-tilt].is-tilting{transition:transform .1s linear} .tile[data-tilt].is-tilting{ transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px) scale(1.02); } .card[data-tilt].is-tilting,.step[data-tilt].is-tilting,.plan[data-tilt].is-tilting,.compare-card[data-tilt].is-tilting{ transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px); } /* el reflejo sigue al cursor */ .tile[data-tilt]::before,.card[data-tilt]::before,.step[data-tilt]::after,.plan[data-tilt]::before,.compare-card[data-tilt]::before{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit; opacity:0;transition:opacity .35s; background:radial-gradient(340px circle at var(--mx) var(--my),rgb(var(--tint) / .34),transparent 62%); } .card[data-tilt],.step[data-tilt],.plan[data-tilt],.compare-card[data-tilt]{position:relative} .tile[data-tilt].is-tilting::before,.card[data-tilt].is-tilting::before, .step[data-tilt].is-tilting::after,.plan[data-tilt].is-tilting::before, .compare-card[data-tilt].is-tilting::before{opacity:1} .card[data-tilt]::before,.step[data-tilt]::after,.plan[data-tilt]::before,.compare-card[data-tilt]::before{ background:radial-gradient(420px circle at var(--mx) var(--my),var(--glow),transparent 60%); } /* el contenido flota un poco por encima de la tarjeta */ .card[data-tilt] > *,.step[data-tilt] > *{transform:translateZ(18px)} .step[data-tilt]::before{position:relative;z-index:4} /* --- Lightbox --- */ .lightbox{ position:fixed;inset:0;z-index:300;display:none; place-items:center;padding:1.5rem; background:var(--overlay);backdrop-filter:blur(10px); } .lightbox[open],.lightbox.is-open{display:grid} .lightbox-inner{position:relative;max-width:min(94vw,460px);width:100%} .lightbox-inner.is-wide{max-width:min(94vw,900px)} .lightbox video,.lightbox img{ width:100%;max-height:82vh;object-fit:contain;border-radius:14px;background:#000; box-shadow:var(--shadow)} .lightbox-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.9rem} .lightbox-bar strong{font-family:var(--font-display);font-size:1.02rem} .lightbox-bar small{display:block;color:var(--muted);font-size:.85rem} .lb-btn{ background:var(--hover-bg);border:1px solid var(--line-strong);color:var(--text); width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.1rem;line-height:1; display:grid;place-items:center;transition:.18s} .lb-btn:hover{background:var(--surface-2)} .lb-close{position:absolute;top:-52px;right:0} .lb-nav{display:flex;gap:.5rem} /* El carrusel de marcas y el de herramientas se eliminaron: mostrar el logo de un tercero sugiere un aval que no tenemos. La atribución quedó como texto, con las clases de tipografía de siempre. Lo cuida el test [4h]. */ /* --- Reveal on scroll --- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.is-in{opacity:1;transform:none} /* --- Acordeón FAQ --- */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ cursor:pointer;list-style:none;padding:1.25rem 2.5rem 1.25rem 0;position:relative; font-family:var(--font-display);font-size:1.05rem;font-weight:600} .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+";position:absolute;right:.4rem;top:1.1rem;font-size:1.4rem;color:rgb(var(--brand)); transition:transform .25s} .faq details[open] summary::after{transform:rotate(45deg)} .faq p{color:var(--muted);padding-bottom:1.3rem;margin:0;max-width:78ch} /* --- Footer --- */ .site-footer{border-top:1px solid var(--line);background:var(--bg-soft);padding:3.5rem 0 2rem} .footer-grid{display:grid;grid-template-columns:1.6fr repeat(2,1fr);gap:2.5rem} .footer-grid h4{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem} .footer-grid a{color:var(--muted);font-size:.95rem;display:inline-block;padding:.25rem 0;transition:color .18s} .footer-grid a:hover{color:var(--brand-ink)} .footer-bottom{ display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem; margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid var(--line); color:var(--muted);font-size:.86rem} /* ---------- 5. SECCIONES ---------- */ /* Hero */ .hero{position:relative;padding:clamp(3rem,7vw,5.5rem) 0 clamp(3.5rem,7vw,6rem);overflow:hidden} .hero::before{ content:"";position:absolute;top:-30%;left:50%;translate:-50% 0; width:min(1100px,120vw);aspect-ratio:1;pointer-events:none; background:radial-gradient(circle,rgb(var(--brand) / .13),transparent 62%);filter:blur(20px)} .hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center} .hero h1{color:var(--hero-dim)} .hero h1 em{font-style:normal;color:var(--text)} .hero .lead{max-width:52ch;font-size:clamp(1.08rem,1.7vw,1.25rem)} .hero-stats{display:flex;flex-wrap:wrap;gap:2.2rem;margin-top:2.8rem;padding-top:1.8rem;border-top:1px solid var(--line)} .hero-stats div strong{display:block;font-family:var(--font-display);font-size:1.9rem;line-height:1;margin-bottom:.3rem} .hero-stats div span{font-size:.85rem;color:var(--muted)} /* La referencia en pesos del "-80%": va debajo de la métrica, más chica y sin competirle al número. En celular la fila es de dos columnas, así que el bloque del -80% pasa a ocupar el ancho completo para que el texto largo no reviente la grilla. */ .hero-stats .stat-note{display:block;margin-top:.45rem;max-width:34ch;font-size:.78rem; line-height:1.45;color:var(--dim)} /* Muro de video del hero */ .videowall{display:grid;grid-template-columns:1fr 1fr;gap:1rem;height:min(640px,82vh);overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent); mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent); transform:perspective(1700px) rotateY(-12deg) rotateX(2.5deg) translateY(var(--py,0px)); transform-origin:right center;transform-style:preserve-3d;will-change:transform} .videowall .wall-col--b .tile{transform:translateZ(-40px)} .videowall .tile{box-shadow:var(--tile-shadow)} .wall-col{display:flex;flex-direction:column;gap:1rem;animation:wall 40s linear infinite} .wall-col--b{animation-duration:48s;animation-direction:reverse} .wall-col > *{flex:0 0 auto} @keyframes wall{to{transform:translateY(-50%)}} .videowall .tile{cursor:default} .videowall .tile:hover{transform:none} /* Comparativa */ .compare{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem} .compare-card{border-radius:var(--radius);border:1px solid var(--line);padding:1.9rem;background:var(--surface)} .compare-card--good{border-color:rgb(var(--brand) / .45);background:linear-gradient(180deg,var(--brand-soft),transparent 62%),var(--surface)} .compare-card h3{display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem} .compare-card li{display:flex;gap:.7rem;padding:.55rem 0;color:var(--muted);font-size:.97rem;align-items:flex-start} .compare-card li::before{content:"×";color:var(--dim);font-weight:700;flex:none;width:1.1em} .compare-card--good li::before{content:"✓";color:rgb(var(--brand))} /* Pasos */ .steps{counter-reset:step;display:grid;gap:1.2rem} .step{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start; padding:1.6rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} .step::before{ counter-increment:step;content:"0" counter(step); font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:rgb(var(--brand)); line-height:1;min-width:2.4rem} .step h3{margin-bottom:.3rem} .step p{margin:0;color:var(--muted);font-size:.97rem} /* CTA final */ .cta-band{ border:1px solid var(--line-strong);border-radius:calc(var(--radius) + 6px); background:linear-gradient(140deg,var(--brand-soft),rgb(var(--cat-motion) / .07) 52%,transparent),var(--surface); padding:clamp(2.4rem,5vw,4rem);text-align:center} .cta-band h2{max-width:20ch;margin-inline:auto} .cta-band .btn-row{justify-content:center} /* ---------- 6. PÁGINAS ---------- */ /* Encabezado de página interna */ .page-head{padding:clamp(3rem,6vw,4.6rem) 0 clamp(1.6rem,3vw,2.6rem);border-bottom:1px solid var(--line)} .page-head h1{font-size:clamp(2.3rem,5vw,3.8rem)} .page-head + .section{padding-top:clamp(2.2rem,4vw,3.2rem)} .page-head .lead{max-width:58ch} /* Filtros del portfolio */ .filters{display:flex;flex-wrap:wrap;gap:.6rem;margin:2rem 0 2.4rem} .filter{ background:none;border:1px solid var(--line-strong);color:var(--muted); padding:.5rem 1.05rem;border-radius:999px;cursor:pointer;font-size:.9rem; font-family:var(--font-body);transition:.18s} .filter:hover{color:var(--text);border-color:var(--text)} .filter[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600} .filter[data-filter="ugc"]:hover{border-color:rgb(var(--cat-ugc));color:rgb(var(--cat-ugc))} .filter[data-filter="packshot"]:hover{border-color:rgb(var(--cat-packshot));color:rgb(var(--cat-packshot))} .filter[data-filter="motion"]:hover{border-color:rgb(var(--cat-motion));color:rgb(var(--cat-motion))} .filter[data-filter="photo"]:hover{border-color:rgb(var(--cat-photo));color:rgb(var(--cat-photo))} .filter[data-filter="ugc"][aria-pressed="true"], .filter[data-filter="packshot"][aria-pressed="true"], .filter[data-filter="motion"][aria-pressed="true"], .filter[data-filter="photo"][aria-pressed="true"]{color:#fff} .filter[data-filter="ugc"][aria-pressed="true"]{background:rgb(var(--cat-ugc));border-color:rgb(var(--cat-ugc))} .filter[data-filter="packshot"][aria-pressed="true"]{background:rgb(var(--cat-packshot));border-color:rgb(var(--cat-packshot))} .filter[data-filter="motion"][aria-pressed="true"]{background:rgb(var(--cat-motion));border-color:rgb(var(--cat-motion))} .filter[data-filter="photo"][aria-pressed="true"]{background:rgb(var(--cat-photo));border-color:rgb(var(--cat-photo))} .work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.2rem;grid-auto-rows:1fr} .work-grid .item{display:flex} /* min-width:0 obligatorio: una pista `1fr` es minmax(auto,1fr), así que el contenido más ancho de la ficha (el título de la pieza) empuja la columna y la grilla termina midiendo más que la pantalla. En celular eso se veía como scroll horizontal en toda la página. */ .work-grid .item,.work-grid .item .tile{min-width:0} .work-grid .item .tile{width:100%} .work-grid .item--wide{grid-column:span 2} /* el horizontal se estira hasta el alto de su fila para no dejar huecos */ .work-grid .tile--wide{aspect-ratio:auto;height:100%;background:#000} .item[hidden]{display:none} /* Servicios */ .service{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center; padding:clamp(2rem,4vw,3rem) 0;border-bottom:1px solid var(--line)} .service:last-child{border-bottom:0} .service:nth-child(even) .service-media{order:-1} .service-media{display:grid;grid-template-columns:1fr 1fr;gap:.9rem} .service-media--three{grid-template-columns:1fr;gap:.8rem} .service-media--one{grid-template-columns:1fr} .service-media--trio{grid-template-columns:repeat(3,1fr);gap:.7rem} .service ul.checks li{display:flex;gap:.6rem;padding:.35rem 0;color:var(--muted);font-size:.97rem} .service ul.checks li::before{content:"✓";color:rgb(var(--brand));flex:none} .service .specs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem} .service .specs .pill{transition:border-color .2s,color .2s,background .2s} .service:hover .specs .pill{border-color:rgb(var(--brand) / .45);color:var(--brand-ink)} /* Precios */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:start} .plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2rem; display:flex;flex-direction:column;height:100%} .plan--featured{ border-color:rgb(var(--brand) / .55); background:linear-gradient(180deg,var(--brand-soft),transparent 48%),var(--surface); box-shadow:0 0 0 1px rgb(var(--brand) / .3),var(--shadow);position:relative} .plan-badge{position:absolute;top:-13px;left:50%;translate:-50% 0;background:rgb(var(--brand));color:#fff; font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:.3rem .85rem;border-radius:999px;white-space:nowrap} .plan h3{font-size:1.1rem;letter-spacing:.02em} .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;margin:.6rem 0 .2rem} .price .from{width:100%;font-size:.85rem;color:var(--muted);margin-bottom:-.35rem} .price b{font-family:var(--font-display);font-size:2.9rem;font-weight:700;letter-spacing:-.03em} .price span{color:var(--muted);font-size:.92rem} .plan .desc{color:var(--muted);font-size:.94rem;min-height:3.2em} .plan ul{margin:1.4rem 0;padding-top:1.4rem;border-top:1px solid var(--line);flex:1} .plan li{display:flex;gap:.65rem;padding:.42rem 0;font-size:.95rem;color:var(--muted)} .plan li::before{content:"✓";color:rgb(var(--brand));flex:none} .plan li.off{opacity:.45} .plan li.off::before{content:"–";color:var(--muted)} .addons{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-top:1.4rem} .addon{border:1px dashed var(--line-strong);border-radius:var(--radius-sm);padding:1.1rem 1.2rem} .addon strong{display:block;font-family:var(--font-display);font-size:1.3rem} .addon span{color:var(--muted);font-size:.9rem} /* Contacto */ .contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:start} .field{margin-bottom:1.15rem} .field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:.45rem} .field input,.field select,.field textarea{ width:100%;padding:.85rem 1rem;border-radius:var(--radius-sm); background:var(--surface-2);border:1px solid var(--line);color:var(--text); font-family:var(--font-body);font-size:.98rem;transition:border-color .18s} .field textarea{min-height:130px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{border-color:rgb(var(--brand));outline:none;box-shadow:0 0 0 3px rgb(var(--brand) / .15)} .field .err{color:var(--err);font-size:.83rem;margin-top:.35rem;display:none} .field.is-error input,.field.is-error select,.field.is-error textarea{border-color:var(--err)} .field.is-error .err{display:block} .form-note{color:var(--muted);font-size:.85rem;margin-top:1rem} .form-status{display:none;padding:1rem 1.2rem;border-radius:var(--radius-sm);margin-top:1.2rem;font-size:.95rem} .form-status.ok{display:block;background:var(--brand-soft);border:1px solid rgb(var(--brand) / .4)} .form-status.bad{display:block;background:rgba(192,57,43,.10);border:1px solid rgba(192,57,43,.35)} .info-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;margin-bottom:1.2rem} .info-card h3{font-size:1.05rem} .info-card a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px} /* ---------- 7. RESPONSIVE ---------- */ @media (max-width:980px){ .hero-grid{grid-template-columns:1fr} .videowall{height:420px;order:-1;transform:none} .videowall .wall-col--b .tile{transform:none} .compare,.plans,.contact-grid,.service,.footer-grid{grid-template-columns:1fr} .service:nth-child(even) .service-media{order:0} .plan--featured{order:-1} } @media (max-width:1000px){ body{font-size:16px} .burger{display:block} .nav-links{ position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:flex-start; gap:0;padding:1rem 1.25rem 1.5rem;background:var(--bg-soft); border-bottom:1px solid var(--line);display:none} .nav[data-open="true"] .nav-links{display:flex} .nav-links a{padding:.8rem 0;width:100%;font-size:1.05rem} .nav-actions .btn{display:none} .work-grid{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:.8rem} .work-grid .item--wide{grid-column:span 2} .videowall{grid-template-columns:1fr 1fr;height:320px;order:0} .hero-stats{gap:1.5rem} .service-media{grid-template-columns:1fr 1fr} .footer-grid{gap:1.8rem} .lb-close{top:auto;bottom:-52px;right:50%;translate:50% 0} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} .reveal{opacity:1;transform:none} .videowall{transform:none} [data-tilt],[data-tilt].is-tilting{transform:none !important} .videowall .wall-col--b .tile{transform:none} } /* ---------- 8. PACKS ---------- La grilla .plans original es de 3 columnas porque eran 3 planes mensuales. Los packs son 4, así que .plans--packs la reescribe. Sólo usa variables: los dos temas siguen funcionando solos. ------------------------------------------------------------------ */ .plans--packs{grid-template-columns:repeat(4,1fr);gap:1.1rem} .plans--packs .plan{padding:1.7rem 1.5rem} .plans--packs .price{margin-bottom:.9rem} .plans--packs .plan h3{font-size:1.18rem} .plans--packs .plan .desc{font-size:.94rem} .plans--packs .plan ul li{font-size:.95rem} /* El adicional es uno solo: que no se estire a todo el ancho. */ .addons--single{grid-template-columns:minmax(0,320px);justify-content:center} @media (max-width:1080px){ .plans--packs{grid-template-columns:repeat(2,1fr)} } @media (max-width:980px){ /* la regla general de arriba pasa .plans a 1fr; los packs se quedan en 2 columnas hasta el celular, que entran bien */ .plans--packs{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .plans--packs{grid-template-columns:1fr} } /* ---------- 9. CONTRATACIÓN Y BRIEF ---------- Las páginas contratar.html y brief.html. Reusan .field, .btn, .info-card y .checks; acá va sólo lo que no existía todavía. Todo con variables, así los dos temas siguen funcionando. ------------------------------------------------------------------ */ .checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:2.5rem;align-items:start} .checkout-grid aside{position:sticky;top:96px} /* El resumen del pedido */ .checkout-summary .eyebrow{display:block;margin-bottom:.5rem} .checkout-summary ul.checks{margin:.4rem 0 0} .checkout-summary ul.checks li{display:flex;gap:.6rem;padding:.3rem 0;color:var(--muted);font-size:.95rem} .checkout-summary ul.checks li::before{content:"✓";color:rgb(var(--brand));flex:none} .checkout-total{ display:flex;justify-content:space-between;align-items:baseline;gap:1rem; margin:1.1rem 0;padding-top:1rem;border-top:1px solid var(--line); font-family:var(--font-display); } .checkout-total b{font-size:1.7rem;font-weight:700;letter-spacing:-.02em} /* El adicional y la aceptación de alcance: la misma caja clickeable */ .adsorio-addon{ display:flex;gap:.8rem;align-items:flex-start;cursor:pointer; border:1px dashed var(--line-strong);border-radius:var(--radius-sm); padding:1rem 1.15rem;margin:1.15rem 0; transition:border-color .2s var(--ease),background .2s var(--ease); } .adsorio-addon:hover{border-color:rgb(var(--brand));background:var(--brand-soft)} .adsorio-addon:has(input:checked){border-style:solid;border-color:rgb(var(--brand));background:var(--brand-soft)} .adsorio-addon input{margin-top:.28rem;flex:none;accent-color:rgb(var(--brand));width:18px;height:18px} .adsorio-addon span{font-size:.95rem;line-height:1.55} .adsorio-addon small{color:var(--muted);font-size:.87rem} .adsorio-addon .addon-price{color:var(--brand-ink);font-weight:600} .adsorio-terms span{font-size:.88rem;color:var(--muted)} [data-co-terms-err]{display:none;color:var(--err);font-size:.83rem;margin:-.6rem 0 .6rem} /* Los botones de pago, cuando haya links directos cargados */ .pay-methods{display:grid;gap:.7rem;margin:1rem 0 1.6rem} .pay-method{flex-direction:column;gap:.15rem;padding:1rem 1.4rem;text-align:center} .pay-method__name{font-weight:600} .pay-method__detail{font-size:.83rem;opacity:.75;font-weight:400} /* Los pasos numerados del costado */ .steps-num{list-style:decimal;padding-left:1.15rem;color:var(--muted);font-size:.95rem} .steps-num li{padding:.28rem 0} /* El brief es largo: lo partimos en bloques con título */ .brief-block{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:1.7rem;margin-bottom:1.2rem; } .brief-block > h3{margin-bottom:.35rem} .brief-block > .muted{font-size:.9rem;margin-bottom:1.3rem} .field .hint{display:block;color:var(--dim);font-size:.83rem;margin-top:.35rem} .field--half{display:inline-block;width:calc(50% - .5rem)} .field--half + .field--half{margin-left:1rem} @media (max-width:980px){ .checkout-grid{grid-template-columns:1fr} .checkout-grid aside{position:static;order:-1} } @media (max-width:560px){ .field--half{width:100%} .field--half + .field--half{margin-left:0} } /* ---------- 10. BOTONES DE PAYPAL ---------- El SDK de PayPal dibuja sus propios botones en un iframe, así que no podemos darles estilo: sólo les damos el espacio y el marco. ------------------------------------------------------------------ */ .pp-buttons{margin:1.2rem 0 .4rem;min-height:52px} .pp-buttons.is-loading::before{ content:"";display:block;height:48px;border-radius:999px; background:var(--surface-2);border:1px solid var(--line); animation:pp-pulse 1.2s var(--ease) infinite; } @keyframes pp-pulse{0%,100%{opacity:.55}50%{opacity:1}} [data-pp-box]{margin-bottom:2.2rem} [data-pp-box] > h3{margin-bottom:.3rem} /* ---------- 11. CELULAR ---------- El sitio ya era fluido, pero estaba pensado desde el escritorio hacia abajo. Acá se ajusta lo que sólo se nota con el teléfono en la mano: áreas táctiles de 44px, tipografías que no desbordan en 360px, el menú desplegable usable, y los efectos de hover apagados donde no hay puntero (si no, la tarjeta queda "pegada" tras el toque). ------------------------------------------------------------------ */ /* Sin puntero fino no hay hover real: el navegador lo simula con el toque y el estado queda trabado hasta que tocás otra cosa. */ @media (hover:none){ .card:hover,.tile:hover,.btn:hover{transform:none;box-shadow:none} .card:hover{border-color:var(--line)} } /* El destello gris del toque en Android tapa el diseño de los botones. */ a,button,summary,.tile,.filter{-webkit-tap-highlight-color:rgba(0,0,0,0)} /* Respeta el notch y la barra de gestos en horizontal y abajo. */ @supports (padding:max(0px)){ .container{ padding-left:max(0px,env(safe-area-inset-left)); padding-right:max(0px,env(safe-area-inset-right)); } .site-footer{padding-bottom:calc(2rem + env(safe-area-inset-bottom))} } @media (max-width:1000px){ /* El panel del menú puede quedar más alto que la pantalla en horizontal: que scrollee él y no la página de atrás. */ .nav-links{ max-height:calc(100dvh - 72px);overflow-y:auto; box-shadow:0 22px 40px -28px rgba(0,0,0,.55); } /* Con el menú abierto, el fondo no se mueve. */ body.nav-open{overflow:hidden} /* El CTA del header no entra al lado del logo, así que lo clona el JS dentro del propio menú, donde sí se ve y se toca cómodo. */ .nav-links .nav-cta{display:block;width:100%;margin-top:.9rem} .nav-links .nav-cta .btn{width:100%;padding:.85rem 1.2rem;font-size:1rem} /* 44px reales de área táctil en los controles del header. */ .lang button{padding:.6rem .95rem;font-size:.85rem} .theme-toggle{width:42px;height:42px} .nav-links a{min-height:44px;display:flex;align-items:center} /* Los formularios: menos de 16px hace que iOS haga zoom al enfocar y el usuario queda con la página descuadrada. */ .field input,.field select,.field textarea{font-size:16px;padding:.9rem 1rem} .field textarea{min-height:120px} /* Los filtros del portfolio en una sola fila que se desliza, en vez de cuatro líneas de pastillas comiéndose la pantalla. */ .filters{ flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity; margin:1.4rem -1.25rem 1.8rem;padding:0 1.25rem .4rem; scrollbar-width:none;-ms-overflow-style:none; } .filters::-webkit-scrollbar{display:none} .filter{flex:none;scroll-snap-align:start;padding:.62rem 1.1rem} } @media (max-width:520px){ /* Titulares: el mínimo del clamp (2.4rem = 38px) desborda palabras largas en pantallas de 360px. */ h1{font-size:clamp(1.95rem,8.5vw,2.6rem)} h2{font-size:clamp(1.65rem,7vw,2.2rem)} h3{font-size:1.15rem} .page-head h1{font-size:clamp(1.95rem,8.5vw,2.6rem)} body{line-height:1.6} .lead{font-size:1rem} .container{width:min(100% - 2rem,var(--container))} .section{padding:3.2rem 0} .section--tight{padding:2.4rem 0} /* Botones a lo ancho: el pulgar no falla y la jerarquía se lee mejor. */ .btn-row{flex-direction:column;align-items:stretch;gap:.7rem;margin-top:1.5rem} .btn-row .btn{width:100%} .btn{padding:.95rem 1.4rem} /* Cajas: menos aire lateral para que el texto respire a lo ancho. */ .card,.compare-card,.plan,.info-card,.brief-block{padding:1.35rem 1.25rem} .step{padding:1.25rem 1.15rem;gap:.9rem} .step::before{font-size:1.35rem;min-width:2rem} .cta-band{padding:2rem 1.35rem;border-radius:var(--radius)} .cta-band h2{max-width:none} /* Las métricas del hero: dos columnas parejas en vez de un wrap desprolijo de tres. */ .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1rem;margin-top:2rem;padding-top:1.4rem} .hero-stats div:has(.stat-note){grid-column:1 / -1} .hero-stats .stat-note{max-width:none} .hero-stats div strong{font-size:1.55rem} .videowall{height:280px;gap:.7rem} .wall-col{gap:.7rem} /* Precios: 2.9rem se sale de la caja cuando el número tiene 6 dígitos. */ .price b{font-size:2.1rem} .plan .desc{min-height:0} .plans--packs .plan{padding:1.35rem 1.25rem} .checkout-total b{font-size:1.4rem} /* Las fichas de trabajo: el degradado y el texto ocupaban media pieza. */ .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem} .tile-meta{padding:2.2rem .7rem .7rem;gap:.35rem} .tile-meta strong{font-size:.86rem} .tile-meta small{font-size:.7rem} .tile-play{width:30px;height:30px;top:.55rem;right:.55rem} .tile-dur{top:.55rem;left:.55rem;font-size:.66rem} /* FAQ y footer */ .faq summary{font-size:.98rem;padding:1.1rem 2.2rem 1.1rem 0} .footer-grid{gap:1.6rem} .footer-grid a{padding:.5rem 0} .footer-bottom{flex-direction:column;gap:.4rem;margin-top:2rem;font-size:.82rem} /* El lightbox a pantalla casi completa, con el cierre al alcance. */ .lightbox{padding:.9rem} .lightbox video,.lightbox img{max-height:70vh} } /* Teléfonos angostos de verdad (iPhone SE, 320px). */ @media (max-width:360px){ .logo{font-size:1.08rem} .logo .mark{width:22px} .lang button{padding:.55rem .7rem} .work-grid{gap:.55rem} .hero-stats{grid-template-columns:1fr} }