/* ===== /persianas-motorizadas-puebla/ · efecto propio «El control»: un control remoto y una app en pantalla
   mueven el video real de una cortina motorizada ===== */
.ctl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:clamp(2.4rem,5vw,3.6rem)}
.ctl-view{position:relative;height:min(78svh,720px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000;border:1px solid var(--linea-2);box-shadow:0 50px 90px -40px rgba(0,0,0,.9)}
.ctl-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ctl-tag{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border-radius:8px;background:rgba(10,12,15,.78);font:700 .66rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:#9BE4FF}
.ctl-tag i{width:7px;height:7px;border-radius:50%;background:#ff4d3d;box-shadow:0 0 0 3px rgba(255,77,61,.25)}
.ctl-pos{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;padding:.7rem .85rem;border-radius:12px;background:rgba(10,12,15,.72);border:1px solid var(--linea-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ctl-pos .hud-row{margin-top:0}
.ctl-pos .hud-row b{font:700 1.05rem/1 var(--f-display);color:var(--texto)}
.ctl-pos .hud-bar i{transform:scaleX(var(--l,0))}
.ctl-side .ctl-nota{max-width:52ch;margin:1.6rem auto 0;text-align:center;font-size:.86rem;color:var(--texto-3)}
.ctl-mandos{display:grid;grid-template-columns:auto auto;justify-content:center;gap:clamp(1.4rem,3vw,2.6rem);align-items:end}
.ctl-mandos figure{margin:0;display:grid;justify-items:center;gap:.9rem}
.ctl-mandos figcaption{font:600 .68rem/1.35 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);text-align:center}
.ctl-mandos figcaption b{display:block;font:800 1.05rem/1 var(--f-display);letter-spacing:.02em;color:var(--texto);margin-bottom:.3rem}

/* el control remoto */
.rmt{position:relative;width:150px;padding:24px 20px 28px;border-radius:34px;display:grid;justify-items:center;gap:14px;
  background:linear-gradient(160deg,#3a3e44,#1d2024 60%,#15171a);border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 60px -30px rgba(0,0,0,.9)}
.rmt-led{width:8px;height:8px;border-radius:50%;background:#3a2a20;transition:background .15s,box-shadow .15s}
.rmt.tx .rmt-led{background:#ff8a3d;box-shadow:0 0 10px #ff8a3d}
.rmt-lcd{width:100%;padding:.45rem 0;border-radius:8px;background:#9fb3a2;box-shadow:inset 0 2px 4px rgba(0,0,0,.4);font:600 .74rem/1 var(--f-ui);letter-spacing:.14em;color:#1d2a20;text-align:center}
.rmt button{width:70px;height:70px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#e9edf1;
  background:radial-gradient(circle at 50% 35%,#4a4f56,#2a2d32 70%);box-shadow:0 6px 0 #0d0e10,0 10px 18px rgba(0,0,0,.5);transition:transform .08s,box-shadow .08s,color .2s}
.rmt button svg{width:22px;height:22px}
.rmt button:hover{color:var(--naranja)}
.rmt button:active,.rmt button.pres{transform:translateY(5px);box-shadow:0 1px 0 #0d0e10,0 4px 8px rgba(0,0,0,.5);color:var(--naranja)}
.rmt button:focus-visible{outline:2px solid var(--cielo);outline-offset:3px}
.rmt .stop{width:54px;height:54px}
.rmt .stop svg{width:14px;height:14px}

/* la app en el celular (ilustración) */
.cel{position:relative;width:250px;aspect-ratio:9/18.5;padding:12px;border-radius:36px;background:#0a0b0d;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 60px -30px rgba(0,0,0,.9)}
.cel::before{content:"";position:absolute;left:50%;top:18px;width:62px;height:16px;border-radius:10px;background:#000;transform:translateX(-50%);z-index:2}
.cel-pan{height:100%;border-radius:26px;overflow:hidden;padding:44px 14px 14px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,#171b21,#0f1216)}
.cel-t{font:600 .62rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}
.cel-h{font:800 1.25rem/1 var(--f-display);text-transform:uppercase;color:var(--texto)}
.cel-est{display:flex;justify-content:space-between;align-items:baseline;font:600 .7rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--texto-2)}
.cel-est b{font:800 1.5rem/1 var(--f-display);color:var(--texto)}
.cel input[type=range]{width:100%;accent-color:var(--naranja)}
.cel-esc{display:grid;gap:7px;margin-top:auto}
.cel-esc button{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.62rem .75rem;border-radius:12px;border:1px solid var(--linea-2);background:rgba(255,255,255,.04);cursor:pointer;font:700 .9rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;color:var(--texto);transition:border-color .25s,background .25s}
.cel-esc button small{font:600 .58rem/1 var(--f-ui);letter-spacing:.12em;color:var(--texto-3)}
.cel-esc button:hover,.cel-esc button.pres{border-color:var(--naranja);background:rgba(245,134,52,.14)}
.cel-voz{padding:.55rem .7rem;border-radius:12px;background:rgba(0,175,239,.12);border:1px solid rgba(0,175,239,.3);font-size:.72rem;line-height:1.35;color:#BFE9FA}

/* --- motores: tabla de las dos líneas --- */
.mt-tabla{width:100%;margin-top:1.8rem;border-collapse:separate;border-spacing:0;border:1px solid var(--linea);border-radius:14px;overflow:hidden;font-size:.94rem}
.mt-tabla th,.mt-tabla td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--linea)}
.mt-tabla tr:last-child th,.mt-tabla tr:last-child td{border-bottom:0}
.mt-tabla thead th{font:800 1.05rem/1.05 var(--f-display);text-transform:uppercase;background:var(--grafito-2,#1a1e24);color:var(--texto)}
.mt-tabla tbody th{font:600 .7rem/1.3 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3);width:28%}
.mt-tabla td{color:var(--texto-2)}
.mt-media{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px;margin-top:1.6rem}
.mt-media .ph--w{aspect-ratio:auto}
.mt-media .ph--w video{aspect-ratio:540/335;height:auto}
.mt-media .ph:not(.ph--w){aspect-ratio:3/4}
.ph .tag{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border-radius:8px;background:rgba(10,12,15,.78);font:700 .66rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:#9BE4FF}
.ph .tag i{width:7px;height:7px;border-radius:50%;background:#ff4d3d;box-shadow:0 0 0 3px rgba(255,77,61,.25)}

/* --- qué se puede motorizar --- */
.mtz{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(2rem,4vw,3rem)}
.mtz a{position:relative;display:block;height:100%;border-radius:16px;overflow:hidden;background:var(--grafito);border:1px solid var(--linea);transition:border-color .3s,transform .4s var(--ease)}
.mtz a:hover{border-color:rgba(0,175,239,.55);transform:translateY(-3px)}
.mtz img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.mtz div{padding:1.1rem 1.15rem 1.2rem}
.mtz b{display:block;font:800 1.3rem/1.05 var(--f-display);text-transform:uppercase}
.mtz span{display:block;margin-top:.45rem;color:var(--texto-2);font-size:.93rem}
.mtz .k{margin-top:.8rem;font:600 .7rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--cielo)}

/* --- persianas inteligentes: un día programado --- */
.dia{list-style:none;display:grid;gap:8px;margin-top:1.6rem}
.dia li{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:1rem;align-items:center;padding:.9rem 1.1rem;border-radius:14px;background:var(--grafito);border:1px solid var(--linea)}
.dia time{font:800 1.4rem/1 var(--f-display);color:var(--naranja)}
.dia b{display:block;font:800 1.05rem/1.1 var(--f-display);text-transform:uppercase}
.dia span{display:block;margin-top:.25rem;color:var(--texto-2);font-size:.92rem}
.voz{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.voz span{padding:.55rem .85rem;border-radius:999px;background:rgba(0,175,239,.1);border:1px solid rgba(0,175,239,.28);font-size:.88rem;color:#BFE9FA}

@media (max-width:1100px){.mtz{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .ctl{grid-template-columns:1fr;justify-items:center}
  .ctl-view{height:min(64svh,600px)}
  .ctl-side{width:100%}
  .ctl-mandos{justify-content:center}
  .mt-media{grid-template-columns:1fr 1fr}
  .mt-media .ph--w{grid-column:1/-1}
  /* la foto del control de pared ya no queda sola en media columna: ocupa el renglón completo */
  .mt-media .ph:not(.ph--w){grid-column:1/-1;aspect-ratio:4/3}
}
@media (max-width:640px){
  .ctl-mandos{gap:1rem}
  .rmt{width:112px;padding:18px 14px 22px;gap:12px}
  .rmt button{width:54px;height:54px}
  .rmt .stop{width:42px;height:42px}
  .cel{width:178px}
  .cel-pan{padding:40px 11px 11px;gap:9px}
  .cel-esc button{padding:.5rem .6rem;font-size:.8rem}
  .mtz{grid-template-columns:1fr}
  .mt-tabla{font-size:.88rem}
  .mt-tabla th,.mt-tabla td{padding:.7rem .75rem}
}