/* portada 3D: el lienzo queda fijo atrás y las tomas pasan por encima */
body { background: #05051F; }
[hidden] { display: none !important; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.escena3d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.tomas { position: relative; z-index: 1; }
main > section, .pie { position: relative; z-index: 2; }

.toma { min-height: 125vh; display: grid; align-items: center; padding: 110px 0 80px; color: var(--crema); }
.toma .texto { max-width: 500px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: start; }
.toma .kicker { color: var(--celeste); }
.toma h1, .toma h2 { font-size: clamp(44px, 6.2vw, 92px); font-weight: 850; text-shadow: 0 2px 30px rgb(5 5 31 / .6); }
.toma .bajada { color: var(--gris); font-size: clamp(17px, 1.5vw, 20px); max-width: 440px; margin: 0; }
.toma .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.toma-hero { position: relative; min-height: 100vh; }
.toma-tec { min-height: 150vh; }
.toma-cierre { min-height: 120vh; }

/* buscador */
.busca-tel { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 480px; margin-top: 8px; padding: 6px 6px 6px 18px; border-radius: 999px;
  background: rgb(243 242 248 / .08); border: 1px solid rgb(189 188 214 / .3); backdrop-filter: blur(10px); transition: border-color .3s, background-color .3s; }
.busca-tel:focus-within { border-color: var(--celeste); background: rgb(243 242 248 / .12); }
.busca-tel svg { width: 22px; height: 22px; flex: none; color: var(--celeste); }
.busca-tel input { flex: 1; min-width: 0; border: 0; background: none; color: var(--crema); font: 500 18px/1 var(--texto); padding: 12px 0; outline: none; }
.busca-tel input::placeholder { color: #a5a4c8; }
.busca-tel input::-webkit-search-cancel-button { filter: invert(1); }
.busca-tel .boton { min-height: 44px; padding: 0 20px; }
.busca-tel:has(input:focus-visible) { outline: 3px solid var(--celeste); outline-offset: 3px; }
.sugerencias { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--gris); }
.sugerencias button { font: 500 14px/1 var(--texto); color: var(--crema); background: rgb(169 167 255 / .12); border: 1px solid rgb(169 167 255 / .28); border-radius: 999px; padding: 9px 14px; cursor: pointer; transition: background-color .2s; }
.sugerencias button:hover { background: rgb(169 167 255 / .26); }
.res-hero { margin: 0; min-height: 1.6em; color: var(--celeste); font-weight: 600; }
.res-hero:empty { display: none; }
.cats-hero { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; max-width: 520px; }
.cats-hero a { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 999px; color: var(--gris); text-decoration: none; font-size: 14px;
  border: 1px solid rgb(189 188 214 / .18); transition: color .2s, border-color .2s, background-color .2s; }
.cats-hero a small { color: #9796bd; font-size: 12px; }
.cats-hero a:hover, .cats-hero a:focus-visible { color: var(--crema); border-color: var(--celeste); background: rgb(169 167 255 / .12); }

.bajar { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; display: grid; justify-items: center; gap: 10px; font: 600 11px/1 var(--texto); letter-spacing: .3em; text-transform: uppercase; color: var(--gris); }
.bajar::after { content: ""; width: 1px; height: 46px; background: linear-gradient(var(--celeste), transparent); transform-origin: top; animation: bajar 2s infinite cubic-bezier(.6, 0, .2, 1); }
@keyframes bajar { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* rótulos del despiece: los mueve el 3D */
.rotulos { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.rotulo { position: absolute; left: 0; top: 0; display: flex; align-items: center; opacity: 0; will-change: transform, opacity; }
.rotulo i { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--celeste); box-shadow: 0 0 0 4px rgb(169 167 255 / .25); }
.rotulo b { margin-left: 30px; position: relative; padding: 6px 12px; border-radius: 999px; background: rgb(5 5 31 / .72); border: 1px solid rgb(169 167 255 / .4);
  font: 700 13px/1 var(--display); font-stretch: 112%; letter-spacing: .04em; color: var(--crema); white-space: nowrap; backdrop-filter: blur(6px); }
.rotulo b::before { content: ""; position: absolute; right: 100%; top: 50%; width: 26px; height: 1px; background: rgb(169 167 255 / .7); }
.rotulo.izq { flex-direction: row-reverse; }
.rotulo.izq b { margin: 0 30px 0 0; right: 0; }
.rotulo.izq i { margin: -4.5px -4.5px 0 0; }
.rotulo.izq b::before { right: auto; left: 100%; }

/* sin WebGL o con movimiento reducido: la portada se lee igual */
body:not(.con-3d) .escena3d, body:not(.con-3d) .rotulos { display: none; }
body:not(.con-3d) .toma { min-height: auto; padding: 140px 0 60px; }
body:not(.con-3d) .bajar { display: none; }

@media (max-width: 819px) {
  .toma { align-items: end; padding: 0 0 56px; }
  .toma-hero { padding-top: 56vh; align-items: start; min-height: 100vh; }
  .toma .texto { max-width: none; padding: 22px 0 0; background: linear-gradient(rgb(5 5 31 / 0), rgb(5 5 31 / .82) 70px); }
  .toma-tec .texto { padding-top: 40px; }
  /* en secciones altas el texto queda pegado abajo mientras la escena trabaja */
  .toma-tec > .contenedor { position: sticky; bottom: 40px; }
  .toma h1, .toma h2 { font-size: clamp(38px, 11vw, 56px); }
  .bajar { display: none; }
  .rotulo b { font-size: 11px; padding: 5px 9px; margin-left: 20px; }
  .rotulo b::before { width: 16px; }
  .busca-tel .boton { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .bajar::after { animation: none; } }