/* ============================================================ PLAKA ART DESIGN — Design System Estúdio de identidade visual, embalagens e rótulos. Paleta e tipografia derivadas da marca real (logo preto/amarelo) e do universo de rótulos/embalagens impressas. ============================================================ */ /* Fontes carregadas via no de cada página (mais rápido que @import) */ :root{ /* cor */ --ink: #15130f; --ink-soft: #211d16; --paper: #f7f2e7; --paper-dim: #efe6d2; --yellow: #f5b700; --yellow-deep:#d99b00; --rust: #c1440e; /* mantida, sem uso atualmente */ --blue: #273480; --ink-60: rgba(21,19,15,.64); --ink-40: rgba(21,19,15,.42); --paper-70: rgba(247,242,231,.72); --paper-45: rgba(247,242,231,.46); --line: rgba(21,19,15,.14); --line-light: rgba(247,242,231,.22); /* tipografia */ --f-display: 'Syne', -apple-system, BlinkMacSystemFont, sans-serif; --f-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --f-mono: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ritmo */ --gutter: clamp(1.25rem, 4vw, 3rem); --radius: 2px; --max: 1240px; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; overflow-x:hidden; } body{ overflow-x:hidden; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:700; letter-spacing:.01em; line-height:1.02; text-transform:uppercase; } p{ margin:0; } button{ font-family:inherit; } .wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); } :focus-visible{ outline:3px solid var(--blue); outline-offset:3px; } /* ---------- eyebrow / mono labels ---------- */ .eyebrow{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.6em; color:var(--blue); } .eyebrow::before{ content:""; width:1.4em; height:1px; background:var(--blue); } .eyebrow.on-ink{ color:var(--yellow); } .eyebrow.on-ink::before{ background:var(--yellow); } /* ---------- buttons ---------- */ .btn{ font-family:var(--f-mono); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.6em; padding:.95em 1.5em; border:1px solid transparent; border-radius:var(--radius); transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; cursor:pointer; white-space:nowrap; } .btn:hover{ transform:translateY(-2px); } .btn-primary{ background:var(--yellow); color:var(--ink); } .btn-primary:hover{ background:var(--yellow-deep); } .btn-ghost-ink{ border-color:var(--line-light); color:var(--paper); } .btn-ghost-ink:hover{ border-color:var(--yellow); color:var(--yellow); } .btn-ghost-paper{ border-color:var(--line); color:var(--ink); } .btn-ghost-paper:hover{ border-color:var(--blue); color:var(--blue); } .btn svg{ width:1em; height:1em; } /* ---------- header ---------- */ .site-header{ position:sticky; top:0; z-index:50; background:var(--ink); border-bottom:1px solid var(--line-light); } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:.9rem; } .brand img{ height:34px; width:auto; } .brand{ flex-shrink:0; } .main-nav{ display:flex; align-items:center; gap:2.4rem; } .main-nav ul{ display:flex; gap:1.8rem; } .main-nav a{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-70); padding-block:.3rem; border-bottom:1px solid transparent; transition:color .15s ease, border-color .15s ease; } .main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--yellow); border-color:var(--yellow); } .main-nav .btn-primary, .main-nav .btn-primary:hover{ color:var(--ink); border-color:transparent; } .nav-toggle{ display:none; background:none; border:1px solid var(--line-light); color:var(--paper); width:42px; height:42px; border-radius:var(--radius); align-items:center; justify-content:center; } .nav-toggle svg{ width:20px; height:20px; } @media (max-width: 860px){ .nav-toggle{ display:flex; } .main-nav{ position:fixed; inset:0 0 0 auto; width:min(84vw,340px); background:var(--ink); flex-direction:column; align-items:flex-start; padding:5.5rem 2rem 2rem; gap:2.2rem; transform:translateX(100%); transition:transform .3s ease; border-left:1px solid var(--line-light); } .main-nav.is-open{ transform:translateX(0); } .main-nav ul{ flex-direction:column; gap:1.4rem; } .main-nav .btn{ width:100%; justify-content:center; } } /* ---------- page hero band (páginas internas) ---------- */ .page-hero{ background:var(--ink); color:var(--paper); padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem); position:relative; overflow:hidden; } .page-hero::after{ content:""; position:absolute; inset:auto -10% -60% auto; width:46%; aspect-ratio:1; background:radial-gradient(circle at center, rgba(245,183,0,.16), transparent 70%); pointer-events:none; } .page-hero h1{ font-size:clamp(2.4rem, 6vw, 4.4rem); color:var(--paper); margin-top:.6rem; max-width:16ch; } .page-hero .lede{ font-family:var(--f-body); text-transform:none; letter-spacing:0; font-size:1.05rem; color:var(--paper-70); max-width:56ch; margin-top:1.1rem; } .crumbs{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-45); margin-top:1.6rem; } .crumbs a{ color:var(--paper-70); } .crumbs a:hover{ color:var(--yellow); } /* ---------- section scaffolding ---------- */ section{ padding-block: clamp(3.5rem, 8vw, 6.5rem); } .section-head{ max-width:62ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .section-head h2{ font-size:clamp(2rem, 4.4vw, 3.1rem); margin-top:.6rem; } .on-ink{ background:var(--ink); color:var(--paper); } .on-paper-dim{ background:var(--paper-dim); } /* ---------- crop-mark tag frame (elemento assinatura) ---------- */ .tag-frame{ position:relative; border:1px solid var(--line); } .tag-frame::before,.tag-frame::after, .tag-frame .tick-tl, .tag-frame .tick-br{ content:""; position:absolute; width:14px; height:14px; pointer-events:none; } .tag-frame::before{ top:-1px; left:-1px; border-top:2px solid var(--blue); border-left:2px solid var(--blue); } .tag-frame::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--blue); border-right:2px solid var(--blue); } .on-ink .tag-frame::before, .on-ink .tag-frame::after{ border-color:var(--yellow); } /* ---------- hero (home) ---------- */ .hero{ background:var(--ink); color:var(--paper); padding-block: clamp(3.5rem,9vw,6rem) clamp(4rem,10vw,7rem); position:relative; overflow:hidden; } .hero::after{ content:""; position:absolute; inset:-20% -10% auto auto; width:50%; aspect-ratio:1; background:radial-gradient(circle at center, rgba(245,183,0,.14), transparent 68%); } .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; position:relative; z-index:1; } .hero h1{ font-size:clamp(2.6rem, 6.4vw, 5.2rem); color:var(--paper); margin-top:.8rem; } .hero h1 em{ font-style:normal; color:var(--yellow); } .hero .lede{ font-family:var(--f-body); text-transform:none; letter-spacing:0; font-weight:400; font-size:1.08rem; color:var(--paper-70); max-width:52ch; margin-top:1.3rem; } .hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; } .swatch-board{ position:relative; height:clamp(320px,42vw,480px); display:flex; align-items:center; justify-content:center; } @media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; } .swatch-board{ height:clamp(260px,90vw,380px); margin-top:1rem; } } /* ---------- selo (brand seal) ---------- */ .brand-seal{ position:relative; z-index:4; width:clamp(200px,26vw,340px); aspect-ratio:1; filter:drop-shadow(0 20px 40px rgba(0,0,0,.45)); animation:seal-spin 26s linear infinite; } .brand-seal svg, .brand-seal img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:100%; } @keyframes seal-spin{ to{ transform:rotate(360deg); } } @media (max-width:960px){ .brand-seal{ width:min(56vw,260px); } } /* ---------- on-yellow (seção com fundo amarelo + padrão de linhas, identidade Plaka) ---------- */ .on-yellow{ background:var(--yellow); color:var(--ink); position:relative; overflow:hidden; } .on-yellow::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cpath d='M-10 60 C 90 10, 150 110, 250 60 S 430 10, 470 60' fill='none' stroke='%2315130f' stroke-opacity='0.16' stroke-width='2'/%3E%3Cpath d='M-10 220 C 90 170, 150 270, 250 220 S 430 170, 470 220' fill='none' stroke='%2315130f' stroke-opacity='0.16' stroke-width='2'/%3E%3Cpath d='M-10 360 C 90 310, 150 410, 250 360 S 430 310, 470 360' fill='none' stroke='%2315130f' stroke-opacity='0.16' stroke-width='2'/%3E%3Ccircle cx='40' cy='140' r='3' fill='%2315130f' fill-opacity='.18'/%3E%3Ccircle cx='330' cy='300' r='3' fill='%2315130f' fill-opacity='.18'/%3E%3C/svg%3E"); background-size:420px 420px; } .on-yellow > .wrap{ position:relative; z-index:1; } .on-yellow .eyebrow{ color:var(--ink); } .on-yellow .eyebrow::before{ background:var(--ink); } /* ---------- services (rótulos) ---------- */ .label-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2rem); } .label-grid.cols-2{ grid-template-columns:repeat(2,1fr); max-width:820px; margin-inline:auto; } .label-card{ background:var(--paper); display:flex; flex-direction:column; } .label-card .thumb{ aspect-ratio:4/3; overflow:hidden; } .label-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .label-card:hover .thumb img{ transform:scale(1.05); } .label-card .body{ padding:1.4rem 1.4rem 1.6rem; } .mono-tag{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; color:var(--blue); border:1px solid var(--blue); border-radius:100px; padding:.15rem .65rem; display:inline-block; margin-bottom:.9rem; } .label-card h3{ font-size:1.5rem; } .label-card .desc{ font-family:var(--f-body); text-transform:none; letter-spacing:0; font-weight:400; font-size:.95rem; color:var(--ink-60); margin-top:.7rem; line-height:1.6; } @media (max-width:900px){ .label-grid, .label-grid.cols-2{ grid-template-columns:1fr; } } /* ---------- studio teaser / about split ---------- */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; } .split.split--sidebar{ grid-template-columns:2fr 1fr; align-items:start; } .split .media img{ width:100%; aspect-ratio:4/3.4; object-fit:cover; } .split .media img.selo{ aspect-ratio:1; object-fit:contain; background:var(--paper-dim); padding:1.5rem; } .split .text .eyebrow{ margin-bottom:1rem; } .split .text h2{ font-size:clamp(1.9rem,4vw,2.7rem); } .split .text p{ font-family:var(--f-body); text-transform:none; letter-spacing:0; font-weight:400; margin-top:1.1rem; color:var(--ink-60); font-size:1rem; } .split .text .btn{ margin-top:1.6rem; } @media (max-width:860px){ .split, .split.split--sidebar{ grid-template-columns:1fr; } .split .media{ order:-1; } } .project-facts{ background:var(--paper); padding:clamp(1.6rem,3vw,2.2rem); } .project-facts h3{ font-family:var(--f-display); font-size:1.15rem; text-transform:uppercase; margin-bottom:1.4rem; } .project-facts dl{ display:grid; gap:1.1rem; margin:0; } .project-facts dl div + div{ border-top:1px solid var(--line); padding-top:1.1rem; } .project-facts dt{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-40); } .project-facts dd{ margin:.3rem 0 0; font-family:var(--f-body); font-size:1rem; color:var(--ink); } .project-facts .btn{ margin-top:1.8rem; width:100%; justify-content:center; } .project-cover{ margin-bottom:clamp(2rem,5vw,3rem); } .project-cover img{ width:100%; aspect-ratio:3/2; object-fit:cover; } /* ---------- modal de projeto (galeria + detalhes, sem sair da página) ---------- */ .project-modal{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); } .project-modal[hidden]{ display:none; } .project-modal__backdrop{ position:absolute; inset:0; background:rgba(21,19,15,.72); } .project-modal__panel{ position:relative; background:var(--paper); width:100%; max-width:920px; max-height:88vh; overflow-y:auto; padding:clamp(1.6rem,4vw,3rem); border:1px solid var(--line); } .project-modal__close{ position:absolute; top:1rem; right:1rem; z-index:2; width:40px; height:40px; border:1px solid var(--line); background:var(--paper); display:flex; align-items:center; justify-content:center; cursor:pointer; } .project-modal__close:hover{ border-color:var(--blue); color:var(--blue); } .project-modal__close svg{ width:18px; height:18px; } .project-modal__body h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-top:.6rem; } .project-modal__gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-top:1.6rem; } .project-modal__gallery img{ width:100%; height:auto; display:block; } .project-modal__gallery img:first-child{ grid-column:1 / -1; } .project-modal__text{ margin-top:1.6rem; } .project-modal__text p{ font-family:var(--f-body); text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink-60); font-size:.98rem; line-height:1.7; margin-top:.9rem; } .project-modal__body .btn{ margin-top:1.8rem; } @media (max-width:600px){ .project-modal__gallery{ grid-template-columns:1fr; } .project-modal__gallery img:first-child{ aspect-ratio:4/3; } } /* grade simples de 2 fotos extras nas páginas individuais de projeto */ .photo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.4rem; } .photo-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; } .photo-grid img.contido{ object-fit:contain; background:var(--paper-dim); } @media (max-width:640px){ .photo-grid{ grid-template-columns:1fr; } } /* stat row */ .stat-row{ display:flex; flex-wrap:wrap; gap:clamp(1.6rem,5vw,3.4rem); margin-top:2.4rem; } .stat b{ display:block; font-family:var(--f-display); font-size:clamp(2.2rem,4vw,3rem); color:var(--yellow); } .on-paper .stat b, .split .stat b{ color:var(--blue); } .stat span{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-60); } .on-ink .stat span{ color:var(--paper-45); } /* ---------- testimonial ---------- */ .testimonial{ display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:start; } .testimonial .mark{ width:52px; opacity:.9; } .testimonial blockquote{ margin:0; font-family:var(--f-display); font-weight:700; text-transform:none; font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.35; color:var(--ink); } .testimonial figcaption{ display:flex; align-items:center; gap:.9rem; margin-top:1.6rem; } .testimonial figcaption img{ width:44px; height:44px; border-radius:100%; object-fit:cover; border:1px solid var(--line); } .testimonial figcaption .who{ font-family:var(--f-mono); font-size:.76rem; letter-spacing:.04em; } .testimonial figcaption .who b{ display:block; font-family:var(--f-body); font-weight:700; font-size:.95rem; letter-spacing:0; text-transform:none; } @media (max-width:640px){ .testimonial{ grid-template-columns:1fr; } } /* ---------- values list ---------- */ .value-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.6rem 2rem; } .value-list li{ border-top:1px solid var(--line); padding-top:1rem; } .on-ink .value-list li{ border-color:var(--line-light); } .value-list b{ font-family:var(--f-display); font-size:1.15rem; letter-spacing:.02em; text-transform:uppercase; display:block; } .value-list p{ font-family:var(--f-body); text-transform:none; letter-spacing:0; margin-top:.4rem; color:var(--ink-60); font-size:.92rem; } .on-ink .value-list p{ color:var(--paper-70); } /* ---------- deliverables (o que entregamos) ---------- */ .deliv-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line); border:1px solid var(--line); } .deliv-grid.cols-3{ grid-template-columns:repeat(3,1fr); } .deliv-card{ background:var(--paper); padding:2rem clamp(1.4rem,3vw,2.2rem); } .deliv-card h3{ font-size:1.4rem; } .deliv-card ul{ margin-top:1rem; display:grid; gap:.5rem; } .deliv-card li{ font-family:var(--f-body); text-transform:none; letter-spacing:0; font-size:.94rem; color:var(--ink-60); padding-left:1.1rem; position:relative; } .deliv-card li::before{ content:"—"; position:absolute; left:0; color:var(--blue); } @media (max-width:700px){ .deliv-grid, .deliv-grid.cols-3{ grid-template-columns:1fr; } } /* ---------- portfolio (projetos) ---------- */ .project{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; padding-block:clamp(2.4rem,6vw,4rem); border-top:1px solid var(--line); } .project:first-of-type{ border-top:none; } .project .media img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease; } .project--link{ cursor:pointer; } .project--link:hover .media img{ transform:scale(1.03); } .project .info .mono-tag{ margin-bottom:1rem; } .project .info h3{ font-size:clamp(1.6rem,3vw,2.2rem); } .project .info p{ font-family:var(--f-body); text-transform:none; letter-spacing:0; font-weight:400; margin-top:1rem; color:var(--ink-60); font-size:.98rem; } .project-more{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.04em; color:var(--blue); display:inline-block; margin-top:1.2rem; transition:transform .15s ease; } .project--link:hover .project-more{ transform:translateX(5px); } .project:nth-of-type(even) .media{ order:2; } @media (max-width:820px){ .project{ grid-template-columns:1fr; } .project:nth-of-type(even) .media{ order:-1; } } /* ---------- contact ---------- */ .contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.5rem,6vw,5rem); } .contact-list{ display:grid; gap:1.8rem; margin-top:2rem; } .contact-item{ border-top:1px solid var(--line-light); padding-top:1.2rem; } .contact-item .eyebrow{ margin-bottom:.5rem; } .contact-item a, .contact-item p{ font-size:1.05rem; } .contact-item a:hover{ color:var(--yellow); } .social-row{ display:flex; gap:.9rem; margin-top:2rem; } .social-row a{ border:1px solid var(--line-light); width:42px; height:42px; border-radius:100%; display:flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s; } .social-row a:hover{ border-color:var(--yellow); color:var(--yellow); } .social-row img{ width:18px; height:18px; display:block; } .form-card{ background:var(--paper); padding:clamp(1.6rem,4vw,2.6rem); border:1px solid var(--line); } .field{ margin-bottom:1.2rem; } .field label{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:.5rem; color:var(--ink-60); } .field input, .field select, .field textarea{ width:100%; font-family:var(--f-body); font-size:.98rem; padding:.85em 1em; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-dim); color:var(--ink); } .field textarea{ resize:vertical; min-height:120px; } .field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--blue); outline-offset:1px; background:var(--paper); } .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; } @media (max-width:560px){ .row-2{ grid-template-columns:1fr; } } .form-note{ font-family:var(--f-mono); font-size:.72rem; color:var(--ink-40); margin-top:.9rem; } .form-status{ font-family:var(--f-mono); font-size:.85rem; font-weight:700; padding:.9rem 1.1rem; border-radius:var(--radius); margin-bottom:1.4rem; } .form-status.is-success{ background:rgba(39,52,128,.1); color:var(--blue); border:1px solid rgba(39,52,128,.3); } .form-status.is-error{ background:rgba(193,68,14,.1); color:#8a3009; border:1px solid rgba(193,68,14,.3); } @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } } .map-frame{ border:1px solid var(--line); margin-top:2rem; filter:grayscale(.4) contrast(1.05); } .map-frame iframe{ width:100%; height:280px; display:block; border:0; } /* ---------- footer ---------- */ .site-footer{ background:var(--paper-dim); border-top:1px solid var(--line); padding-block:3rem 1.8rem; } .footer-top{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.5rem; padding-bottom:2.4rem; } .footer-top img{ height:36px; width:auto; aspect-ratio:435/167; } .footer-col h4{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-40); margin-bottom:1rem; } .footer-col ul{ display:grid; gap:.65rem; } .footer-col a{ font-size:.92rem; color:var(--ink-60); } .footer-col a:hover{ color:var(--blue); } .footer-brand p{ font-family:var(--f-body); font-size:.9rem; color:var(--ink-60); margin-top:1rem; max-width:32ch; } .footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); padding-top:1.4rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.04em; color:var(--ink-40); } @media (max-width:760px){ .footer-top{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1/-1; } } /* ---------- skip link ---------- */ .skip-link{ position:absolute; left:-999px; top:auto; background:var(--yellow); color:var(--ink); padding:.8em 1.2em; z-index:100; font-family:var(--f-mono); font-size:.8rem; } .skip-link:focus{ left:1rem; top:1rem; } /* ---------- cookie consent bar ---------- */ .cookie-bar{ position:fixed; left:0; right:0; bottom:0; z-index:80; background:var(--ink); color:var(--paper); border-top:1px solid var(--line-light); padding:1.4rem clamp(1.25rem,4vw,3rem); transform:translateY(100%); transition:transform .35s ease; } .cookie-bar.is-visible{ transform:translateY(0); } .cookie-bar__inner{ max-width:var(--max); margin-inline:auto; display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 2rem; } .cookie-bar__text{ flex:1 1 380px; } .cookie-bar__text p{ font-family:var(--f-body); font-size:.9rem; line-height:1.6; color:var(--paper-70); text-transform:none; letter-spacing:0; } .cookie-bar__text a{ color:var(--yellow); text-decoration:underline; text-underline-offset:2px; } .cookie-bar__actions{ display:flex; gap:.8rem; flex-wrap:wrap; } @media (max-width:560px){ .cookie-bar__actions{ width:100%; } .cookie-bar__actions .btn{ flex:1; justify-content:center; } } /* ---------- página de política (prosa longa) ---------- */ .policy-content{ max-width:74ch; } .policy-content h2{ font-size:1.6rem; margin-top:2.6rem; } .policy-content h2:first-child{ margin-top:0; } .policy-content p, .policy-content li{ font-family:var(--f-body); text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink-60); font-size:.98rem; line-height:1.75; margin-top:.9rem; } .policy-content ul{ padding-left:1.2rem; list-style:disc; } .policy-content li{ margin-top:.4rem; } .policy-content strong{ color:var(--ink); } .policy-updated{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-40); margin-bottom:2rem; display:block; }