:root {
  --crema: #fff5e1;
  --crema-2: #f7e9cc;
  --azul: #37547e;
  --noche: #14213a;
  --noche-2: #1e2d4c;
  --coral: #ff5a3c;
  --papel: #fffdf8;

  --display: "Jost", "Futura", "Century Gothic", sans-serif;
  --texto: "Inter", system-ui, sans-serif;

  --t-l: clamp(46px, 7.4vw, 124px);
  --t-lista: clamp(32px, 3.6vw, 56px);
  --t-m: clamp(22px, 2.15vw, 34px);
  --t-s: 18px;
  --t-xs: 15px;

  --margen: clamp(12px, 1.4vw, 20px);
  --texto-margen: clamp(20px, 3vw, 48px);
  --hueco: clamp(96px, 12vw, 192px);
  --radio: clamp(22px, 2.2vw, 32px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --vidrio: rgba(20, 33, 58, .44);
  --vidrio-filtro: blur(26px) saturate(175%);
  --vidrio-borde: inset 0 1px 0 rgba(255, 245, 225, .28), 0 18px 50px rgba(8, 14, 28, .3);
  --sombra: 0 14px 44px rgba(20, 33, 58, .1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --vidrio: rgba(20, 33, 58, .9); }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--noche); color: var(--crema); font: 400 var(--t-s)/1.5 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
::selection { background: var(--coral); color: var(--noche); }
h1, h2, h3, .nombre { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
h2 { font-size: var(--t-l); line-height: .98; }
h3 { line-height: 1.02; }

.vidrio {
  background: var(--vidrio); -webkit-backdrop-filter: var(--vidrio-filtro); backdrop-filter: var(--vidrio-filtro); color: var(--crema);
  box-shadow: var(--vidrio-borde);
}
button.vidrio { box-shadow: inset 0 1px 0 rgba(255, 245, 225, .24), 0 8px 26px rgba(8, 14, 28, .24); }
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px;
  border-radius: 999px; background: var(--coral); color: var(--noche); font-weight: 600; text-decoration: none;
  transition: transform .35s var(--ease), background-color .2s;
}
.boton:hover { transform: scale(1.04); background: #ff7559; }
.boton:active { transform: scale(.97); }
.liga { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-underline-offset .25s var(--ease); }
.liga:hover { text-underline-offset: 7px; }

/* Aparecer al entrar */
.animar .r { opacity: 0; transform: translateY(28px) scale(.985); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.animar .r.dentro { opacity: 1; transform: none; }

/* ---------- Menú: píldora de vidrio ---------- */
.menu {
  position: fixed; z-index: 20; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px); padding: 8px 8px 8px 20px; border-radius: 999px; white-space: nowrap;
  transition: transform .5s var(--ease);
}
.menu.escondido { transform: translateX(-50%) translateY(-140%); }
.menu-marca { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; text-decoration: none; }
.menu nav { display: flex; gap: clamp(10px, 1.6vw, 24px); }
.menu nav a { font-size: var(--t-xs); font-weight: 500; text-decoration: none; transition: opacity .2s; }
.menu nav a:hover { opacity: .65; }
.menu .boton { min-height: 40px; padding: 0 18px; font-size: var(--t-xs); }

/* ---------- Portada ---------- */
.portada {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: 96px var(--margen) 4.6vw; overflow: hidden;
}
.presenta { position: relative; z-index: 1; align-self: center; text-align: center; max-width: 46em; display: grid; justify-items: center; gap: 14px; }
.gancho { font-family: var(--display); font-weight: 600; font-size: var(--t-lista); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.quien-hace { font-size: var(--t-s); line-height: 1.4; max-width: 34em; }
.nombre {
  display: block; white-space: nowrap; font-weight: 700; font-size: 47.6vw; line-height: .72; letter-spacing: -0.045em;
  margin-left: -0.074em; padding-left: 1.6vw; text-wrap: nowrap;
}
.nombre > span:not(.o) { display: inline-block; }
.o { display: inline-block; position: relative; width: .5825em; height: .665em; margin: 0 .03em 0 .012em; vertical-align: baseline; margin-bottom: -.0925em; }
.o .disco { position: absolute; left: 0; top: 12.4%; width: 85.84%; height: 75.19%; border-radius: 50%; overflow: hidden; background: var(--azul); }
.o video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity 1.1s ease; }
.o video.activo { opacity: 1; }
.o svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.animar .o svg path { animation: eco 3.6s var(--ease) infinite; }
.animar .o svg path:nth-child(2) { animation-delay: .35s; }
@keyframes eco { 0%, 100% { opacity: 1; } 45% { opacity: .35; } }

/* ---------- La O se abre: el comercial ---------- */
.comerciales { position: relative; }
.ventana-texto { text-align: center; padding: var(--hueco) var(--texto-margen) 40px; display: grid; justify-items: center; gap: 24px; }
.ventana-dice { font-size: var(--t-m); line-height: 1.22; max-width: 25em; }
.ventana-stage { position: relative; margin: 0 var(--margen); border-radius: var(--radio); overflow: hidden; }
.ventana-stage video { width: 100%; height: auto; }
.ondas { display: none; }
.pie-video { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; }
.etiqueta.vidrio, .sonido.vidrio, .menu.vidrio { background: rgba(20, 33, 58, .72); }
.etiqueta { padding: 9px 16px; border-radius: 999px; font-size: var(--t-xs); font-weight: 500; line-height: 1.25; }
.sonido { pointer-events: auto; padding: 9px 16px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; transition: transform .3s var(--ease); }
.sonido:hover { transform: scale(1.05); }

.animar .ventana { height: 280svh; }
.animar .ventana-pin { position: sticky; top: 0; height: 100svh; overflow: clip; }
.animar .ventana-stage { position: absolute; inset: 0; margin: 0; border-radius: 0; overflow: visible; }
.animar .ventana-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; clip-path: circle(16vmin at 50% 50%); will-change: clip-path; }
.animar .ventana-texto { position: absolute; inset: 0; z-index: 2; padding: clamp(76px, 12svh, 120px) var(--texto-margen) clamp(24px, 6svh, 60px); display: flex; flex-direction: column; justify-content: space-between; align-items: center; pointer-events: none; }
.animar .ondas { display: block; position: absolute; left: 50%; top: 50%; width: 40vmin; height: 40vmin; z-index: 1; transform: translate(-50%, -50%); color: var(--crema); overflow: visible; }
.animar .ventana .pie-video { z-index: 3; opacity: 0; bottom: 28px; left: 28px; right: 28px; transition: opacity .4s; }
.animar .ventana.abierta .pie-video { opacity: 1; }

/* Debajo del comercial: otro clip y lo que cuesta */
.mosaico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--margen); padding: var(--margen); }
.tarjeta { position: relative; border-radius: var(--radio); overflow: hidden; }
.clips-fila { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 3.1605fr; gap: var(--margen); }
.clip video { width: 100%; height: auto; }
.play { position: absolute; left: 50%; top: 50%; z-index: 4; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; font-size: 24px; line-height: 1; display: none; place-items: center; }
.en-pausa > .play { display: grid; }
.clip .pie-video { flex-wrap: wrap; }
.precio-tile { grid-column: 1 / -1; background: var(--noche-2); padding: var(--texto-margen); display: grid; grid-template-columns: 1fr 1fr; gap: 32px clamp(24px, 4vw, 64px); align-items: end; }
.precio-tile h3 { grid-column: 1 / -1; font-size: var(--t-l); line-height: .98; }
.quitados { display: grid; gap: 4px; }
.quitados li { font-family: var(--display); font-weight: 500; font-size: var(--t-lista); line-height: 1.08; letter-spacing: -0.03em; color: rgba(255, 245, 225, .62); }
.quitados .ancla { font-size: var(--t-m); margin-top: 10px; letter-spacing: -0.02em; }
.desde { font-family: var(--display); font-weight: 600; font-size: var(--t-m); color: #ff7559; letter-spacing: -0.02em; margin-bottom: 14px; }
.duraciones { display: grid; gap: 6px; }
.duraciones li { white-space: nowrap; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-family: var(--display); font-weight: 500; font-size: var(--t-m); letter-spacing: -0.02em; }
.nota-precio { margin-top: 14px; font-size: var(--t-xs); line-height: 1.4; }
.precio-tile .boton { margin-top: 20px; }
.clip-sofia { grid-column: span 8; }
.gratis-tile { grid-column: span 4; background: var(--azul); padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.gratis-tile h3 { font-size: var(--t-lista); }
.chica-fuente { font-size: var(--t-xs); line-height: 1.4; opacity: .82; }

/* Lo que te ahorras: la línea se dibuja encima */
.tachado { position: relative; display: inline-block; text-decoration: none; }
.tachado::after { content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: max(2px, .08em); border-radius: 2px; background: var(--coral); transform: scaleX(0); transform-origin: left center; }
html:not(.animar) .tachado::after { transform: none; }
.dentro .tachado::after { animation: tachar .75s var(--ease) calc(var(--n, 0) * 130ms + .3s) both; }
@keyframes tachar { to { transform: scaleX(1); } }

/* ---------- Soy Paul: una hoja clara que sube ---------- */
.hoja { position: relative; z-index: 2; background: var(--crema); color: var(--noche); border-radius: clamp(28px, 3.4vw, 48px); margin-top: clamp(64px, 7vw, 112px); padding: clamp(14px, 1.4vw, 20px) var(--margen) var(--margen); }
.paul-cabeza { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--margen); align-items: stretch; }
.foto { grid-column: span 5; aspect-ratio: 4 / 5; box-shadow: var(--sombra); background: var(--azul); color: var(--crema); border-radius: var(--radio); overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.paul-dice { grid-column: 7 / -1; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.paul-dice h1 { font-size: clamp(60px, 10vw, 168px); line-height: .9; }
.frase { font-size: var(--t-m); line-height: 1.22; max-width: 26em; }
.ligas { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.servicios { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--margen); margin-top: clamp(48px, 6vw, 96px); }
.servicios li { grid-column: span 4; background: var(--papel); border-radius: var(--radio); padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: clamp(220px, 21vw, 320px); box-shadow: var(--sombra); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.servicios li:nth-child(n+4) { grid-column: span 6; }
.servicios li:hover { transform: translateY(-5px); box-shadow: 0 22px 54px rgba(20, 33, 58, .16); }
.servicios h3 { font-size: var(--t-lista); }
.trayectoria { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--margen); margin-top: var(--margen); }
.punto-tile { background: var(--noche); color: var(--crema); border-radius: var(--radio); padding: clamp(24px, 2.6vw, 40px); }
.punto-hoy { grid-column: span 5; background: var(--azul); }
.punto-antes { grid-column: span 7; }
.punto-tile h3 { font-size: var(--t-lista); margin-bottom: 24px; }
.puntos { display: grid; gap: 14px; }
.puntos li { position: relative; padding-left: 22px; }
.puntos li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.puntos b { font-weight: 600; }

/* ---------- He colaborado con ---------- */
.trabajo { padding: var(--hueco) var(--margen) 0; }
.trabajo > h1 { font-size: var(--t-l); line-height: .98; text-align: center; margin-bottom: clamp(40px, 5vw, 80px); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--margen); }
.bento .grande { grid-column: 1 / -1; }
.bento .ancha { grid-column: span 7; }
.bento .mitad { grid-column: span 6; aspect-ratio: 1200 / 670; position: relative; }
.bento .cifra-tile { grid-column: span 5; }
.pieza { background: var(--noche-2); }
.pieza.ancha { aspect-ratio: 16 / 10; }
.pieza.grande { aspect-ratio: 16 / 9; }
.pieza > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ficha { position: absolute; left: 16px; bottom: 16px; max-width: calc(100% - 32px); padding: 18px 22px; border-radius: calc(var(--radio) - 8px); }
.ficha img { width: min(100%, 360px); height: auto; margin-bottom: 14px; }
.ficha b { display: block; font-family: var(--display); font-weight: 600; font-size: var(--t-m); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 4px; }
.ficha p { line-height: 1.35; }
.ficha .chica { font-size: var(--t-xs); margin-top: 6px; opacity: .85; }
.cifra-tile { padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.cifra-tile h3 { font-size: var(--t-lista); }
.cifra-tile .cifra { font-family: var(--display); font-weight: 600; font-size: var(--t-m); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 14px; }
.cifra-tile .num { display: block; font-size: var(--t-l); line-height: .95; letter-spacing: -0.045em; }
.colmex-tile { background: #0c0c0c; }
.colmex-tile h3, .colmex-tile .cifra { color: #3ddc6e; }
.colegio-tile { background: var(--azul); }
.mas { text-align: center; margin-top: clamp(40px, 5vw, 72px); }

/* ---------- Qué te está fallando: el vidrio sobre tu trabajo ---------- */
.cuentas { padding: var(--hueco) var(--margen) 0; }
.cuentas > h2 { text-align: center; margin-bottom: clamp(40px, 5vw, 72px); }
.cuentas-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--margen); }
.cuenta { background: var(--noche-2); border-radius: var(--radio); padding: clamp(24px, 3vw, 44px); box-shadow: 0 18px 50px rgba(8, 14, 28, .22); display: flex; flex-direction: column; transition: transform .5s var(--ease); }
.cuenta:hover { transform: translateY(-6px); }
.cuenta h3 { font-size: var(--t-m); margin-bottom: clamp(24px, 3vw, 44px); }
.antes { font-family: var(--display); font-weight: 500; font-size: var(--t-lista); line-height: 1; letter-spacing: -0.03em; color: rgba(255, 245, 225, .62); }
.ahora { font-family: var(--display); font-weight: 700; font-size: var(--t-l); line-height: 1; letter-spacing: -0.045em; margin-top: 10px; }
.unidad { font-weight: 500; margin-top: 6px; }
.por-que { margin-top: clamp(20px, 2.4vw, 32px); font-size: var(--t-xs); line-height: 1.45; }
.antes.rango { font-size: var(--t-m); }
.antes .tachado { white-space: nowrap; }
.cuenta-chica { margin-top: var(--margen); background: var(--noche-2); border-radius: var(--radio); padding: clamp(18px, 2vw, 28px) clamp(24px, 3vw, 44px); box-shadow: 0 18px 50px rgba(8, 14, 28, .22); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px clamp(20px, 3vw, 40px); }
.cuenta-chica h3 { font-size: var(--t-m); }
.cuenta-chica p { flex: 1 1 18em; font-size: var(--t-xs); line-height: 1.45; }
.cuenta-chica .cuenta-chica-precio { flex: 0 0 auto; font-family: var(--display); font-weight: 600; font-size: var(--t-m); letter-spacing: -0.02em; color: #ff9a84; }
.cuentas .fuentes { text-align: center; margin: 24px auto 0; }
.hago { position: relative; margin: var(--hueco) var(--margen) 0; border-radius: var(--radio); overflow: hidden; background: var(--noche-2); padding: clamp(28px, 4vw, 64px) var(--texto-margen); min-height: calc((100vw - 2 * var(--margen)) * 9 / 16); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--margen); align-items: center; }
.hago-fondo { position: absolute; inset: 0; }
.hago-fondo > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .8s ease; }
.hago-fondo > .activo { opacity: 1; }
.hago-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 33, 58, .68), rgba(20, 33, 58, .5) 50%, rgba(20, 33, 58, .2)); }
.hago-izq { position: relative; grid-column: span 6; display: grid; gap: 28px; }
.opciones { display: grid; gap: 8px; justify-items: start; }
.opcion { padding: 12px 22px; border-radius: 999px; font-family: var(--display); font-weight: 500; font-size: var(--t-m); line-height: 1.15; letter-spacing: -0.02em; text-align: left; transition: background-color .25s, color .25s, transform .35s var(--ease); }
.opcion:hover { transform: translateX(5px); }
.opcion[aria-pressed="true"] { background: var(--crema); color: var(--noche); -webkit-backdrop-filter: none; backdrop-filter: none; }
.promete { max-width: 30em; }
.fuentes { font-size: var(--t-xs); line-height: 1.4; max-width: 34em; }
.paneles { position: relative; grid-column: 7 / -1; }
.panel { padding: clamp(24px, 3vw, 44px); border-radius: var(--radio); background: rgba(20, 33, 58, .68); }
.panel[hidden] { display: none; }
.panel .boton { text-align: center; }
.panel { scroll-margin-top: 16px; }
.panel h3 { font-size: var(--t-lista); }
.panel .precio { font-family: var(--display); font-weight: 600; font-size: var(--t-m); color: #ff9a84; letter-spacing: -0.02em; margin: 10px 0 6px; }
.recibo { display: grid; gap: 4px; margin-top: 14px; font-size: var(--t-xs); }
.recibo p { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.recibo .suma { font-weight: 600; margin-top: 4px; }
.ahorro { font-weight: 600; margin-bottom: 16px; }
.mantenimiento { margin-bottom: 16px; font-size: var(--t-xs); }
.recibo .tachado { white-space: nowrap; }
.panel ul { display: grid; gap: 8px; margin-bottom: 24px; }
.panel li { position: relative; padding-left: 20px; line-height: 1.35; }
.panel li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--crema); }

/* ---------- Apuntes ---------- */
.apuntes { padding: var(--hueco) var(--margen) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--margen); }
.apuntes-izq { grid-column: span 5; padding-left: var(--texto-margen); display: grid; gap: 20px; align-content: start; }
.apuntes-lista { grid-column: 6 / -1; display: grid; gap: 8px; }
.apuntes-lista span { display: block; padding: clamp(20px, 2.2vw, 32px); border-radius: var(--radio); background: var(--noche-2); font-family: var(--display); font-weight: 500; font-size: var(--t-m); line-height: 1.15; letter-spacing: -0.02em; text-decoration: none; transition: background-color .25s, transform .4s var(--ease); }

/* ---------- Contacto y cierre ---------- */
.contacto { margin: var(--hueco) var(--margen) 0; padding: clamp(64px, 9vw, 150px) var(--texto-margen) clamp(32px, 4vw, 56px); border-radius: var(--radio); background: var(--azul); text-align: center; display: grid; justify-items: center; gap: 24px; }
.contacto p { max-width: 30em; }
.correo { margin-top: 16px; display: block; font-family: var(--display); font-weight: 500; font-size: 7.6vw; line-height: 1; letter-spacing: -0.04em; text-decoration: none; white-space: nowrap; transition: opacity .2s; }
.correo:hover { opacity: .7; }
.pie { margin-top: var(--hueco); background: var(--crema); color: var(--noche); border-radius: clamp(28px, 3.4vw, 48px) clamp(28px, 3.4vw, 48px) 0 0; padding: clamp(32px, 4vw, 56px) var(--margen) var(--margen); overflow: hidden; }
.pie-col { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; padding: 0 var(--texto-margen); margin-bottom: clamp(48px, 7vw, 112px); }
.pie-col nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.legal { padding: 24px var(--texto-margen) 8px; font-size: var(--t-xs); }

/* ---------- Fondo claro, degradado y acentos azules ---------- */
html { background: var(--crema); }
body { position: relative; background: transparent; color: var(--noche); }
body::before { content: ""; position: fixed; inset: -10vh 0; z-index: -2; background: linear-gradient(165deg, #fff5e1 0%, #f7f1e7 38%, #e1eaf5 100%); }
body::after { content: ""; position: fixed; left: -20vmax; top: -10vmax; width: 80vmax; height: 80vmax; z-index: -1; background: radial-gradient(circle, rgba(55, 84, 126, .2), rgba(55, 84, 126, 0) 68%); pointer-events: none; }
.animar body::after { animation: mancha 26s ease-in-out infinite alternate; }
@keyframes mancha { to { transform: translate(55vw, 70vh) scale(1.15); } }
.avance { position: fixed; z-index: 30; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--azul), #7ea3d8); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.boton { background: linear-gradient(135deg, var(--azul), #4a6d9f); color: var(--crema); box-shadow: 0 10px 26px rgba(55, 84, 126, .28); }
.boton:hover { background: linear-gradient(135deg, #456a9e, #5a80b5); }
.hago .boton, .contacto .boton { background: var(--crema); color: var(--noche); }
.hago .boton:hover, .contacto .boton:hover { background: #fff; }
.menu.vidrio { background: rgba(255, 253, 248, .76); color: var(--noche); box-shadow: inset 0 1px 0 #fff, 0 12px 34px rgba(20, 33, 58, .14); }
.portada .nombre > span:not(.o) { background: linear-gradient(135deg, var(--noche) 10%, var(--azul) 75%, #5f83b6); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .06em .08em .06em 0; margin: -.06em -.08em -.06em 0; }
.portada .o, .ondas { color: var(--azul); }
.precio-tile, .cuenta, .cuenta-chica, .apuntes-lista span { background: rgba(255, 253, 248, .78); color: var(--noche); box-shadow: var(--sombra); }
.quitados li, .antes { color: rgba(20, 33, 58, .58); }
.desde, .cuenta-chica .cuenta-chica-precio { color: var(--azul); }
.ahora { background: linear-gradient(135deg, var(--noche), var(--azul)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gratis-tile { background: linear-gradient(150deg, var(--azul), var(--noche-2)); color: var(--crema); }
.hoja { background: linear-gradient(165deg, #fffdf8, #e8eef6); box-shadow: var(--sombra); }
.punto-hoy { background: linear-gradient(150deg, #4a6d9f, var(--azul)); }
.punto-antes { background: linear-gradient(150deg, var(--azul), var(--noche)); }
.colmex-tile { color: var(--crema); }
.colegio-tile { background: linear-gradient(150deg, var(--azul), var(--noche-2)); color: var(--crema); }
.hago, .contacto { color: var(--crema); }
.contacto { background: linear-gradient(150deg, var(--azul), var(--noche)); }
.pie { background: linear-gradient(170deg, var(--azul), var(--noche)); color: var(--crema); }

/* Los colores de Cinthia, solo en su caso */
.pieza.grande { background: #f9d9df; }
.ficha.vidrio { background: rgba(249, 217, 223, .88); color: #241a16; box-shadow: 0 14px 40px rgba(171, 44, 88, .2); }
.ficha.vidrio b { color: #ab2c58; }
.mitad { box-shadow: 0 14px 40px rgba(171, 44, 88, .16); }
.mitad .etiqueta.vidrio { background: rgba(171, 44, 88, .86); color: #faf5ec; }

/* Más movimiento al entrar */
.animar .partida.r { opacity: 1; transform: none; }
.animar .partida .palabra { display: inline-block; opacity: 0; transform: translateY(.55em); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--p, 0) * 70ms); }
.animar .partida.dentro .palabra { opacity: 1; transform: none; }
.animar .cuenta.r { transform: translateY(44px) rotate(-1.4deg); }
.animar .mitad.r { transform: scale(.93); }
.animar .cuenta.r.dentro, .animar .mitad.r.dentro { transform: none; }
.animar .portada .nombre > span { animation: sube 1.2s var(--ease) both; }
.animar .portada .nombre > span:nth-child(2) { animation-delay: .12s; }
.animar .portada .nombre > span:nth-child(3) { animation-delay: .24s; }
@keyframes sube { from { opacity: 0; transform: translateY(16%); } }
.animar .boton:not(.menu .boton) { transition: transform .35s var(--ease), background-color .2s, box-shadow .35s; }
.boton:hover { box-shadow: 0 16px 34px rgba(55, 84, 126, .36); }

/* ---------- Franja: con quién hemos colaborado ---------- */
.franja { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px clamp(24px, 4vw, 72px); margin-top: var(--hueco); padding: clamp(28px, 3.4vw, 52px) var(--texto-margen); background: linear-gradient(100deg, var(--azul), #4a6d9f 55%, var(--noche-2)); color: var(--crema); text-decoration: none; transition: filter .3s; }
.franja:hover { filter: brightness(1.1); }
.franja-titulo { font-family: var(--display); font-weight: 600; font-size: var(--t-m); line-height: 1.05; letter-spacing: -0.02em; }
.franja-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px clamp(28px, 5vw, 80px); }
.franja-logos img { width: auto; filter: brightness(0) invert(1); }
.franja-logos .logo-mhm { height: clamp(20px, 2.2vw, 30px); }
.franja-logos .logo-colmex { height: clamp(40px, 4.4vw, 60px); }
.franja-logos .logo-colegio { height: clamp(46px, 5vw, 70px); }
@media (min-width: 761px) { .franja-logos { flex-wrap: nowrap; } }
.franja-ver { font-weight: 600; white-space: nowrap; }
.franja-ver span { display: inline-block; transition: transform .35s var(--ease); }
.franja:hover .franja-ver span { transform: translateX(6px); }
.animar .franja.r { transform: translateY(20px); }
.animar .franja.r.dentro { transform: none; }

/* ---------- Páginas de Casos y Soy Paul ---------- */
.pagina-casos { padding-top: 120px; }
.pagina-paul { margin-top: 88px; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  .menu { padding: 6px 6px 6px 16px; gap: 14px; }
  .menu nav { display: none; }
  .portada { min-height: 0; padding-top: 88px; padding-bottom: 32px; justify-content: flex-start; gap: 40px; }
  .nombre { font-size: 45vw; order: -1; }
  .presenta { padding: 0 8px; }
  .presenta .boton { width: 100%; }
  .animar .ventana { height: 240svh; }
  .animar .ventana .pie-video { left: 16px; right: 16px; bottom: 16px; flex-direction: column; align-items: flex-start; }
  .cuentas-lista { grid-template-columns: 1fr; }
  .franja { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .franja-logos { gap: 16px 28px; }
  .clips-fila { grid-template-columns: 1fr; }
  .clip .pie-video { left: 8px; right: 8px; bottom: 8px; gap: 6px; }
  .clip .etiqueta, .clip .sonido { padding: 6px 11px; font-size: 13px; }
  .clip-vertical { width: 72%; justify-self: center; }
  .clip-sofia, .gratis-tile { grid-column: 1 / -1; }
  .precio-tile { grid-template-columns: 1fr; }
  .precio-tile h3 { font-size: var(--t-lista); }
  .foto, .paul-dice { grid-column: 1 / -1; }
  .paul-dice { padding: 8px 12px 0; order: -1; }
  .servicios li, .servicios li:nth-child(n+4) { grid-column: 1 / -1; min-height: 0; gap: 16px; }
  .punto-hoy, .punto-antes { grid-column: 1 / -1; }
  .bento .ancha, .bento .mitad, .bento .cifra-tile { grid-column: 1 / -1; }
  .mitad .etiqueta { padding: 6px 11px; font-size: 13px; }
  .mitad .pie-video { left: 8px; right: 8px; bottom: 8px; }
  .bento .pieza { display: flex; flex-direction: column; }
  .pieza > img { height: auto; }
  .pieza.ancha, .pieza.grande, .pieza.mitad { aspect-ratio: auto; }
  .ficha { position: static; max-width: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--noche-2); --vidrio-borde: none; }
  .cifra-tile { min-height: 0; gap: 24px; }
  .hago { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 40px 14px 14px; }
  .hago-izq { order: 1; }
  .hago-fondo { position: relative; order: 2; inset: auto; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; }
  .hago[data-activo="comercial"] .hago-fondo { aspect-ratio: 9 / 16; width: 66%; align-self: center; }
  .hago-fondo::after { display: none; }
  .paneles { order: 3; }
  .panel { background: rgba(20, 33, 58, .84); }
  .apuntes-izq, .apuntes-lista { grid-column: 1 / -1; padding-left: 0; }
  .apuntes-izq { padding: 0 8px; }
  .nombre.pie-nombre { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}