/* A LA MEDIDA · bloque al final de la landing + hoja tipo Apple con una mini-landing de
 * desarrollo a la medida (Samuel 19-oct: «¿No encuentras lo que buscabas? Te desarrollamos la
 * solución a tu medida»). Los mockups hablan el MISMO idioma que las escenas de #hacer (vidrio,
 * filete de medio punto, letra de sistema, sombra en capas), pero con prefijo propio `am-`
 * porque las reglas de #hacer están encerradas en su sección.
 * Motor: lab/a-medida.js. Todo dibujado en HTML/CSS/SVG, cero capturas, cero cifras inventadas. */

/* ---------- BLOQUE EN LA PÁGINA ---------- */
.am-sec{ padding:0 var(--pad,20px) clamp(56px,8vw,104px); }
.am-tarjeta{ position:relative; isolation:isolate; overflow:hidden; max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:clamp(20px,4vw,56px);
  padding:clamp(28px,5vw,56px); border-radius:28px; color:#fff;
  background:radial-gradient(120% 140% at 100% 0%, rgba(0,113,227,.55), transparent 55%),
             radial-gradient(90% 120% at 0% 100%, rgba(110,67,216,.35), transparent 60%), #111114;
  box-shadow:0 30px 70px -40px rgba(18,28,45,.6); }
.am-tarjeta::after{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:28px 28px; -webkit-mask-image:radial-gradient(80% 90% at 80% 30%, #000, transparent); mask-image:radial-gradient(80% 90% at 80% 30%, #000, transparent); }
.am-eti{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono,ui-monospace,monospace); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.am-eti::before{ content:''; width:7px; height:7px; border-radius:50%; background:#34C759; box-shadow:0 0 0 4px rgba(52,199,89,.22); }
.am-tarjeta h2{ margin-top:14px; font-size:var(--fs-h2,clamp(1.7rem,1.2rem + 2.5vw,2.75rem)); line-height:1.08; letter-spacing:-.025em; font-weight:700; }
.am-tarjeta h2 span{ display:block; background:linear-gradient(90deg,#7DB8FF,#B9A4FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.am-tarjeta p{ margin-top:12px; max-width:46ch; color:rgba(255,255,255,.78); font-size:var(--fs-body,16px); line-height:1.5; }
.am-abrir{ margin-top:22px; display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 22px; border:0; border-radius:999px; cursor:pointer;
  background:#fff; color:#1D1D1F; font:600 15px var(--font,system-ui); letter-spacing:-.01em; transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 10px 30px -12px rgba(0,113,227,.8); }
.am-abrir svg{ width:16px; height:16px; transition:transform .2s ease; }
.am-abrir:hover{ transform:translateY(-1px); } .am-abrir:hover svg{ transform:translateX(3px); }
.am-abrir:focus-visible, .am-cerrar:focus-visible, .am-cta a:focus-visible{ outline:2px solid #0071E3; outline-offset:3px; }
.am-tarjeta .am-abrir:focus-visible{ outline-color:#fff; }

/* visual del bloque: una ventana que se arma sola */
.am-mini{ position:relative; justify-self:center; width:100%; max-width:340px; aspect-ratio:5/4; }
.am-ventana{ position:absolute; inset:6% 4% 10% 8%; border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); box-shadow:inset 0 0 0 .5px rgba(255,255,255,.25), 0 24px 50px -24px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.am-puntos{ display:flex; gap:5px; margin-bottom:4px; } .am-puntos i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); }
.am-puntos i:first-child{ background:#FF5F57; } .am-puntos i:nth-child(2){ background:#FEBC2E; } .am-puntos i:nth-child(3){ background:#28C840; }
.am-pieza{ display:block; height:14px; border-radius:6px; background:rgba(255,255,255,.18); transform-origin:left center; animation:amArma 5.6s cubic-bezier(.2,.8,.2,1) infinite; }
.am-pieza.a{ width:62%; background:linear-gradient(90deg,#0071E3,#5AA7FF); }
.am-pieza.b{ width:88%; animation-delay:.25s; } .am-pieza.c{ width:74%; animation-delay:.5s; }
.am-filas{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:auto; }
.am-filas i{ display:block; height:44px; border-radius:8px; background:rgba(255,255,255,.12); transform-origin:bottom; animation:amArma 5.6s cubic-bezier(.2,.8,.2,1) infinite; }
.am-filas i:nth-child(1){ animation-delay:.75s; } .am-filas i:nth-child(2){ animation-delay:.9s; background:rgba(125,184,255,.35); } .am-filas i:nth-child(3){ animation-delay:1.05s; }
@keyframes amArma{ 0%{ transform:scaleX(0); opacity:0; } 14%,82%{ transform:none; opacity:1; } 100%{ transform:none; opacity:0; } }
.am-filas i{ animation-name:amSube; }
@keyframes amSube{ 0%{ transform:scaleY(0); opacity:0; } 14%,82%{ transform:none; opacity:1; } 100%{ transform:none; opacity:0; } }
.am-chip{ position:absolute; display:inline-flex; align-items:center; gap:7px; padding:7px 12px 7px 8px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,250,252,.88)); color:#1D1D1F; font:600 12px -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.5); animation:amFlota 3.6s ease-in-out infinite alternate; }
.am-chip svg{ width:18px; height:18px; padding:3px; border-radius:50%; color:#fff; background:#0071E3; flex:none; }
.am-chip.uno{ right:0; top:0; } .am-chip.dos{ left:0; bottom:0; animation-delay:-1.4s; } .am-chip.dos svg{ background:#34C759; }
@keyframes amFlota{ from{ transform:translateY(0); } to{ transform:translateY(-7px); } }

@media (max-width:820px){
  .am-tarjeta{ grid-template-columns:1fr; }
  .am-mini{ max-width:300px; order:-1; aspect-ratio:16/10; }
}

/* ---------- HOJA (pop-up) ---------- */
.am-capa[hidden]{ display:none !important; }
.am-capa{ position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vw,40px); }
.am-fondo{ position:absolute; inset:0; background:rgba(10,12,18,.42); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); opacity:0; transition:opacity .32s ease; }
.am-hoja{ position:relative; width:min(1000px,100%); max-height:min(92vh,960px); display:flex; flex-direction:column; overflow:hidden;
  background:#F5F5F7; color:#1D1D1F; border-radius:28px; box-shadow:0 40px 120px -30px rgba(0,0,0,.55), 0 0 0 .5px rgba(0,0,0,.08);
  opacity:0; transform:translateY(28px) scale(.97); transition:opacity .32s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.am-capa.am-abierta .am-fondo{ opacity:1; }
.am-capa.am-abierta .am-hoja{ opacity:1; transform:none; }
.am-barra{ position:absolute; top:0; right:0; z-index:3; padding:14px; }
.am-cerrar{ width:36px; height:36px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center;
  background:rgba(118,118,128,.16); color:#1D1D1F; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:background .2s ease; }
.am-cerrar:hover{ background:rgba(118,118,128,.26); } .am-cerrar svg{ width:14px; height:14px; }
.am-cuerpo{ overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:clamp(28px,5vw,56px) clamp(20px,5vw,56px) 0; }
.am-cab{ text-align:center; max-width:640px; margin:0 auto; }
.am-cab .am-eti{ color:#6E6E73; }
.am-cab h2{ margin-top:12px; font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem); line-height:1.05; letter-spacing:-.03em; font-weight:700; }
.am-cab p{ margin-top:12px; font-size:clamp(1.05rem,1rem + .3vw,1.25rem); line-height:1.45; color:rgba(29,29,31,.72); }
.am-puntos-lista{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:860px; margin:28px auto 0; }
.am-puntos-lista li{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:18px; background:#fff; box-shadow:0 0 0 .5px rgba(18,28,45,.08), 0 8px 22px -14px rgba(18,28,45,.25); }
.am-puntos-lista .am-ic{ width:32px; height:32px; border-radius:9px; flex:none; display:grid; place-items:center; color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, var(--t) 78%, white), var(--t)); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12); }
.am-puntos-lista .am-ic svg{ width:17px; height:17px; }
.am-puntos-lista b{ display:block; font-size:15px; letter-spacing:-.01em; }
.am-puntos-lista span{ display:block; margin-top:2px; font-size:13.5px; line-height:1.4; color:rgba(29,29,31,.66); }

/* mockups: mismo vidrio que #hacer */
.am-galeria{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:900px; margin:32px auto 0; }
.am-caso{ margin:0; display:flex; flex-direction:column; gap:12px; }
.am-escena{ position:relative; overflow:hidden; height:236px; border-radius:22px; isolation:isolate;
  background:radial-gradient(90% 90% at 70% 20%, color-mix(in srgb, var(--t) 22%, white), transparent 70%), linear-gradient(180deg,#fff,#EEF0F4);
  box-shadow:0 0 0 .5px rgba(18,28,45,.08), 0 20px 50px -30px rgba(18,28,45,.35);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing:-.006em; font-size:12px;
  --am-sombra:inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 .5px rgba(18,28,45,.12), 0 1px 2px rgba(18,28,45,.05), 0 12px 28px -12px rgba(18,28,45,.26), 0 40px 70px -36px rgba(18,28,45,.42); }
.am-caso figcaption b{ display:block; font-size:15px; letter-spacing:-.012em; }
.am-caso figcaption span{ display:block; margin-top:2px; font-size:13.5px; color:rgba(29,29,31,.66); line-height:1.4; }
.am-card{ position:absolute; display:flex; flex-direction:column; gap:9px; padding:12px; border-radius:16px; color:#1D1D1F;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(250,250,252,.86)); -webkit-backdrop-filter:blur(26px) saturate(190%); backdrop-filter:blur(26px) saturate(190%); box-shadow:var(--am-sombra); }
.am-tit{ display:flex; align-items:center; gap:9px; } .am-tit > div{ flex:1; min-width:0; }
.am-tit b{ display:block; font-size:13px; font-weight:600; letter-spacing:-.016em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.am-tit small{ display:block; font-size:11px; color:#6E6E73; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.am-ico{ width:26px; height:26px; border-radius:7px; flex:none; display:grid; place-items:center; color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, var(--t) 78%, white), var(--t)); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12), 0 2px 6px -2px color-mix(in srgb, var(--t) 70%, transparent); }
.am-ico svg{ width:14px; height:14px; }
.am-tag{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; padding:3px 8px 3px 7px; border-radius:999px; white-space:nowrap; flex:none;
  background:color-mix(in srgb, var(--t) 14%, white); color:var(--t); }
.am-tag::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.am-raya{ display:block; height:6px; border-radius:6px; background:rgba(118,118,128,.14); }
.am-flota{ position:absolute; display:flex; align-items:center; gap:8px; padding:7px 12px 7px 8px; border-radius:999px; white-space:nowrap; font-weight:600; font-size:11.5px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,250,252,.88)); box-shadow:var(--am-sombra); color:#1D1D1F; }
.am-flota .am-ico{ width:20px; height:20px; border-radius:50%; } .am-flota .am-ico svg{ width:11px; height:11px; }

/* 1 · tablero */
.am-tablero{ left:18px; right:18px; top:20px; bottom:20px; }
.am-kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.am-kpis div{ padding:8px; border-radius:10px; background:rgba(118,118,128,.08); display:flex; flex-direction:column; gap:6px; }
.am-kpis small{ font-size:10.5px; color:#6E6E73; font-weight:600; }
.am-kpis i{ display:block; height:5px; border-radius:5px; background:rgba(118,118,128,.14); overflow:hidden; }
.am-kpis i::before{ content:''; display:block; height:100%; width:var(--w); border-radius:inherit; background:linear-gradient(90deg, color-mix(in srgb, var(--c) 65%, white), var(--c)); transform-origin:left; animation:amLlena 4.8s cubic-bezier(.2,.8,.2,1) infinite; }
.am-graf{ flex:1; display:flex; align-items:flex-end; gap:6px; padding:4px 2px 0; border-bottom:.5px solid rgba(60,60,67,.2); }
.am-graf i{ flex:1; height:var(--h); border-radius:5px 5px 2px 2px; background:linear-gradient(180deg, color-mix(in srgb, var(--t) 55%, white), var(--t)); transform-origin:bottom; animation:amCrece 4.8s cubic-bezier(.2,.8,.2,1) infinite; }
.am-graf i:nth-child(odd){ opacity:.55; }
.am-graf i:nth-child(2){ animation-delay:.08s; } .am-graf i:nth-child(3){ animation-delay:.16s; } .am-graf i:nth-child(4){ animation-delay:.24s; }
.am-graf i:nth-child(5){ animation-delay:.32s; } .am-graf i:nth-child(6){ animation-delay:.4s; } .am-graf i:nth-child(7){ animation-delay:.48s; } .am-graf i:nth-child(8){ animation-delay:.56s; }
@keyframes amCrece{ 0%{ transform:scaleY(.05); } 22%,86%{ transform:none; } 100%{ transform:scaleY(.05); } }
@keyframes amLlena{ 0%{ transform:scaleX(0); } 22%,86%{ transform:none; } 100%{ transform:scaleX(0); } }

/* 2 · portal del cliente en el celular */
.am-tel{ position:absolute; left:50%; top:16px; width:172px; height:300px; margin-left:-86px; padding:6px; border-radius:30px; background:#111;
  box-shadow:inset 0 0 0 1.5px #3a3a3c, 0 0 0 .5px rgba(0,0,0,.4), 0 30px 60px -24px rgba(18,28,45,.55); }
.am-tel::before{ content:''; position:absolute; z-index:2; top:12px; left:50%; width:46px; height:13px; margin-left:-23px; border-radius:10px; background:#000; }
.am-pantalla{ height:100%; border-radius:24px; background:#F5F5F7; padding:34px 9px 9px; display:flex; flex-direction:column; gap:7px; overflow:hidden; }
.am-pantalla > b{ font-size:14px; letter-spacing:-.02em; }
.am-anillo{ display:flex; align-items:center; gap:9px; padding:8px; border-radius:12px; background:#fff; box-shadow:0 0 0 .5px rgba(18,28,45,.08); }
.am-anillo svg{ width:32px; height:32px; flex:none; transform:rotate(-90deg); }
.am-anillo circle{ fill:none; stroke-width:5; }
.am-anillo .fondo{ stroke:rgba(118,118,128,.16); }
.am-anillo .valor{ stroke:var(--t); stroke-linecap:round; stroke-dasharray:88 100; animation:amAnillo 4.8s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes amAnillo{ 0%{ stroke-dashoffset:88; } 26%,86%{ stroke-dashoffset:30; } 100%{ stroke-dashoffset:88; } }
.am-anillo b{ display:block; font-size:11px; } .am-anillo small{ display:block; font-size:9.5px; color:#6E6E73; }
.am-opc{ display:flex; flex-direction:column; border-radius:12px; background:#fff; box-shadow:0 0 0 .5px rgba(18,28,45,.08); }
.am-opc span{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:7px 9px; font-size:10.5px; font-weight:500; }
.am-opc span + span{ box-shadow:inset 0 .5px 0 rgba(60,60,67,.16); }
.am-opc span::after{ content:''; width:5px; height:5px; border-right:1.5px solid #C7C7CC; border-bottom:1.5px solid #C7C7CC; transform:rotate(-45deg); }
.am-aviso{ left:12px; bottom:22px; animation:amAviso 4.8s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes amAviso{ 0%,30%{ opacity:0; transform:translateY(-12px) scale(.96); } 40%,84%{ opacity:1; transform:none; } 94%,100%{ opacity:0; transform:translateY(-12px) scale(.96); } }

/* 3 · conexiones */
.am-red{ position:absolute; inset:0; }
.am-red > svg{ position:absolute; inset:0; width:100%; height:100%; }
.am-red path{ fill:none; vector-effect:non-scaling-stroke; }
.am-red .linea{ stroke:rgba(60,60,67,.22); stroke-width:1.5; }
.am-red .flujo{ stroke:var(--t); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:4 96; animation:amFluye 2.4s linear infinite; }
.am-red .flujo.vuelta{ animation-direction:reverse; animation-delay:-1.2s; }
@keyframes amFluye{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:0; } }
.am-nodo{ position:absolute; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:6px; padding:6px 10px 6px 6px; border-radius:999px; white-space:nowrap;
  background:#fff; box-shadow:var(--am-sombra); font-size:11.5px; font-weight:600; }
.am-nodo i{ width:20px; height:20px; border-radius:6px; display:grid; place-items:center; color:#fff; background:var(--c); flex:none; }
.am-nodo i svg{ width:12px; height:12px; }
.am-centro{ position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(180deg,#2A8CFF,#0071E3); box-shadow:0 0 0 6px rgba(0,113,227,.12), 0 20px 40px -16px rgba(0,113,227,.7); }
.am-centro::after{ content:''; position:absolute; inset:-6px; border-radius:22px; border:2px solid rgba(0,113,227,.35); animation:amLatido 2.4s ease-out infinite; }
@keyframes amLatido{ from{ transform:scale(1); opacity:1; } to{ transform:scale(1.35); opacity:0; } }
.am-centro svg{ width:34px; height:34px; }
.am-centro small{ position:absolute; top:100%; margin-top:12px; font-size:11px; font-weight:600; color:#1D1D1F; white-space:nowrap; }

/* 4 · reporte */
.am-hojarep{ left:50%; top:18px; width:min(250px,76%); margin-left:max(-125px,-38%); bottom:-30px; transform:rotate(-2deg); }
.am-linea svg{ width:100%; height:64px; display:block; }
.am-linea .area{ fill:color-mix(in srgb, var(--t) 14%, transparent); }
.am-linea .trazo{ fill:none; stroke:var(--t); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:300; animation:amTraza 4.8s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes amTraza{ 0%{ stroke-dashoffset:300; } 40%,88%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:300; } }
.am-tabla{ display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; }
.am-tabla .am-raya:nth-child(even){ width:34px; background:color-mix(in srgb, var(--t) 22%, white); }
.am-correo{ right:14px; bottom:16px; animation:amFlota 3.6s ease-in-out infinite alternate; }

/* animaciones sólo con la hoja abierta (no gastar CPU con ella cerrada) */
.am-capa:not(.am-abierta) *, .am-capa:not(.am-abierta) *::before, .am-capa:not(.am-abierta) *::after{ animation-play-state:paused !important; }

/* llamadas a la acción */
.am-cta{ position:sticky; bottom:0; z-index:2; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:28px calc(-1 * clamp(20px,5vw,56px)) 0;
  padding:16px clamp(20px,5vw,56px) calc(16px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg, rgba(245,245,247,.72), rgba(245,245,247,.96)); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 .5px 0 rgba(60,60,67,.18); }
.am-cta a{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:999px; font:600 15px var(--font,system-ui); letter-spacing:-.01em; text-decoration:none; cursor:pointer; transition:transform .2s ease, background .2s ease; }
.am-cta .am-pri{ background:#0071E3; color:#fff; } .am-cta .am-pri:hover{ background:#0077ED; }
.am-cta .am-sec2{ background:#fff; color:#1D1D1F; box-shadow:inset 0 0 0 1px rgba(10,10,10,.12); } .am-cta .am-sec2:hover{ background:#FAFAFC; }
.am-cta svg{ width:16px; height:16px; }

/* bloqueo de la página detrás */
html.am-bloqueo, html.am-bloqueo body{ overflow:hidden !important; }

/* tableta */
@media (max-width:860px){
  .am-puntos-lista{ grid-template-columns:1fr; max-width:520px; }
}
/* celular: hoja a pantalla completa que sube desde abajo */
@media (max-width:640px){
  .am-capa{ padding:0; align-items:stretch; }
  .am-hoja{ width:100%; max-height:none; height:100%; height:100dvh; border-radius:0; transform:translateY(100%); transition:opacity .2s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
  .am-barra{ padding:max(12px, env(safe-area-inset-top,0px)) 12px 12px; }
  .am-cuerpo{ padding-top:calc(52px + env(safe-area-inset-top,0px)); flex:1; }
  .am-galeria{ grid-template-columns:1fr; gap:22px; }
  .am-cta a{ flex:1 1 100%; }
  .am-cta{ gap:8px; }
}
@media (prefers-reduced-motion:reduce){
  .am-hoja, .am-fondo, .am-abrir, .am-abrir svg{ transition:none !important; }
  .am-hoja{ transform:none !important; }
  .am-sec *, .am-capa *, .am-capa *::before, .am-capa *::after{ animation:none !important; }
  .am-aviso{ opacity:1; transform:none; }
}

/* ---------- v2 (Samuel 19-oct: «más mockups»): administración, obra, web, rentas ---------- */
.am-cab p.am-sub{ margin-top:6px; font-size:clamp(.98rem,.95rem + .2vw,1.08rem); color:rgba(29,29,31,.6); }
.am-lista{ display:flex; flex-direction:column; }
.am-fila{ display:flex; align-items:center; gap:9px; padding:7px 0; }
.am-fila + .am-fila{ box-shadow:inset 0 .5px 0 rgba(60,60,67,.16); }
.am-fila > div{ flex:1; min-width:0; }
.am-fila b{ display:block; font-size:12.5px; font-weight:600; letter-spacing:-.014em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.am-fila small{ display:block; font-size:10.5px; color:#6E6E73; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.am-tag.am-g{ background:#E6F6EA; color:#1E7B3A; } .am-tag.am-n{ background:#FFF1E4; color:#B44D00; } .am-tag.am-r{ background:#FDE8E7; color:#C0352B; }
.am-av{ width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; background:var(--c); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14); }
.am-av svg{ width:13px; height:13px; }
.am-seg{ display:flex; gap:2px; padding:2px; border-radius:9px; background:rgba(118,118,128,.12); }
.am-seg span{ flex:1; text-align:center; font-size:10.5px; font-weight:600; padding:4px 6px; border-radius:7px; color:#3C3C43; white-space:nowrap; }
.am-seg span.on{ background:#fff; color:#1D1D1F; box-shadow:0 1px 3px rgba(0,0,0,.12); }
/* filas que entran una por una */
.am-lista .am-fila{ animation:amFilaEntra 5.6s cubic-bezier(.2,.8,.2,1) infinite; }
.am-lista .am-fila:nth-child(2){ animation-delay:.15s; } .am-lista .am-fila:nth-child(3){ animation-delay:.3s; }
@keyframes amFilaEntra{ 0%{ opacity:0; transform:translateY(6px); } 8%,96%{ opacity:1; transform:none; } 100%{ opacity:0; } }

/* administración */
.am-admin{ left:16px; right:16px; top:16px; gap:8px; }
.am-adm-cuerpo{ display:grid; grid-template-columns:minmax(0,1fr) 128px; gap:12px; align-items:start; }
.am-flujo{ display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:10px; background:rgba(118,118,128,.08); margin-top:7px; }
.am-flujo > small{ font-size:10.5px; font-weight:600; color:#6E6E73; }
.am-barras{ height:54px; display:flex; align-items:flex-end; gap:3px; }
.am-barras i{ flex:1; height:var(--h); border-radius:3px 3px 1px 1px; transform-origin:bottom; animation:amCrece 4.8s cubic-bezier(.2,.8,.2,1) infinite; }
.am-barras i.e, .am-ley i.e{ background:#34C759; } .am-barras i.s, .am-ley i.s{ background:#FF6B5E; }
.am-barras i:nth-child(n+3){ animation-delay:.1s; } .am-barras i:nth-child(n+5){ animation-delay:.2s; } .am-barras i:nth-child(n+7){ animation-delay:.3s; }
.am-ley{ display:flex; gap:10px; font-size:10px; color:#6E6E73; } .am-ley span{ display:flex; align-items:center; gap:4px; } .am-ley i{ width:7px; height:7px; border-radius:2px; }

/* obra · cronograma */
.am-gantt{ left:16px; right:16px; top:16px; gap:8px; }
.am-meses, .am-g-fila{ display:grid; grid-template-columns:84px 1fr; align-items:center; gap:8px; }
.am-meses{ grid-template-columns:84px repeat(4,1fr); gap:0; font-size:10px; color:#6E6E73; }
.am-meses span + span{ padding-left:4px; box-shadow:inset .5px 0 0 rgba(60,60,67,.16); }
.am-g-fila small{ font-size:11px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.am-g-fila i{ position:relative; display:block; height:12px; border-radius:6px; background:linear-gradient(90deg, transparent var(--x), color-mix(in srgb, var(--t) 18%, white) var(--x), color-mix(in srgb, var(--t) 18%, white) calc(var(--x) + var(--w)), transparent calc(var(--x) + var(--w))); }
.am-g-fila i::after{ content:''; position:absolute; top:0; bottom:0; left:var(--x); width:calc(var(--w) * var(--p)); border-radius:6px; background:linear-gradient(90deg, color-mix(in srgb, var(--t) 70%, white), var(--t)); transform-origin:left; animation:amLlena 4.8s cubic-bezier(.2,.8,.2,1) infinite; }
.am-entrega{ right:14px; bottom:14px; animation:amAviso 4.8s cubic-bezier(.2,.8,.2,1) infinite; }

/* web en laptop */
.am-lap{ position:absolute; left:50%; top:16px; width:min(330px,86%); transform:translateX(-50%); }
.am-lap-pant{ border-radius:12px 12px 0 0; padding:6px 6px 0; background:#1D1D1F; box-shadow:0 0 0 .5px rgba(0,0,0,.4), 0 30px 60px -28px rgba(18,28,45,.55); }
.am-lap-base{ height:9px; margin:0 -7%; border-radius:0 0 10px 10px; background:linear-gradient(180deg,#D9DADF,#A9ABB2); box-shadow:0 10px 20px -10px rgba(18,28,45,.5); }
.am-nav{ display:flex; align-items:center; gap:4px; padding:5px 6px; border-radius:6px 6px 0 0; background:#F2F2F5; }
.am-nav i{ width:6px; height:6px; border-radius:50%; background:#D1D1D6; }
.am-nav span{ flex:1; margin-left:6px; text-align:center; font-size:9px; color:#6E6E73; background:#fff; border-radius:4px; padding:2px; }
.am-web{ background:#fff; padding:8px; display:flex; flex-direction:column; gap:6px; height:156px; overflow:hidden; }
.am-busca{ display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:8px; background:rgba(118,118,128,.1); font-size:10px; color:#6E6E73; }
.am-busca svg{ width:11px; height:11px; flex:none; }
.am-filtros{ display:flex; gap:4px; } .am-filtros span{ font-size:9.5px; font-weight:600; padding:3px 8px; border-radius:999px; background:rgba(118,118,128,.12); color:#3C3C43; white-space:nowrap; }
.am-filtros span.on{ background:var(--t); color:#fff; }
.am-props{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.am-prop{ display:flex; flex-direction:column; gap:2px; animation:amFilaEntra 5.6s cubic-bezier(.2,.8,.2,1) infinite; }
.am-prop:nth-child(2){ animation-delay:.15s; } .am-prop:nth-child(3){ animation-delay:.3s; }
.am-prop i{ display:block; height:52px; border-radius:6px; background:center/cover no-repeat #E5E7EB; margin-bottom:2px; }
.am-prop i.f1{ background-image:url(/inicio/img/foto/fachada-800.webp); }   /* 2026-10-20: miniatura de 52 px; mismo archivo que f2, una sola descarga */
.am-prop i.f2{ background-image:url(/inicio/img/foto/fachada-800.webp); }
.am-prop i.f3{ background-image:url(/inicio/img/baala-show/r-sala-comedor-800.webp); }
.am-prop b{ font-size:9.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.am-prop small{ font-size:9px; color:#6E6E73; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* rentas */
.am-rentas{ left:16px; right:16px; top:16px; gap:6px; }
.am-recuerda{ left:50%; bottom:14px; margin-left:-118px; width:236px; justify-content:center; animation:amAviso 4.8s cubic-bezier(.2,.8,.2,1) infinite; animation-delay:-.6s; }

@media (max-width:420px){
  .am-meses, .am-g-fila{ grid-template-columns:72px 1fr; } .am-meses{ grid-template-columns:72px repeat(4,1fr); }
  .am-adm-cuerpo{ grid-template-columns:minmax(0,1fr) 96px; gap:8px; }
}
@media (prefers-reduced-motion:reduce){ .am-entrega, .am-recuerda{ opacity:1; transform:none; } }

/* quiénes somos (Samuel 19-oct) */
.am-cab p.am-quienes{ margin-top:16px; font-size:14px; font-weight:600; color:#1D1D1F; }
.am-roles{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:10px; }
.am-roles li{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px 5px 5px; border-radius:999px; background:#fff; font-size:12.5px; font-weight:600; white-space:nowrap;
  box-shadow:0 0 0 .5px rgba(18,28,45,.1), 0 4px 12px -8px rgba(18,28,45,.3); }
.am-roles i{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(180deg, color-mix(in srgb, var(--t) 78%, white), var(--t)); }
.am-roles svg{ width:12px; height:12px; }

/* ---------- v3 (Samuel 19-oct: «administración de propiedades, asset management»): brokers, condominios, activos ---------- */
/* con número impar de casos, el último ocupa las dos columnas */
@media (min-width:641px){ .am-galeria > .am-caso:last-child:nth-child(odd){ grid-column:1 / -1; } }
.am-card u{ text-decoration:none; display:block; text-align:center; padding:7px; border-radius:10px; color:#fff; font-weight:600; font-size:12px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--t) 86%, white), var(--t)); box-shadow:inset 0 .5px 0 rgba(255,255,255,.35), 0 4px 10px -4px color-mix(in srgb, var(--t) 70%, transparent); }
.am-av svg{ width:13px; height:13px; }

/* brokers */
.am-broker{ left:16px; right:16px; top:16px; gap:8px; }
.am-unidades{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:3px; }
.am-unidades i, .am-ley2 i{ display:block; height:13px; border-radius:3px; background:rgba(118,118,128,.16); }
.am-unidades i.d, .am-ley2 i.d{ background:#34C759; } .am-unidades i.a, .am-ley2 i.a{ background:#FFB340; } .am-unidades i.v, .am-ley2 i.v{ background:rgba(118,118,128,.28); }
.am-unidades i{ animation:amFilaEntra 5.6s cubic-bezier(.2,.8,.2,1) infinite; }
.am-unidades i:nth-child(3n+2){ animation-delay:.1s; } .am-unidades i:nth-child(3n){ animation-delay:.2s; }
.am-unidades i:nth-child(16){ animation:amParpadea 2.4s ease-in-out infinite; }
@keyframes amParpadea{ 0%,100%{ box-shadow:0 0 0 0 rgba(52,199,89,.5); } 50%{ box-shadow:0 0 0 4px rgba(52,199,89,0); } }
.am-ley2{ display:flex; gap:10px; font-size:10.5px; color:#6E6E73; } .am-ley2 span{ display:flex; align-items:center; gap:4px; } .am-ley2 i{ width:9px; height:9px; }
.am-prospecto{ right:14px; bottom:14px; animation:amAviso 4.8s cubic-bezier(.2,.8,.2,1) infinite; animation-delay:-1s; }

/* condominios */
.am-condo{ left:16px; right:16px; top:16px; gap:7px; }
.am-avisa{ right:14px; bottom:12px; animation:amAviso 4.8s cubic-bezier(.2,.8,.2,1) infinite; animation-delay:-.4s; }

/* asset management */
.am-asset{ left:16px; right:16px; top:16px; gap:6px; }
.am-act-cab, .am-act{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:center; }
.am-act-cab small{ font-size:10px; color:#6E6E73; font-weight:600; }
.am-act{ padding:6px 0; box-shadow:inset 0 .5px 0 rgba(60,60,67,.16); }
.am-act b{ display:block; font-size:12.5px; font-weight:600; } .am-act small{ display:block; font-size:10.5px; color:#6E6E73; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.am-oc{ display:block; height:8px; border-radius:8px; background:color-mix(in srgb, var(--t) 14%, white); overflow:hidden; }
.am-oc i, .am-ie i{ display:block; height:100%; width:var(--w); border-radius:inherit; transform-origin:left; animation:amLlena 4.8s cubic-bezier(.2,.8,.2,1) infinite; }
.am-oc i{ background:linear-gradient(90deg, color-mix(in srgb, var(--t) 65%, white), var(--t)); }
.am-ie{ display:flex; flex-direction:column; gap:3px; }
.am-ie i{ height:5px; border-radius:5px; } .am-ie i.e{ background:#34C759; } .am-ie i.s{ background:#FF6B5E; animation-delay:.15s; }
.am-tend{ flex:none; width:96px; display:flex; flex-direction:column; gap:1px; text-align:right; }
.am-tend small{ font-size:10.5px; font-weight:600; color:#6E6E73; }
.am-tend svg{ width:100%; height:26px; display:block; }
.am-tend .area{ fill:color-mix(in srgb, var(--t) 14%, transparent); }
.am-tend .trazo{ fill:none; stroke:var(--t); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; stroke-dasharray:200; animation:amTraza 4.8s cubic-bezier(.4,0,.2,1) infinite; }
@media (max-width:420px){ .am-tend{ width:74px; } .am-unidades{ grid-template-columns:repeat(8,minmax(0,1fr)); } .am-unidades i:nth-child(n+17){ display:none; } }
@media (prefers-reduced-motion:reduce){ .am-prospecto, .am-avisa{ opacity:1; transform:none; } }