/* Portada de Gremi Labs. Fons blanc, lletra Geist i finestres amb les captures de cada producte: l'únic color és el de les captures. */
@font-face { font-family: "Geist"; src: url("fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --ink: #0a0a0a; --suau: #5c5c5c; --fondo: #f4f4f2; --linea: #e4e4e1; --negro: #0c0c0d; --sobre-negro: #c4c4c6;
  --f: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gut: 40px; --sec: clamp(88px, 10vw, 144px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 17px/1.55 var(--f); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
p, li, dd { text-wrap: pretty; }
h1 { font-size: clamp(42px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -.04em; font-weight: 500; text-wrap: balance; }
h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -.035em; font-weight: 500; text-wrap: balance; }
h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; font-weight: 500; text-wrap: balance; }
figcaption { font-size: 15px; color: var(--suau); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.marco { max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); }
.dos { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
.lead { font-size: 19px; line-height: 1.5; color: var(--suau); }
.sec { padding-top: var(--sec); }
.cabeza { margin-bottom: 48px; }

.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 10px; font-weight: 500; font-size: 16px; line-height: 1.2; text-align: center; text-decoration: none; transition: background-color .2s, transform .15s; }
.boton:active { transform: scale(.98); }
.boton-negro { background: var(--ink); color: #fff; }
.boton-negro:hover { background: #333; }
.boton-linea { box-shadow: inset 0 0 0 1px #cfcfcb; }
.boton-linea:hover { background: var(--fondo); }
.boton-peque { min-height: 40px; padding: 0 16px; font-size: 15px; }

.barra { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); }
.barra-in { display: flex; align-items: center; min-height: 68px; gap: 32px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.menu { display: flex; gap: 28px; margin-left: auto; font-size: 15px; }
.menu a { color: var(--suau); text-decoration: none; transition: color .2s; }
.menu a:hover { color: var(--ink); }

.hero { padding-top: clamp(48px, 7vw, 96px); }
.hero-dcha { display: grid; gap: 24px; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.escena { display: grid; grid-template-columns: minmax(0, 1fr) clamp(180px, 19vw, 256px); gap: 28px; align-items: center; margin-top: 56px; background: var(--fondo); border-radius: 20px; padding: 48px; }
.ventana { background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--linea), 0 18px 48px rgba(0, 0, 0, .08); overflow: hidden; }
.ventana-barra { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--linea); }
.ventana-barra i { width: 10px; height: 10px; border-radius: 50%; background: #dcdcd8; }
.movil { background: #111; padding: 7px; border-radius: 32px; box-shadow: 0 18px 48px rgba(0, 0, 0, .18); }
.movil img { border-radius: 26px; }

.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tarjeta { display: flex; flex-direction: column; gap: 10px; background: var(--fondo); border-radius: 20px; padding: 24px 24px 32px; }
.tarjeta p { color: var(--suau); }
.muestra { display: grid; place-items: center; min-height: 208px; margin-bottom: 14px; }
.mini { width: 100%; max-width: 300px; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--linea); padding: 20px; display: grid; gap: 4px; }
.mini-et { font-size: 14px; color: var(--suau); }
.mini-cifra { font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -.03em; }
.mini-nombre { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.mini-barra { display: block; height: 8px; border-radius: 4px; background: var(--linea); margin-top: 12px; overflow: hidden; }
.mini-barra i { display: block; width: 18%; height: 100%; background: var(--ink); }
.mini-botones { display: flex; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 500; }
.mini-wa, .mini-cita { padding: 8px 12px; border-radius: 8px; }
.mini-wa { background: var(--ink); color: #fff; }
.mini-cita { box-shadow: inset 0 0 0 1px #cfcfcb; }
.muestra-wa { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 8px; }
.wa { max-width: 85%; padding: 9px 12px; border-radius: 10px; font-size: 15px; line-height: 1.35; }
.wa-sale { align-self: flex-end; background: #d9fdd3; }
.wa-entra { align-self: flex-start; background: #fff; box-shadow: 0 0 0 1px var(--linea); }

.prod { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; background: var(--fondo); border-radius: 20px; padding: 48px; }
.prod + .prod { margin-top: 16px; }
.prod-giro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.prod-giro .prod-text { order: 2; }
.prod-text { display: grid; gap: 14px; justify-items: start; }
.prod-text > p { color: var(--suau); }
.prod-para { font-size: 15px; }
.prod-text h3 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -.035em; }
.prod-text .prod-frase { color: var(--ink); font-size: 19px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; }
.prod-pasos { display: grid; gap: 8px; margin-bottom: 8px; }
.prod-pasos b { font-weight: 500; }
.prod-img figcaption { margin-top: 12px; }
.otro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 48px; margin-top: 16px; border-radius: 20px; padding: 32px 48px; box-shadow: inset 0 0 0 1px var(--linea); }
.otro p { color: var(--suau); max-width: 60ch; margin-top: 6px; }

.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--linea); padding-top: 28px; }
.pasos h3 { font-size: 20px; margin-bottom: 8px; }
.pasos p { color: var(--suau); font-size: 16px; }

.esperar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; border-top: 1px solid var(--linea); padding-top: 28px; }
.esperar dt { font-size: 20px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; margin-bottom: 8px; }
.esperar dd { color: var(--suau); font-size: 16px; }

.nombre { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.nombre-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 40%; border-radius: 20px; filter: grayscale(1); }
.nombre-foto figcaption { margin-top: 12px; }
.nombre-text { display: grid; gap: 18px; }
.nombre-text > p:not(.lead) { color: var(--suau); }
.nombre-marca { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.nombre-marca img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; filter: grayscale(1); }

.preg { align-items: start; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pregs details { border-top: 1px solid var(--linea); }
.pregs details:last-child { border-bottom: 1px solid var(--linea); }
.pregs summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; font-size: 19px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.pregs summary::-webkit-details-marker { display: none; }
.pregs summary::after { content: "+"; margin-left: auto; font-size: 24px; font-weight: 400; line-height: 1; color: var(--suau); transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.pregs details[open] summary::after { transform: rotate(45deg); }
.pregs details p { padding-bottom: 24px; max-width: 62ch; color: var(--suau); }

.contacto { margin-top: var(--sec); background: var(--negro); color: #fff; padding: clamp(72px, 8vw, 112px) 0; }
.contacto-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 72px; align-items: start; }
.contacto-text { display: grid; gap: 20px; }
.contacto-text p { color: var(--sobre-negro); max-width: 44ch; }
.contacto-text .lead { color: #fff; }
.contacto-form iframe { display: block; width: 100%; height: 540px; border: 0; background: transparent; }
.form-nota { margin-top: 12px; font-size: 15px; color: var(--sobre-negro); }

.pie { background: var(--negro); color: var(--sobre-negro); font-size: 15px; padding-bottom: 36px; }
.pie-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr); gap: 32px; border-top: 1px solid #2a2a2e; padding-top: 48px; }
.pie .marca { color: #fff; font-size: 17px; }
.pie-marca p { margin-top: 12px; }
.pie h2 { color: #fff; font-size: 15px; line-height: 1.4; letter-spacing: 0; margin-bottom: 10px; }
.pie-in nav a, .pie-col a { display: block; padding: 3px 0; text-decoration: none; overflow-wrap: anywhere; transition: color .2s; }
.pie-in nav a:hover, .pie-col a:hover { color: #fff; }
.pie-legal { display: grid; gap: 6px; margin-top: 48px; font-size: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-r] { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); }
  .js [data-r].in { opacity: 1; transform: none; }
  .escena { animation: entra .8s .1s cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes entra { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Per sota d'aquesta amplada el formulari va en una columna i és més alt. */
@media (max-width: 1280px) { .contacto-form iframe { height: 660px; } }
@media (max-width: 980px) {
  :root { --gut: 20px; }
  .menu { display: none; }
  .barra-in .boton { margin-left: auto; }
  .dos, .preg, .prod, .prod-giro, .nombre, .contacto-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .prod-giro .prod-text { order: 0; }
  .escena { grid-template-columns: minmax(0, 1fr) 150px; gap: 16px; padding: 24px; margin-top: 36px; }
  .tres { grid-template-columns: minmax(0, 1fr); }
  .prod { padding: 28px; gap: 28px; }
  .otro { padding: 28px; }
  .pasos, .esperar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contacto-in { gap: 40px; }
  .pie-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  :root { --gut: 16px; }
  .escena { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 28px 20px 0; max-height: 500px; overflow: hidden; }
  .escena-ventana { display: none; }
  .movil { width: min(250px, 70vw); border-radius: 32px 32px 0 0; }
  .acciones .boton { flex: 1 1 100%; }
  .prod { padding: 20px; }
  .otro { padding: 20px; }
  .otro .boton { width: 100%; }
  .prod-text .boton { width: 100%; }
  .pasos, .esperar { grid-template-columns: minmax(0, 1fr); }
  .pie-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-col { grid-column: 1 / -1; }
}