/*
 * Web pública de G&P Digital.
 * La misma identidad que los flyers: tinta del logo neón, tipografía con
 * carácter (Bricolage Grotesque + Instrument Serif), el rosa → naranja solo de
 * acento, y trabajos reales en las pantallas. Dos secciones en crema para que
 * no sea un bloque oscuro de punta a punta.
 */
:root {
  --tinta: #120a10;
  --tinta-2: #1b1118;
  --tinta-3: #251922;
  --crema: #f7efe9;
  --crema-fondo: #f6eee8;
  --texto: #f7efe9;
  --texto-2: rgba(247, 239, 233, 0.7);
  --texto-3: rgba(247, 239, 233, 0.46);
  --linea: rgba(247, 239, 233, 0.11);
  --oscuro: #1d1218;
  --oscuro-2: #5b4b54;
  --linea-clara: rgba(29, 18, 24, 0.12);
  --rosa: #ff4f8b;
  --rosa-fuerte: #e2337a;
  --naranja: #ff9a4d;
  --degrade: linear-gradient(100deg, #ff4f8b 0%, #ff6f6a 45%, #ffa64d 100%);
  --wa: #25d366;
  --ancho: 1180px;
  --radio: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --resorte: cubic-bezier(0.34, 1.56, 0.64, 1);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--tinta);
  color: var(--texto);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* grano fino, como papel impreso */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
::selection {
  background: var(--rosa);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--rosa);
  outline-offset: 3px;
  border-radius: 8px;
}
.contenedor {
  width: min(var(--ancho), calc(100% - 48px));
  margin: 0 auto;
}
.serif {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  background: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.antetitulo::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--degrade);
}
.titulo-seccion {
  font-family: "Bricolage Grotesque", "Geist", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 96, "wdth" 88;
  margin-top: 14px;
}
.titulo-seccion .serif {
  font-size: 1.1em;
  letter-spacing: -0.01em;
}
.bajada {
  margin-top: 18px;
  max-width: 620px;
  font-size: 19px;
  color: var(--texto-2);
}
.seccion {
  padding: 120px 0;
  position: relative;
}
.seccion.crema {
  background: var(--crema-fondo);
  color: var(--oscuro);
}
.seccion.crema .antetitulo {
  color: var(--oscuro-2);
}
.seccion.crema .bajada {
  color: var(--oscuro-2);
}

/* ── botones ── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 26px;
  border-radius: 99px;
  font-size: 16.5px;
  font-weight: 650;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform 0.25s var(--ease),
    background-color 0.2s,
    box-shadow 0.25s,
    border-color 0.2s;
}
.boton:hover {
  transform: translateY(-2px);
}
.boton:active {
  transform: scale(0.98);
}
.boton svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.boton.wa {
  background: var(--wa);
  color: #06301a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 14px 32px -14px rgba(37, 211, 102, 0.7);
}
.boton.wa svg {
  fill: #06301a;
}
.boton.wa:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 20px 40px -14px rgba(37, 211, 102, 0.85);
}
.boton.borde {
  border-color: rgba(247, 239, 233, 0.25);
  color: var(--texto);
}
.boton.borde:hover {
  border-color: rgba(247, 239, 233, 0.5);
  background: rgba(247, 239, 233, 0.05);
}
.boton.chico {
  height: 42px;
  padding: 0 18px;
  font-size: 15px;
}
.boton.chico svg {
  width: 18px;
  height: 18px;
}
.seccion.crema .boton.borde {
  border-color: var(--linea-clara);
  color: var(--oscuro);
}
.seccion.crema .boton.borde:hover {
  border-color: rgba(29, 18, 24, 0.35);
  background: rgba(29, 18, 24, 0.04);
}
.flecha {
  transition: transform 0.25s var(--ease);
}
a:hover .flecha {
  transform: translate(3px, -3px);
}

/* ── encabezado ── */
.encabezado {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition:
    background-color 0.3s,
    border-color 0.3s,
    backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.encabezado.con-fondo {
  background: rgba(18, 10, 16, 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--linea);
}
.encabezado .contenedor {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 78px;
}
.encabezado .marca img {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 4px 14px rgba(255, 79, 139, 0.35));
}
.menu {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.menu a {
  padding: 8px 12px;
  border-radius: 99px;
  font-size: 15px;
  font-weight: 500;
  color: var(--texto-2);
  transition:
    color 0.2s,
    background-color 0.2s;
}
.menu a:hover {
  color: var(--texto);
  background: rgba(247, 239, 233, 0.06);
}
.abrir-menu {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--linea);
  background: rgba(247, 239, 233, 0.04);
  color: var(--texto);
  cursor: pointer;
}
.abrir-menu svg {
  width: 22px;
  height: 22px;
  margin: auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ── portada ── */
.portada {
  position: relative;
  padding: 160px 0 40px;
  overflow: hidden;
}
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 50% at 78% 45%, rgba(255, 79, 139, 0.2), transparent 70%),
    radial-gradient(35% 40% at 100% 90%, rgba(255, 154, 77, 0.13), transparent 70%);
  pointer-events: none;
}
.portada .contenedor {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.portada h1 {
  font-family: "Bricolage Grotesque", "Geist", sans-serif;
  font-weight: 800;
  font-size: clamp(46px, 6.6vw, 86px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 96, "wdth" 86;
  margin-top: 22px;
}
.portada h1 .serif {
  font-size: 1.1em;
  letter-spacing: -0.015em;
}
.portada .bajada {
  font-size: 20px;
  max-width: 540px;
}
.acciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.confianza {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 34px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--texto-3);
}
.confianza li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.confianza svg {
  width: 17px;
  height: 17px;
  stroke: var(--rosa);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.escena {
  position: relative;
  height: 520px;
}
.escena .laptop {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
}
.escena .iphone {
  position: absolute;
  right: -6px;
  bottom: 0;
  width: 168px;
}
.globito {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 16px;
  background: rgba(27, 17, 24, 0.9);
  border: 1px solid var(--linea);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.8);
  font-size: 14px;
  line-height: 1.3;
  z-index: 3;
  animation: flotar 6s ease-in-out infinite;
}
.globito b {
  display: block;
  font-size: 15px;
  color: var(--texto);
}
.globito span {
  color: var(--texto-3);
}
.globito i {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.globito i svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.globito.uno {
  left: -34px;
  top: 300px;
}
.globito.uno i {
  background: rgba(37, 211, 102, 0.15);
  color: #4be08a;
}
.globito.dos {
  right: 120px;
  top: 0;
  animation-delay: -3s;
}
.globito.dos i {
  background: rgba(255, 79, 139, 0.15);
  color: #ff8fb3;
}
@keyframes flotar {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.leyenda-escena {
  position: absolute;
  left: 0;
  bottom: -38px;
  font-size: 13.5px;
  color: var(--texto-3);
}

/* ── dispositivos ── */
.laptop .tapa {
  border-radius: 16px 16px 6px 6px;
  padding: 10px 10px 14px;
  background: linear-gradient(180deg, #2b2227, #120c10);
  box-shadow:
    0 0 0 1.5px #4a3f45,
    0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
.laptop .tapa img {
  width: 100%;
  border-radius: 6px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}
.laptop .base {
  position: relative;
  height: 13px;
  margin: 0 -7%;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #5b5056, #2a2226 70%, #1a1418);
}
.laptop .base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 5px;
  border-radius: 0 0 7px 7px;
  background: #1a1418;
}
.iphone {
  position: relative;
  border-radius: 34px;
  padding: 7px;
  background: linear-gradient(145deg, #3a3036, #120c10 40%, #2b2227);
  box-shadow:
    0 0 0 1.5px #4a3f45,
    0 30px 60px -18px rgba(0, 0, 0, 0.85);
}
.iphone img {
  width: 100%;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top;
  border-radius: 28px;
}
.iphone::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 31%;
  height: 4.2%;
  border-radius: 20px;
  background: #000;
}

/* ── rubros ── */
.rubros {
  margin-top: 54px;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.rubros-lista {
  display: grid;
  gap: 6px;
}
.rubros-lista button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  font-size: 16.5px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.rubros-lista button:hover {
  background: rgba(247, 239, 233, 0.04);
  color: var(--texto);
}
.rubros-lista button[aria-selected="true"] {
  background: var(--tinta-3);
  border-color: rgba(255, 79, 139, 0.35);
  color: var(--texto);
}
.rubros-lista svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rubros-lista button[aria-selected="true"] svg {
  stroke: #ff8fb3;
}
.rubro-panel {
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: linear-gradient(160deg, var(--tinta-2), var(--tinta) 70%);
  padding: 38px;
  min-height: 100%;
}
.rubro-panel[hidden] {
  display: none;
}
.rubro-panel.entrando {
  animation: aparece 0.45s var(--ease) both;
}
@keyframes aparece {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.rubro-panel h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 750;
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.rubro-panel > p {
  margin-top: 12px;
  font-size: 18.5px;
  color: var(--texto-2);
  max-width: 560px;
}
.tildes {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}
.tildes li {
  display: flex;
  gap: 10px;
  font-size: 16px;
  color: var(--texto-2);
}
.tildes li::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8fb3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
      center / 14px no-repeat,
    rgba(255, 79, 139, 0.12);
}
.rubro-panel .acciones {
  margin-top: 30px;
}
.rubro-panel .caso {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
  font-size: 15px;
  color: var(--texto-3);
}
.rubro-panel .caso b {
  color: var(--texto-2);
  font-weight: 600;
}

/* ── servicios ── */
.servicios {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.servicio {
  position: relative;
  padding: 30px 26px 28px;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: var(--tinta-2);
  overflow: hidden;
  transition:
    transform 0.35s var(--ease),
    border-color 0.25s;
}
.servicio:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 79, 139, 0.35);
}
.servicio::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 0;
  height: 2px;
  background: var(--degrade);
  transform: scaleX(0.15);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.servicio:hover::after {
  transform: scaleX(1);
}
.servicio .numero {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--texto-3);
}
.servicio h3 {
  margin-top: 18px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 750;
  font-size: 25px;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.servicio > p {
  margin-top: 10px;
  font-size: 16px;
  color: var(--texto-2);
}
.servicio ul {
  list-style: none;
  padding: 18px 0 0;
  margin: 18px 0 0;
  border-top: 1px solid var(--linea);
  display: grid;
  gap: 8px;
  font-size: 15px;
  color: var(--texto-3);
}
.servicio li::before {
  content: "— ";
  color: var(--rosa);
}

/* ── demos ── */
/* Ocho demos: 4 por fila en compu, 2 en tablet, 1 en celular (ese corte está más abajo) */
.demos {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1060px) {
  .demos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.demo {
  display: flex;
  flex-direction: column;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: var(--tinta-2);
  overflow: hidden;
  transition:
    transform 0.35s var(--ease),
    border-color 0.25s,
    box-shadow 0.35s;
}
.demo:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 79, 139, 0.4);
  box-shadow: 0 30px 60px -30px rgba(255, 79, 139, 0.35);
}
.demo .foto {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--linea);
}
.demo .foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--ease);
}
.demo:hover .foto img {
  transform: scale(1.04);
}
.demo .texto {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.demo .rubro {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff8fb3;
}
.demo h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 750;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.demo p {
  font-size: 15.5px;
  color: var(--texto-2);
}
.demo .abrir {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: 15.5px;
  color: var(--texto);
}
.demo .abrir svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aviso-demo {
  margin-top: 22px;
  font-size: 15px;
  color: var(--texto-3);
}

/* "Son demos de muestra": que nadie crea que su sistema va a quedar igual */
.a-medida {
  margin-top: 40px;
  padding: 28px 30px;
  border-radius: 24px;
  border: 1px solid var(--linea);
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(255, 79, 139, 0.14), transparent 65%),
    radial-gradient(60% 120% at 100% 100%, rgba(255, 154, 77, 0.12), transparent 65%),
    var(--tinta-2);
}
.a-medida-titulo {
  font-family: "Bricolage Grotesque", "Geist", sans-serif;
  font-weight: 750;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.a-medida-titulo .serif {
  font-size: 1.08em;
}
.a-medida ul {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  padding: 0;
}
.a-medida li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 3px;
  align-items: start;
}
.a-medida li svg {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 12px;
  background: rgba(255, 143, 179, 0.12);
  fill: none;
  stroke: #ff8fb3;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.a-medida li b {
  font-weight: 650;
  font-size: 16.5px;
}
.a-medida li span {
  font-size: 15px;
  color: var(--texto-2);
}
@media (max-width: 860px) {
  .a-medida ul {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .a-medida {
    padding: 24px 20px;
  }
}

/* ── trabajos (crema) ── */
.trabajos {
  margin-top: 60px;
  display: grid;
  gap: 26px;
}
.trabajo {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 36px;
  border-radius: 26px;
  background: #fffaf6;
  border: 1px solid var(--linea-clara);
  box-shadow: 0 30px 60px -40px rgba(60, 20, 40, 0.35);
}
.trabajo:nth-child(even) .pantallas {
  order: 2;
}
.pantallas {
  position: relative;
  padding: 0 8% 28px 0;
}
.pantallas .laptop .tapa {
  box-shadow:
    0 0 0 1.5px #4a3f45,
    0 30px 50px -26px rgba(40, 10, 25, 0.6);
}
.pantallas .iphone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 27%;
}
.trabajo .rubro {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rosa-fuerte);
}
.trabajo h3 {
  margin-top: 8px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -0.035em;
  line-height: 1;
}
.trabajo > div > p {
  margin-top: 14px;
  font-size: 17.5px;
  color: var(--oscuro-2);
}
.trabajo ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.trabajo li {
  display: flex;
  gap: 10px;
  font-size: 16px;
}
.trabajo li::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2337a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
      center / 14px no-repeat,
    rgba(226, 51, 122, 0.1);
}
.trabajo .visitar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-weight: 650;
  border-bottom: 2px solid var(--rosa);
  padding-bottom: 2px;
}
.trabajo .visitar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trabajo .nota {
  margin-top: 16px;
  font-size: 14px;
  color: var(--oscuro-2);
}

/* ── beneficios ── */
.beneficios {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--linea);
  border-left: 1px solid var(--linea);
}
.beneficio {
  padding: 34px 30px;
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  transition: background-color 0.3s;
}
.beneficio:hover {
  background: rgba(247, 239, 233, 0.025);
}
.beneficio .ic {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 79, 139, 0.1);
  border: 1px solid rgba(255, 79, 139, 0.28);
  color: #ff8fb3;
}
.beneficio .ic svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.beneficio h3 {
  margin-top: 20px;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.beneficio p {
  margin-top: 8px;
  font-size: 16px;
  color: var(--texto-2);
}

/* ── proceso (crema) ── */
.pasos {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  counter-reset: paso;
  position: relative;
}
.pasos::before {
  content: "";
  position: absolute;
  top: 31px;
  left: 31px;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, var(--rosa), var(--naranja), rgba(255, 154, 77, 0.15));
}
.paso {
  position: relative;
  padding-right: 28px;
}
.paso .num {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--oscuro);
  color: var(--crema);
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 30px;
  box-shadow: 0 0 0 8px var(--crema-fondo);
}
.paso h3 {
  margin-top: 26px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 750;
  font-size: 24px;
  letter-spacing: -0.025em;
}
.paso p {
  margin-top: 10px;
  font-size: 16px;
  color: var(--oscuro-2);
}

/* ── preguntas ── */
.preguntas-grilla {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 60px;
  align-items: start;
}
.preguntas-grilla .acciones {
  margin-top: 28px;
}
.preguntas {
  display: grid;
}
.preguntas details {
  border-bottom: 1px solid var(--linea);
}
.preguntas details:first-child {
  border-top: 1px solid var(--linea);
}
.preguntas summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.preguntas summary::-webkit-details-marker {
  display: none;
}
.preguntas summary i {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  flex-shrink: 0;
  transition:
    transform 0.35s var(--ease),
    background-color 0.25s;
}
.preguntas summary i::before,
.preguntas summary i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--texto);
}
.preguntas summary i::after {
  transform: rotate(90deg);
  transition: transform 0.35s var(--ease);
}
.preguntas details[open] summary i {
  background: var(--rosa);
  border-color: var(--rosa);
}
.preguntas details[open] summary i::after {
  transform: rotate(0deg);
}
.preguntas details p {
  padding: 0 50px 26px 0;
  color: var(--texto-2);
  font-size: 17px;
}

/* ── cierre ── */
.cierre {
  padding: 40px 0 120px;
}
.cierre .tarjeta {
  position: relative;
  overflow: hidden;
  padding: 72px 64px;
  border-radius: 32px;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(255, 154, 77, 0.32), transparent 60%),
    radial-gradient(70% 90% at 0% 100%, rgba(255, 79, 139, 0.36), transparent 60%),
    var(--tinta-2);
  border: 1px solid var(--linea);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 40px;
  align-items: center;
}
.cierre h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.035em;
}
.cierre p {
  margin-top: 16px;
  font-size: 19px;
  color: var(--texto-2);
}
.cierre .contacto {
  display: grid;
  gap: 12px;
  justify-items: end;
}
.cierre .contacto small {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.cierre .boton.wa {
  height: 76px;
  padding: 0 34px 0 28px;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.cierre .boton.wa svg {
  width: 32px;
  height: 32px;
}
.otros-contactos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 4px;
  font-size: 15.5px;
  color: var(--texto-2);
}
.otros-contactos a,
.pie-contacto a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}
.otros-contactos svg {
  width: 19px;
  height: 19px;
  color: #ff8fb3;
}
.otros-contactos a:hover {
  color: var(--texto);
}

/* ── pie ── */
.pie {
  border-top: 1px solid var(--linea);
  padding: 46px 0 56px;
  color: var(--texto-3);
  font-size: 15px;
}
.pie .contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}
.pie img {
  height: 34px;
  width: auto;
}
.pie nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.pie-contacto {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.pie-contacto svg {
  width: 17px;
  height: 17px;
}
.pie-contacto svg use[href="#wa"] {
  fill: currentColor;
}
.pie nav a:hover,
.pie-contacto a:hover {
  color: var(--texto);
}

/* WhatsApp flotante */
.wa-flotante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--wa);
  box-shadow: 0 16px 34px -10px rgba(37, 211, 102, 0.75);
  transform: translateY(20px) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.45s var(--resorte),
    opacity 0.3s;
}
.wa-flotante.visible {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.wa-flotante svg {
  width: 32px;
  height: 32px;
  fill: #06301a;
}

/* Aparecer al bajar: solo si hay JS, así sin JS se ve todo igual. */
.js .revelar {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.js .revelar.visto {
  opacity: 1;
  transform: none;
}

/* ── tablet y celular ── */
@media (max-width: 1060px) {
  .portada .contenedor {
    grid-template-columns: minmax(0, 1fr);
  }
  .escena {
    max-width: 640px;
    margin: 40px auto 0;
    width: 100%;
  }
  .servicios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rubros {
    grid-template-columns: minmax(0, 1fr);
  }
  .rubros-lista {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .rubros-lista::-webkit-scrollbar {
    display: none;
  }
  .rubros-lista button {
    width: auto;
    white-space: nowrap;
    border-color: var(--linea);
  }
  .trabajo,
  .preguntas-grilla {
    grid-template-columns: minmax(0, 1fr);
  }
  .trabajo:nth-child(even) .pantallas {
    order: 0;
  }
  .pasos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 0;
  }
  .pasos::before {
    display: none;
  }
  .cierre .tarjeta {
    grid-template-columns: minmax(0, 1fr);
  }
  .cierre .contacto {
    justify-items: start;
  }
}
@media (max-width: 860px) {
  .menu {
    position: fixed;
    top: 78px;
    left: 12px;
    right: 12px;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border-radius: 20px;
    background: rgba(27, 17, 24, 0.97);
    border: 1px solid var(--linea);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.3s var(--ease),
      opacity 0.2s;
  }
  .menu.abierto {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .menu a {
    padding: 14px 16px;
    font-size: 17px;
  }
  .abrir-menu {
    display: grid;
  }
  .encabezado .boton {
    display: none;
  }
}
@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  .seccion {
    padding: 84px 0;
  }
  .contenedor {
    width: calc(100% - 32px);
  }
  .portada {
    padding: 120px 0 90px;
  }
  .portada .bajada {
    font-size: 18px;
  }
  .acciones .boton {
    flex: 1 1 auto;
  }
  .escena {
    height: 380px;
  }
  .escena .laptop {
    top: 30px;
  }
  .escena .iphone {
    width: 120px;
  }
  .globito.uno {
    left: -6px;
    top: 230px;
  }
  .globito.dos {
    display: none;
  }
  .servicios,
  .demos,
  .beneficios {
    grid-template-columns: minmax(0, 1fr);
  }
  .tildes {
    grid-template-columns: minmax(0, 1fr);
  }
  .rubro-panel {
    padding: 26px 22px;
  }
  .rubro-panel h3 {
    font-size: 28px;
  }
  .trabajo {
    padding: 22px;
    gap: 28px;
  }
  .trabajo h3 {
    font-size: 30px;
  }
  .pasos {
    grid-template-columns: minmax(0, 1fr);
  }
  .cierre .tarjeta {
    padding: 44px 26px;
    border-radius: 24px;
  }
  .cierre .boton.wa {
    width: 100%;
    font-size: 24px;
  }
  .preguntas details p {
    padding-right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
  .js .revelar {
    opacity: 1;
    transform: none;
  }
}

.link-rosa {
  color: #ff8fb3;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 143, 179, 0.5);
}
.link-rosa:hover {
  color: var(--texto);
}