/* ==========================================================
   Lemus Automations — estilos
   Dirección: vidrio claro sobre crema (referencia/diseno-glass.html)
   ========================================================== */

:root {
  --crema: #FFFBF0;
  --tinta: #0A0A0A;
  --terracota: #A8542E;
  --terracota-claro: #E8CCBC;
  --gris: #57514A;

  --fuente-titulo: Jost, 'Century Gothic', Futura, sans-serif;
  --fuente-texto: 'Public Sans', Helvetica, Arial, sans-serif;

  --ancho-max: 1296px;
  --margen: 72px;
  --canal: 24px;
  --desenfoque: 18px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 16.5px;
  line-height: 27px;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--terracota); text-decoration-color: var(--terracota-claro); text-underline-offset: 4px; }
a:hover { color: var(--tinta); text-decoration-color: var(--terracota); }

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 8px;
}

.saltar {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--crema);
  font-family: var(--fuente-titulo);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.saltar:focus { top: 16px; color: var(--crema); }

/* ----------------------------------------------------------
   Vidrio: desenfoque + fondo translúcido + borde degradado
   de 1 px (máscara) + brillo superior
   ---------------------------------------------------------- */
.vidrio {
  position: relative;
  isolation: isolate;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .10));
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(var(--desenfoque)) saturate(170%);
  backdrop-filter: blur(var(--desenfoque)) saturate(170%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 1),
    inset 1px 0 1px rgba(255, 255, 255, .6),
    inset 0 -1px 1px rgba(10, 10, 10, .06),
    inset -1px 0 1px rgba(10, 10, 10, .04),
    inset 0 0 24px rgba(255, 255, 255, .45),
    0 1px 2px rgba(10, 10, 10, .04),
    0 12px 32px -16px rgba(10, 10, 10, .12);
}
.vidrio::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) 45%, rgba(255, 255, 255, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.vidrio::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 0;
}
.vidrio > * { position: relative; z-index: 1; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio { background: rgba(255, 251, 240, .94); }
}

/* ----------------------------------------------------------
   Botones
   ---------------------------------------------------------- */
.boton {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--fuente-titulo);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* brillo superior */
.boton::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(90% 120% at 30% -10%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
/* destello al pasar el cursor */
.boton::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg);
  transition: left .7s ease;
  pointer-events: none;
}
.boton:hover { transform: translateY(-2px); }
.boton:hover::before { left: 130%; }
.boton:focus-visible { border-radius: 999px; }

.boton--acento,
.boton--acento:hover {
  background: linear-gradient(180deg, #B45D36, #A8542E 55%, #96492A);
  color: var(--crema);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(10, 10, 10, .2), 0 8px 20px -10px rgba(168, 84, 46, .4);
}
.boton--tinta,
.boton--tinta:hover {
  background: linear-gradient(180deg, #2A2826, #0A0A0A 60%);
  color: var(--crema);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 20px -10px rgba(10, 10, 10, .3);
}
.boton--vidrio,
.boton--vidrio:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--tinta);
  -webkit-backdrop-filter: blur(8px) saturate(170%);
  backdrop-filter: blur(8px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(232, 204, 188, .95), inset 0 1px 0 #FFFFFF, 0 6px 16px -10px rgba(10, 10, 10, .1);
}

/* ----------------------------------------------------------
   Punto "en línea"
   ---------------------------------------------------------- */
.punto-vivo {
  flex: none;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terracota);
  animation: pulso 2.4s ease-out infinite;
}
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 84, 46, .45); }
  50% { box-shadow: 0 0 0 6px rgba(168, 84, 46, 0); }
}

/* ----------------------------------------------------------
   Encabezado: cápsula flotante
   ---------------------------------------------------------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 16px var(--margen) 0;
}

.capsula {
  max-width: var(--ancho-max);
  margin: 0 auto;
  min-height: 72px;
  padding: 0 12px 0 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.capsula__logo { display: flex; align-items: center; text-decoration: none; }
.capsula__logo img { width: 129px; height: auto; } /* mínimo de marca: 120 px */

.capsula__enlaces {
  display: flex;
  align-items: center;
  gap: 16px;
}
.capsula__enlaces ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.enlace-nav {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--tinta);
  font-family: var(--fuente-titulo);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease;
}
.enlace-nav:hover { background: rgba(255, 255, 255, .35); color: var(--tinta); }

.capsula__menu {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  box-shadow: inset 0 0 0 1px rgba(232, 204, 188, .95), inset 0 1px 0 #FFFFFF;
  color: var(--tinta);
  font-family: var(--fuente-titulo);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.capsula__menu .icono-cerrar { display: none; }
.capsula__menu[aria-expanded="true"] .icono-abrir { display: none; }
.capsula__menu[aria-expanded="true"] .icono-cerrar { display: inline; }

/* ----------------------------------------------------------
   Portada
   ---------------------------------------------------------- */
.portada {
  position: relative;
  /* el header (88 px) queda encima; subimos la imagen para que empiece bajo la cápsula */
  padding: 104px max(var(--margen), calc((100% - var(--ancho-max)) / 2));
  /* luz suave arriba y toque cálido abajo (igual que la copia 3D de escena3d.js);
     abajo se funde en crema para que no se note dónde termina la portada */
  background:
    linear-gradient(to bottom, rgba(255, 251, 240, 0) 80%, var(--crema)),
    radial-gradient(74.22% 74.22% at 29.3% 21.48%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)),
    radial-gradient(66.4% 66.4% at 78.13% 82.03%, rgba(232, 204, 188, .35), rgba(232, 204, 188, 0)),
    var(--crema);
}
/* Imagen fija de respaldo: se desvanece cuando el 3D ya dibujó */
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/objetos3d/fondo_hero_light.jpg") center top / cover no-repeat;
  transition: opacity .8s ease;
}
.con-3d .portada::before { opacity: 0; }

/* ----------------------------------------------------------
   Escena 3D en vivo (escena3d.js): un solo lienzo detrás de
   toda la página. Capas, de atrás hacia adelante:
   1. fondos de las secciones (crema, negro)
   2. el lienzo (transparente salvo el cristal)
   3. contenido y paneles de vidrio (z-index 1)
   Por eso las secciones no forman capa propia (sin z-index ni isolation).
   ---------------------------------------------------------- */
/* El lienzo va dentro de la página (no fijo a la pantalla): el navegador lo
   desplaza junto con el contenido, así los aros no se retrasan al hacer scroll.
   escena3d.js le pone el alto y lo recoloca alrededor de la vista. */
.escena {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  pointer-events: none;
  will-change: transform;
}
.portada > * {
  position: relative;
  z-index: 1;
}

/* Modo ligero (escena3d.js, montarLigero): imágenes de los objetos en el
   mismo lugar que el lienzo. Solo se animan translate y rotate, que el
   navegador mueve sin volver a dibujar: fluido hasta en celulares sencillos. */
.escena-ligera {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.objeto {
  position: absolute;
  animation: objeto-lado 7.6s ease-in-out infinite alternate;
}
.objeto__vaiven {
  width: 100%;
  height: 100%;
  animation: objeto-vaiven 5.7s ease-in-out infinite alternate;
}
/* La inclinación de cada objeto (rotate, scale) la pone escena3d.js;
   la animación solo mueve transform, así las dos se suman */
.objeto img {
  display: block;
  width: 100%;
  height: 100%;
  animation: objeto-giro 9s ease-in-out infinite alternate;
  /* Sin esto, Chrome vuelve a pintar la imagen en cada cuadro al inclinarla */
  will-change: transform;
}
/* Los lejanos, detrás de todo, se mueven menos */
.objeto--lejano { animation-name: objeto-lado-lejano; }
.objeto--lejano .objeto__vaiven { animation-name: objeto-vaiven-lejano; }
.objeto--quieto,
.objeto--quieto * { animation-play-state: paused; }

/* Valores fijos (sin variables) para que el navegador los mueva
   por su cuenta, sin recalcular la página en cada cuadro */
@keyframes objeto-lado {
  from { transform: translateX(-36px); }
  to { transform: translateX(36px); }
}
@keyframes objeto-vaiven {
  from { transform: translateY(-43px); }
  to { transform: translateY(43px); }
}
@keyframes objeto-lado-lejano {
  from { transform: translateX(-14px); }
  to { transform: translateX(14px); }
}
@keyframes objeto-vaiven-lejano {
  from { transform: translateY(-17px); }
  to { transform: translateY(17px); }
}
/* Gira un poco y se inclina, como si diera vuelta en el espacio */
@keyframes objeto-giro {
  from { transform: perspective(700px) rotate(-10deg) rotateX(-16deg) rotateY(20deg); }
  to { transform: perspective(700px) rotate(10deg) rotateX(16deg) rotateY(-20deg); }
}

.portada__reticula {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--canal);
  align-items: center;
}

.portada__texto {
  grid-column: span 6;
  padding: 56px 48px;
  border-radius: 32px;
}

.insignia {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  border-radius: 999px;
  font-family: var(--fuente-titulo);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.portada h1 {
  margin: 40px 0 0;
  max-width: 720px;
  font-family: var(--fuente-titulo);
  font-weight: 300;
  font-size: 44px;
  line-height: 46px;
  letter-spacing: -0.01em;
}

.portada__entrada {
  margin: 24px 0 0;
  max-width: 640px;
}

.botones {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.portada__nota {
  margin: 24px 0 0;
  font-size: 15px;
  line-height: 23px;
  color: var(--gris);
}
.portada__nota--medida { margin-top: 8px; }

/* --- Maqueta de chat --- */
.portada__chat {
  grid-column: span 6;
  display: flex;
  justify-content: flex-end;
}

.chat {
  width: 100%;
  max-width: 456px;
  margin: 0;
  padding: 24px;
  border-radius: 32px;
}

.chat__cabecera {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(232, 204, 188, .9);
}

.chat__avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-titulo);
  font-size: 15px;
  letter-spacing: 0.08em;
}

.chat__nombre { flex-grow: 1; display: flex; flex-direction: column; }
.chat__negocio { font-family: var(--fuente-titulo); font-size: 16.5px; line-height: 23px; }
.chat__estado,
.chat__fecha {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--gris);
}

.chat__mensajes {
  margin: 0;
  padding: 24px 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mensaje { animation: aparecer .6s cubic-bezier(.2, .8, .2, 1) both; }
.mensaje:nth-child(2) { animation-delay: .5s; }
.mensaje:nth-child(3) { animation-delay: 1.1s; }
.mensaje:nth-child(4) { animation-delay: 1.7s; }
.mensaje:nth-child(5) { animation-delay: 2.3s; }
@keyframes aparecer {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.mensaje p {
  max-width: 78%;
  margin: 0;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 23px;
}
.mensaje--cliente p {
  margin-left: auto;
  border-radius: 20px 20px 6px 20px;
  background: var(--tinta);
  color: var(--crema);
}
.mensaje--asistente p {
  border-radius: 20px 20px 20px 6px;
  background: rgba(255, 255, 255, .42);
  box-shadow: inset 0 0 0 1px rgba(232, 204, 188, .9);
}

.mensaje__hora {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 16px;
  color: var(--gris);
}
.mensaje--cliente .mensaje__hora { text-align: right; }

.mensaje--aviso {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
  box-shadow: inset 0 0 0 1px rgba(232, 204, 188, .9);
  font-size: 12px;
  line-height: 16px;
}
.mensaje--aviso svg { flex: none; color: var(--terracota); }

/* --- Cifras --- */
.cifras {
  margin: 104px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--canal);
  row-gap: 16px;
}

.cifra {
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.cifra:hover { transform: translateY(-4px); }

.cifra__valor {
  font-family: var(--fuente-titulo);
  font-weight: 300;
  font-size: 44px;
  line-height: 46px;
}
.cifra__texto {
  margin-top: 16px;
  max-width: 240px;
  font-size: 15px;
  line-height: 23px;
  color: var(--gris);
}

.portada__aclaracion {
  margin: 24px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--gris);
}

/* ----------------------------------------------------------
   Vidrio oscuro (sobre fondo negro tinta)
   ---------------------------------------------------------- */
.vidrio--oscuro {
  background: linear-gradient(135deg, rgba(255, 251, 240, .12), rgba(255, 251, 240, .03));
  -webkit-backdrop-filter: blur(var(--desenfoque)) saturate(160%);
  backdrop-filter: blur(var(--desenfoque)) saturate(160%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .28),
    inset 1px 0 1px rgba(255, 255, 255, .12),
    inset 0 -1px 1px rgba(0, 0, 0, .4),
    inset 0 0 24px rgba(255, 251, 240, .05),
    0 12px 32px -16px rgba(0, 0, 0, .5);
}
.vidrio--oscuro::before {
  background: linear-gradient(135deg, rgba(255, 251, 240, .5), rgba(255, 251, 240, .08) 45%, rgba(255, 251, 240, .3));
}
.vidrio--oscuro::after {
  height: 50%;
  background: radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio--oscuro { background: rgba(40, 38, 36, .94); }
}

/* ----------------------------------------------------------
   Secciones (estructura común)
   ---------------------------------------------------------- */
.seccion {
  padding: 120px max(var(--margen), calc((100% - var(--ancho-max)) / 2));
}

.seccion > * {
  position: relative;
  z-index: 1;
}

.seccion--tinta {
  background: var(--tinta);
  color: var(--crema);
}
.seccion--tinta a { color: var(--crema); text-decoration-color: var(--terracota-claro); }
.seccion--tinta a:hover { color: var(--crema); text-decoration-color: var(--crema); }
.seccion--tinta :focus-visible { outline-color: var(--crema); }

.etiqueta {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--terracota);
}
.seccion--tinta .etiqueta { color: var(--crema); }

.seccion h2 {
  margin: 24px 0 0;
  max-width: 720px;
  font-family: var(--fuente-titulo);
  font-weight: 300;
  font-size: 30px;
  line-height: 35px;
}

.seccion__entrada {
  margin: 24px 0 0;
  max-width: 640px;
}

/* --- Tarjetas de vidrio --- */
.tarjeta {
  padding: 32px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.tarjeta:hover { transform: translateY(-4px); }

.tarjeta h3 {
  margin: 24px 0 0;
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 21px;
  line-height: 27px;
}
.tarjeta p:not(.etiqueta):not(.paso__hora):not(.proximamente) { margin: 16px 0 0; }

/* ----------------------------------------------------------
   01 — El problema
   ---------------------------------------------------------- */
.momentos {
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--canal);
  row-gap: 16px;
}

/* ----------------------------------------------------------
   02 — Cómo funciona (recorrido de 5 pasos)
   ---------------------------------------------------------- */
.pasos {
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--canal);
  row-gap: 16px;
}

/* El paso guarda la esfera DETRÁS del vidrio, siempre dentro de sus bordes */
.paso {
  position: relative;
  display: flex;
  flex-direction: column;
}
.paso__esfera {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.tarjeta--paso {
  flex-grow: 1;
  z-index: 1;
  padding: 24px;
  border-radius: 20px;
}
.tarjeta--paso p:not(.paso__hora):not(.proximamente) {
  font-size: 15px;
  line-height: 23px;
}

.paso__hora {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fuente-titulo);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.proximamente {
  display: inline-block;
  margin: 16px 0 0;
  padding: 4px 8px;
  border: 1px solid var(--terracota-claro);
  border-radius: 4px;
  font-family: var(--fuente-titulo);
  font-size: 11px;
  line-height: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.recorrido__nota {
  margin: 72px 0 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 23px;
}

/* En pantallas medianas y celular, el recorrido es una línea de tiempo vertical */
@media (max-width: 1100px) {
  .pasos {
    grid-template-columns: 1fr;
    max-width: 720px;
    padding-left: 40px;
    position: relative;
  }
  /* la línea */
  .pasos::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 32px;
    bottom: 32px;
    width: 1px;
    background: rgba(232, 204, 188, .45);
  }
  /* el punto de cada paso sobre la línea */
  .paso::before {
    content: "";
    position: absolute;
    left: -40px;
    top: 26px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--tinta);
    box-shadow: inset 0 0 0 1px var(--terracota-claro), inset 0 0 0 4px var(--tinta), inset 0 0 0 8px var(--crema);
  }
}

@media (max-width: 900px) {
  .seccion { padding-top: 96px; padding-bottom: 96px; }
  .momentos { margin-top: 56px; grid-template-columns: 1fr; }
  .pasos { margin-top: 56px; }
  .recorrido__nota { margin-top: 56px; }
}

@media (max-width: 640px) {
  .seccion { padding-top: 72px; padding-bottom: 72px; }
  .tarjeta { padding: 24px; }
  .pasos { padding-left: 32px; }
  .paso::before { left: -32px; }
  .tarjeta--paso p:not(.paso__hora):not(.proximamente),
  .recorrido__nota { font-size: 16px; line-height: 24px; }
  .paso__hora { letter-spacing: 0.2em; }
}

/* ----------------------------------------------------------
   03 — Servicios
   ---------------------------------------------------------- */
.servicios__lista {
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--canal);
  row-gap: 16px;
}

/* El servicio guarda la esfera DETRÁS del vidrio, siempre dentro de sus bordes */
.servicio {
  position: relative;
  display: flex;
  flex-direction: column;
}
.servicio__esfera {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.tarjeta--servicio {
  flex-grow: 1;
  z-index: 1;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
}
.tarjeta--servicio h3 {
  font-weight: 300;
  font-size: 30px;
  line-height: 35px;
}
.tarjeta--servicio .etiqueta { margin-top: 16px; }
.tarjeta--servicio .proximamente {
  align-self: flex-start;
  border-color: var(--terracota);
  color: var(--terracota);
}
/* descripción (mismo peso que la regla general de .tarjeta p, declarada antes) */
.servicio .tarjeta--servicio p:not(.etiqueta):not(.proximamente) { margin: 24px 0 16px; }

.servicio__icono {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta);
}

.servicio__pie {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--terracota-claro);
  font-size: 15px;
  line-height: 23px;
  color: var(--gris);
}

.servicios__subtitulo { margin-top: 72px; font-weight: 400; }

.incluye {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--canal);
  row-gap: 40px;
}
.incluye__item {
  padding: 24px;
  border-radius: 20px;
}
.incluye__item h4 {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 21px;
  line-height: 27px;
}
.incluye__item p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 23px;
  color: var(--gris);
}

/* ----------------------------------------------------------
   A la medida
   ---------------------------------------------------------- */
.medida { padding-top: 0; }

.medida__envoltura { position: relative; }
.medida__esfera {
  position: absolute;
  top: 40px;
  right: 240px; /* entre el texto y el botón, sin quedar detrás de ninguno */
  width: 160px;
  height: 160px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.medida__panel {
  z-index: 1;
  padding: 56px 48px;
  border-radius: 32px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--canal);
  row-gap: 40px;
  align-items: end;
}
.medida__texto { grid-column: span 8; }

.medida__ejemplo {
  margin-top: 40px;
  max-width: 640px;
  padding-top: 24px;
  border-top: 1px solid var(--terracota-claro);
}
.medida__ejemplo h3 {
  margin: 16px 0 0;
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 21px;
  line-height: 27px;
}
.medida__ejemplo p:not(.etiqueta) { margin: 8px 0 0; }
.medida__accion {
  grid-column: span 4;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  .tarjeta--servicio { padding: 32px 24px; }
  .tarjeta--servicio h3 { font-size: 26px; line-height: 32px; }
  .servicio__esfera { top: 24px; right: 24px; width: 96px; height: 96px; }
  .incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .medida__texto,
  .medida__accion { grid-column: 1 / -1; }
  .medida__accion { justify-content: flex-start; }
  .medida__esfera { top: 32px; right: 40px; width: 128px; height: 128px; }
}

@media (max-width: 900px) {
  .servicios__lista { margin-top: 56px; grid-template-columns: 1fr; }
  .tarjeta--servicio h3 { font-size: 30px; line-height: 35px; }
  .servicios__subtitulo { margin-top: 56px; }
}

@media (max-width: 640px) {
  .tarjeta--servicio { padding: 32px 24px; }
  .servicio__esfera { top: 24px; right: 24px; width: 88px; height: 88px; }
  .servicio__pie,
  .incluye__item p { font-size: 16px; line-height: 24px; }
  .incluye { margin-top: 32px; grid-template-columns: 1fr; row-gap: 16px; }
  .medida__panel { padding: 32px 24px; border-radius: 24px; }
  .medida__accion .boton { width: 100%; }
  .medida__esfera { top: 24px; right: 24px; width: 72px; height: 72px; }
  .medida__ejemplo { margin-top: 32px; }
}

/* ----------------------------------------------------------
   Vidrio terracota (tarjeta de dato clave)
   ---------------------------------------------------------- */
.vidrio--acento {
  background: linear-gradient(135deg, rgba(168, 84, 46, .50), rgba(168, 84, 46, .28));
  -webkit-backdrop-filter: blur(var(--desenfoque)) saturate(180%);
  backdrop-filter: blur(var(--desenfoque)) saturate(180%);
  color: var(--tinta);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .85),
    inset 1px 0 1px rgba(255, 255, 255, .4),
    inset 0 -1px 1px rgba(90, 40, 20, .18),
    inset 0 0 24px rgba(255, 255, 255, .3),
    0 12px 32px -16px rgba(168, 84, 46, .3);
}
.vidrio--acento::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .2) 45%, rgba(255, 255, 255, .55));
}
.vidrio--acento::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio--acento { background: #E3B9A0; }
}

/* ----------------------------------------------------------
   04 — Pruébalo
   ---------------------------------------------------------- */
.demo__reticula {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--canal);
  row-gap: 56px;
}
.demo__texto { grid-column: span 8; }

.demo__nota {
  margin: 16px 0 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 23px;
  color: var(--gris);
}

.demo__subtitulo { margin-top: 72px; font-weight: 400; }

.ideas {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--canal);
  row-gap: 16px;
}
.idea {
  padding: 16px 24px;
  border-radius: 999px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.idea:hover { transform: translateY(-4px); }

/* La columna guarda la esfera DETRÁS del vidrio, siempre dentro de sus bordes */
.demo__lateral {
  grid-column: span 4;
  align-self: start;
  margin-top: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.demo__esfera {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.demo__cifra {
  z-index: 1;
  padding: 40px 32px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.demo__cifra:hover { transform: translateY(-4px); }
.demo__cifra p { margin: 16px 0 0; }
.demo__cifra .etiqueta { margin: 0; color: var(--tinta); }
.demo__cifra .demo__valor {
  margin: 24px 0 0;
  font-family: var(--fuente-titulo);
  font-weight: 300;
  font-size: 44px;
  line-height: 46px;
}

/* ----------------------------------------------------------
   05 — Para quién
   ---------------------------------------------------------- */
.giros {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.giro {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 999px;
  line-height: 16.5px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.giro:hover { transform: translateY(-4px); }

/* La opción a la medida: un enlace, con borde terracota claro y flecha */
.giro--medida,
.giro--medida:hover {
  color: var(--tinta);
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px rgba(232, 204, 188, .95),
    inset 0 1px 1px rgba(255, 255, 255, 1),
    inset 0 0 24px rgba(255, 255, 255, .45),
    0 12px 32px -16px rgba(10, 10, 10, .12);
}
.giro--medida svg { flex: none; color: var(--terracota); transition: transform .25s ease; }
.giro--medida:hover svg { transform: translateX(4px); }
.giro--medida:focus-visible { border-radius: 999px; }

@media (max-width: 900px) {
  .demo__texto,
  .demo__lateral { grid-column: 1 / -1; }
  .demo__lateral { margin-top: 0; }
  .demo__subtitulo { margin-top: 56px; }
}

@media (max-width: 640px) {
  .demo__reticula { row-gap: 40px; }
  .demo__nota,
  .idea { font-size: 16px; line-height: 24px; }
  .ideas { grid-template-columns: 1fr; }
  .idea { border-radius: 24px; }
  .demo__cifra { padding: 32px 24px; }
  .demo__esfera { top: 24px; right: 24px; width: 80px; height: 80px; }
  .giros { gap: 12px; }
  .giro { font-size: 16px; }
  .giros > li:last-child { width: 100%; }
  .giro--medida { width: 100%; justify-content: space-between; min-height: 48px; }
}

/* ----------------------------------------------------------
   Adaptación: tableta
   ---------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --margen: 40px; }

  /* cápsula: logo + botón de menú; el menú abre un panel de vidrio */
  /* crema más denso: la cápsula y el logo se leen igual sobre crema y sobre negro */
  .capsula { position: relative; padding: 0 12px 0 24px; background: rgba(255, 251, 240, .86); }
  .capsula__menu { display: inline-flex; }

  .capsula__enlaces {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
    border-radius: 24px;
    /* sólido: dentro de la cápsula el desenfoque no alcanza la página */
    background: var(--crema);
    -webkit-backdrop-filter: blur(var(--desenfoque)) saturate(170%);
    backdrop-filter: blur(var(--desenfoque)) saturate(170%);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 1),
      inset 0 0 0 1px rgba(255, 255, 255, .7),
      0 16px 40px -16px rgba(10, 10, 10, .2);
  }
  .capsula__enlaces.abierto { display: flex; }
  .capsula__enlaces ul { flex-direction: column; gap: 0; }
  .enlace-nav { display: flex; min-height: 48px; font-size: 13px; }
  .capsula__enlaces .boton { width: 100%; }

  .portada__texto { grid-column: span 7; padding: 48px 40px; }
  .portada__chat { grid-column: span 5; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .capsula__enlaces { background: rgba(255, 251, 240, .97); }
}

@media (max-width: 900px) {
  .portada { padding-top: 72px; padding-bottom: 72px; }
  .portada__reticula { row-gap: 40px; }
  .portada__texto,
  .portada__chat { grid-column: 1 / -1; }
  .portada__chat { justify-content: stretch; }
  .chat { max-width: none; }
  .cifras { margin-top: 72px; grid-template-columns: 1fr; }
  .cifra__texto { max-width: none; }
}

/* ----------------------------------------------------------
   Adaptación: celular
   ---------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --margen: 16px; --desenfoque: 12px; }

  body { font-size: 16.5px; }

  .encabezado { padding-top: 8px; }
  .capsula { min-height: 64px; padding: 0 8px 0 16px; }
  .capsula__menu-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .capsula__menu { width: 48px; padding: 0; justify-content: center; }

  .portada { padding-top: 40px; padding-bottom: 56px; }
  .portada::before { background-position: 30% top; }
  .portada__texto { padding: 32px 24px; border-radius: 24px; }

  .insignia { letter-spacing: 0.2em; line-height: 16px; }
  .portada h1 { margin-top: 32px; font-size: 36px; line-height: 40px; }

  .botones { flex-direction: column; gap: 16px; }
  .botones .boton { width: 100%; }

  .portada__nota,
  .mensaje p,
  .cifra__texto { font-size: 16px; line-height: 24px; }

  .chat { padding: 16px; border-radius: 24px; }
  .chat__cabecera { flex-wrap: wrap; }
  .chat__fecha { width: 100%; }
  .mensaje p { max-width: 88%; }

  .cifras { margin-top: 56px; grid-template-columns: 1fr; }
  .cifra { padding: 24px; }
  .cifra__texto { max-width: none; }

  .portada__aclaracion { font-size: 16px; line-height: 24px; }

  /* Más aire alrededor y entre los vidrios, para que se vean los aros moviéndose detrás */
  :root { --margen: 24px; }
  .portada__reticula { row-gap: 56px; }
  .cifras,
  .momentos,
  .pasos,
  .servicios__lista,
  .incluye { row-gap: 32px; }
  .ideas { row-gap: 24px; }
  .giros { gap: 16px; }
}

/* ----------------------------------------------------------
   06 — Quién lo hace
   ---------------------------------------------------------- */
.nosotros__reticula {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--canal);
  row-gap: 40px;
}
.nosotros__texto { grid-column: span 7; }

/* La columna guarda la esfera DETRÁS del vidrio, siempre dentro de sus bordes */
.nosotros__lateral {
  grid-column: 9 / span 4;
  align-self: end;
  position: relative;
  display: flex;
  flex-direction: column;
}
.persona__esfera {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.persona {
  z-index: 1;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 32px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.persona:hover { transform: translateY(-4px); }

/* Lugar de la foto: círculo de 96 px. Con foto real, la imagen lo llena */
.persona__foto {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}
.persona__foto--iniciales {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-titulo);
  font-weight: 300;
  font-size: 30px;
  line-height: 35px;
  letter-spacing: 0.04em;
}
.persona h3 {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 21px;
  line-height: 27px;
}
.persona__cargo,
.persona__linea {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 23px;
  color: var(--gris);
}

/* ----------------------------------------------------------
   Cierre: contacto (fondo negro tinta)
   ---------------------------------------------------------- */
.contacto { padding-bottom: 0; }
.contacto h2 {
  font-size: 44px;
  line-height: 46px;
  letter-spacing: -0.01em;
}
.contacto .seccion__entrada { color: var(--crema); }
.contacto .botones { margin-top: 40px; }
.contacto__pendiente {
  margin: 24px 0 0;
  font-size: 15px;
  line-height: 23px;
}

.boton--crema,
.boton--crema:hover,
.seccion--tinta .boton--crema,
.seccion--tinta .boton--crema:hover {
  background: linear-gradient(180deg, #FFFFFF, #FFFBF0 60%, #F4EEE2);
  color: var(--tinta);
  box-shadow: inset 0 -1px 0 rgba(10, 10, 10, .12), 0 8px 22px -10px rgba(255, 251, 240, .18);
}
.boton--vidrio-oscuro,
.boton--vidrio-oscuro:hover,
.seccion--tinta .boton--vidrio-oscuro,
.seccion--tinta .boton--vidrio-oscuro:hover {
  background: rgba(255, 251, 240, .04);
  color: var(--crema);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 251, 240, .26), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.boton--vidrio-oscuro::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 55%);
}

/* ----------------------------------------------------------
   Pie de página (continúa el negro del cierre)
   ---------------------------------------------------------- */
.pie {
  position: relative;
  padding: 120px max(var(--margen), calc((100% - var(--ancho-max)) / 2)) 72px;
}
.pie__reticula {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--canal);
  row-gap: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(232, 204, 188, .35);
}
.pie__marca { grid-column: span 3; }
.pie__marca img { width: 150px; height: auto; } /* mínimo de marca: 120 px */
.pie__columna { grid-column: span 2; }
.pie__columna--ancha { grid-column: span 3; }
.pie .etiqueta { color: var(--crema); font-weight: 400; }
.pie__columna p {
  margin: 0;
  font-size: 15px;
  line-height: 23px;
  overflow-wrap: break-word;
}
.pie__columna .etiqueta + p { margin-top: 16px; }
.pie__final {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
}
.pie__aviso {
  font-family: var(--fuente-titulo);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .pie__columna p,
  .pie__aviso { display: flex; align-items: center; min-height: 48px; }
  .pie__aviso { display: inline-flex; }
  .pie__columna p > a { align-self: stretch; display: inline-flex; align-items: center; }
  .pie__columna .etiqueta + p { margin-top: 4px; }
  .nosotros__texto { grid-column: span 7; }
  .nosotros__lateral { grid-column: 8 / span 5; }
  .pie__marca { grid-column: 1 / -1; }
  .pie__columna,
  .pie__columna--ancha { grid-column: span 3; }
}

@media (max-width: 900px) {
  .nosotros__texto,
  .nosotros__lateral { grid-column: 1 / -1; }
  .pie__columna,
  .pie__columna--ancha { grid-column: span 6; }
}

@media (max-width: 640px) {
  .persona { flex-direction: column; gap: 24px; padding: 32px 24px; }
  .persona__esfera { width: 80px; height: 80px; }
  .persona__cargo,
  .persona__linea,
  .contacto__pendiente,
  .pie__columna p { font-size: 16px; line-height: 24px; }
  .contacto h2 { font-size: 36px; line-height: 40px; }
  .pie { padding-top: 72px; padding-bottom: 56px; }
  .pie__columna,
  .pie__columna--ancha { grid-column: 1 / -1; }
  .pie__final { flex-direction: column; align-items: flex-start; }
  .pie__aviso { display: inline-flex; align-items: center; min-height: 48px; }
}

/* ----------------------------------------------------------
   Página: aviso de privacidad
   ---------------------------------------------------------- */
.aviso__volver { min-height: 48px; }
.aviso { padding-top: 72px; }
.aviso h1 {
  margin: 24px 0 0;
  font-family: var(--fuente-titulo);
  font-weight: 300;
  font-size: 44px;
  line-height: 46px;
  letter-spacing: -0.01em;
}
.aviso .seccion__entrada { color: var(--gris); }
.aviso__cuerpo {
  margin-top: 56px;
  max-width: 848px;
  padding: 48px;
}
.aviso__pendiente {
  margin: 0;
  padding: 16px 24px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--terracota-claro);
  font-weight: 600;
}
.aviso__cuerpo section { margin-top: 48px; }
.aviso__cuerpo h2 {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 21px;
  line-height: 27px;
}
.aviso__cuerpo h3 {
  margin: 24px 0 0;
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 27px;
}
.aviso__cuerpo p:not(.aviso__pendiente) { margin: 8px 0 0; max-width: 75ch; }
.pie--corto { padding-top: 0; }
.pie--corto .pie__reticula { border-top: 0; padding-top: 72px; }

@media (max-width: 640px) {
  .aviso { padding-top: 40px; }
  .aviso h1 { font-size: 36px; line-height: 40px; }
  .aviso__cuerpo { margin-top: 40px; padding: 32px 24px; }
  .aviso__volver { padding: 0 16px; }
  .pie--corto .pie__reticula { padding-top: 56px; }
}

/* ----------------------------------------------------------
   Esferas detrás del vidrio: con el 3D encendido las dibuja
   escena3d.js (flotan y giran como los aros); estas imágenes
   fijas quedan solo de respaldo cuando el 3D no carga
   ---------------------------------------------------------- */
.con-3d .paso__esfera,
.con-3d .servicio__esfera,
.con-3d .medida__esfera,
.con-3d .demo__esfera,
.con-3d .persona__esfera { visibility: hidden; }

/* ----------------------------------------------------------
   Movimiento reducido
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .punto-vivo,
  .mensaje { animation: none; }
  .boton,
  .boton::before,
  .cifra,
  .tarjeta,
  .idea,
  .giro,
  .giro--medida svg,
  .demo__cifra,
  .persona { transition: none; }
  .boton:hover,
  .cifra:hover,
  .tarjeta:hover,
  .idea:hover,
  .giro:hover,
  .giro--medida:hover svg,
  .demo__cifra:hover,
  .persona:hover { transform: none; }
}