/* ============================================================
   CONTROL HOUSE — componentes
   ============================================================ */

/* ---------- portada ----------
   La foto manda. El texto se apoya sobre ella, no al lado.
   La imagen va como <picture> y no como fondo CSS: un fondo no lo
   descubre el preescáner del navegador y arruina el LCP. */
.portada{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(580px, 84svh, 920px);
  display:flex; flex-direction:column; justify-content:flex-end;
  border-bottom:1px solid var(--borde);
}
.portada-foto{position:absolute; inset:0; z-index:-2; display:block}
.portada-foto img{width:100%; height:100%; object-fit:cover; object-position:58% 50%}
.portada-velo{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(8,9,9,.98) 0%, rgba(8,9,9,.82) 22%, rgba(8,9,9,.25) 62%, rgba(8,9,9,.08) 100%),
    linear-gradient(to right, rgba(8,9,9,.52) 0%, rgba(8,9,9,.08) 72%);
}
.portada-txt{padding-block:clamp(42px,7vw,86px)}
.portada-bloque{max-width:860px}

.portada-eyebrow{margin-bottom:18px; color:#E0CDB0; font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase}
.portada h1{font-size:clamp(50px,8.3vw,104px); line-height:.96; max-width:9ch}
.portada-sub{
  font-family:'Archivo',system-ui,sans-serif; font-weight:350; font-size:clamp(17px,1.75vw,21px);
  line-height:1.55; letter-spacing:0; color:#E1E0D9; max-width:39ch; margin-top:22px;
}
.portada-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:29px}
.marquesina{display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:38px; color:#D0D0C8; font-size:11.5px}
.marquesina span{display:flex; align-items:center; gap:8px}
.marquesina i{width:4px; height:4px; border-radius:50%; background:var(--marca-claro); display:block}

/* el texto va a la izquierda, sobre el portón (la zona más oscura de la foto),
   y deja la casa iluminada libre a la derecha */
@media (min-width:900px){
  .portada-bloque{max-width:min(470px, 36vw)}
  .portada h1{font-size:clamp(50px,5.6vw,84px)}
  .portada-velo{background:
    linear-gradient(to top, rgba(8,9,9,.96) 0%, rgba(8,9,9,.55) 18%, rgba(8,9,9,0) 45%),
    linear-gradient(to right, rgba(8,9,9,.62) 0%, rgba(8,9,9,.4) 30%, rgba(8,9,9,0) 48%)}
}

@media (min-width:900px){ .portada-sub{max-width:31ch} }

/* en el celular: título arriba sobre el cielo, botones abajo sobre la entrada,
   y la casa libre en el medio */
@media (max-width:899px){
  .portada{min-height:calc(100svh - 66px)}
  .portada-txt{flex:1; display:flex; padding-block:28px 34px}
  .portada-bloque{display:flex; flex-direction:column; flex:1}
  .portada-cta{margin-top:auto; padding-top:24px}
  .portada h1{font-size:clamp(40px,11vw,60px)}
  .portada-sub{font-size:16px; margin-top:14px}
  .portada h1,.portada-sub,.portada-eyebrow{text-shadow:0 1px 14px rgba(8,9,9,.85), 0 0 2px rgba(8,9,9,.6)}
  .marquesina{margin-top:22px}
  .portada-velo{background:
    linear-gradient(to bottom, rgba(8,9,9,.78) 0%, rgba(8,9,9,.45) 30%, rgba(8,9,9,0) 44%),
    linear-gradient(to top, rgba(8,9,9,.97) 0%, rgba(8,9,9,.75) 24%, rgba(8,9,9,0) 44%)}
}

@media (max-width:899px) and (max-height:700px){ .portada .marquesina{display:none} }

/* un solo momento orquestado al cargar; nada de animar cada sección */
@keyframes ch-foto{ from{ transform:scale(1.07) } to{ transform:none } }
@keyframes ch-sube{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
.portada-foto img{animation:ch-foto 1.6s cubic-bezier(.2,.7,.2,1) both}
.portada h1{animation:ch-sube .85s cubic-bezier(.2,.7,.2,1) .1s both}
.portada-sub{animation:ch-sube .85s cubic-bezier(.2,.7,.2,1) .22s both}
.portada-cta{animation:ch-sube .85s cubic-bezier(.2,.7,.2,1) .34s both}
.marquesina{animation:ch-sube .85s cubic-bezier(.2,.7,.2,1) .46s both}

/* ---------- escenas 3D (se conservan para futuras experiencias) ---------- */
.teatro{
  position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--borde);
  background:radial-gradient(130% 100% at 50% 0%, #131C2C 0%, var(--fondo-2) 60%, var(--fondo) 100%);
  aspect-ratio:16/9;
}
.teatro.alto{aspect-ratio:16/10}
@media (max-width:820px){ .teatro, .teatro.alto{aspect-ratio:4/5} }
.teatro canvas{display:block; width:100%; height:100%}
.sello{
  position:absolute; left:16px; bottom:14px; font-family:'Plex Mono',monospace;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3);
  pointer-events:none;
}
.aviso3d{position:absolute; inset:0; display:grid; place-content:center; text-align:center;
         padding:24px; color:var(--texto-2); font-size:14px}
.aviso3d[hidden]{display:none}

.teclas{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.mando .teclas{margin-top:0}
.tecla{
  display:inline-flex; align-items:center; gap:9px; font:inherit; font-size:13.5px; font-weight:500;
  color:var(--texto-2); background:var(--panel); border:1px solid var(--borde);
  border-radius:99px; padding:8px 16px 8px 12px; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.tecla .pito{width:7px; height:7px; border-radius:50%; background:var(--texto-3); flex:none;
             transition:background .3s, box-shadow .3s}
.tecla:hover{border-color:var(--borde-2); color:var(--texto)}
.tecla[aria-pressed="true"]{color:var(--texto); background:var(--panel-2); border-color:#30405A}
.tecla[aria-pressed="true"] .pito{background:var(--calido); box-shadow:0 0 0 4px rgba(255,192,122,.15)}
.tecla.frio[aria-pressed="true"] .pito{background:var(--marca-claro); box-shadow:0 0 0 4px rgba(101,160,255,.18)}

/* ---------- experiencias ----------
   Un solo mando. Antes los controles estaban en tres grupos sueltos
   (momentos arriba, teclas abajo, guion al costado) y el ojo no tenía
   dónde aterrizar. Ahora es una sola pieza al lado de la escena. */
.obra{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:stretch; margin-top:30px}
@media (max-width:980px){ .obra{grid-template-columns:minmax(0,1fr)} }

.mando{
  display:flex; flex-direction:column;
  border:1px solid var(--borde); border-radius:var(--r); background:var(--panel); overflow:hidden;
}
.mando > * + *{border-top:1px solid var(--borde)}
.mando-zona{padding:16px 18px}
.mando-rot{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-3); margin-bottom:11px;
}

.guiones{display:flex; flex-wrap:wrap; gap:7px}
.guion{
  font:inherit; font-size:13px; font-weight:500; color:var(--texto-2); background:var(--fondo-2);
  border:1px solid var(--borde); border-radius:99px; padding:7px 14px; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.guion:hover{border-color:var(--borde-2); color:var(--texto)}
.guion[aria-pressed="true"]{background:var(--marca); border-color:var(--marca); color:#fff}

.mando-guion{flex:1}
.mando-guion .hora{font-family:'Plex Mono',monospace; font-size:12px; color:var(--calido);
                   letter-spacing:.06em; display:block; margin-bottom:3px}
.mando-guion h3{margin-bottom:13px; font-family:'Fraunces',Georgia,serif; font-weight:300;
                font-size:23px; letter-spacing:-.02em}
.mando-guion ol{list-style:none; margin:0; padding:0}
.mando-guion li{
  display:flex; gap:11px; padding:8px 0; border-bottom:1px solid var(--borde);
  font-size:14px; color:var(--texto-2); opacity:.3; transform:translateY(2px);
  transition:opacity .45s ease, transform .45s ease, color .45s ease;
}
.mando-guion li:last-child{border-bottom:0}
.mando-guion li.vivo{opacity:1; transform:none; color:var(--texto)}
.mando-guion li b{font-family:'Plex Mono',monospace; font-size:11.5px; font-weight:400;
                  color:var(--texto-3); flex:none; width:16px; padding-top:2px}
.mando-guion li.vivo b{color:var(--calido)}
.mando-guion .cierre-c{margin-top:13px; font-size:13px; color:var(--texto-3)}

/* ---------- rejas genéricas ---------- */
.tres{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; background:transparent;
      border:0; border-top:1px solid var(--borde); border-radius:0; overflow:hidden}
@media (max-width:820px){ .tres{grid-template-columns:minmax(0,1fr)} }
.tres > div{background:transparent; padding:28px 28px 10px 0}
.tres h3{margin-bottom:9px}
.tres p{color:var(--texto-2); font-size:14.5px}

/* ---------- ambientes ---------- */
.ambiente{margin-top:var(--paso)}
.ambiente:first-of-type{margin-top:0}
.ambiente-txt{max-width:58ch; margin-bottom:22px}
.ambiente h3{font-family:'Fraunces',Georgia,serif; font-weight:200; font-size:clamp(24px,3.4vw,34px);
             letter-spacing:-.02em; line-height:1.1; margin-bottom:10px}
.ambiente .bajada{font-size:16px; margin-top:0}

.zonas{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(24px,4vw,56px); row-gap:clamp(48px,7vw,88px); margin-top:44px}
.zona{overflow:hidden; border:0; background:transparent}
.zona img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; object-position:center; background:var(--panel)}
.zona-contenido{padding:20px 0 0}
.zona h3{font-family:'Fraunces',Georgia,serif; font-weight:300; font-size:clamp(28px,3.2vw,38px);
         letter-spacing:-.025em; line-height:1.08; margin-bottom:10px}
.zona p{color:var(--texto-2); font-size:15px; line-height:1.72; max-width:58ch}
.zona-etiqueta{display:inline-block; margin-top:15px; color:var(--marca-claro); font-family:'Archivo',sans-serif;
               font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase}
.aviso-demo{margin-top:17px; color:var(--texto-3); font-size:12px}
@media (max-width:820px){ .zonas{grid-template-columns:minmax(0,1fr); row-gap:42px; margin-top:30px} }

/* ---------- soluciones ---------- */
.soluciones{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:0;
            background:transparent; border:0; border-top:1px solid var(--borde); border-radius:0; overflow:hidden}
.sol{background:transparent; padding:28px 22px 24px 0; display:flex; flex-direction:column; gap:9px}
.sol svg{width:22px; height:22px; stroke:var(--marca-claro); fill:none; stroke-width:1.4;
         stroke-linecap:round; stroke-linejoin:round; margin-bottom:6px}
.sol p{color:var(--texto-2); font-size:14.5px; flex:1}
.sol .desde{font-family:'Plex Mono',monospace; font-size:12px; color:var(--texto-3);
            padding-top:10px; border-top:1px solid var(--borde)}
.sol .desde b{color:var(--texto-2); font-weight:400}

/* ---------- proceso ---------- */
.proceso{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:26px}
.paso .n{font-family:'Plex Mono',monospace; font-size:12px; color:var(--marca-claro);
         letter-spacing:.1em; display:block; margin-bottom:12px; padding-bottom:12px;
         border-bottom:1px solid var(--borde)}
.paso h3{margin-bottom:7px; font-size:17px}
.paso p{color:var(--texto-2); font-size:14px}

/* ---------- proyectos ---------- */
.proyectos{display:flex; flex-direction:column; gap:0; background:transparent;
           border:0; border-top:1px solid var(--borde); border-radius:0; overflow:hidden}
.proy{background:transparent; padding:34px 0; border-bottom:1px solid var(--borde); display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,2.1fr); gap:24px}
@media (max-width:820px){ .proy{grid-template-columns:minmax(0,1fr); gap:16px} }
.proy-cab .tipo{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
                color:var(--marca-claro); display:block; margin-bottom:8px}
.proy-cab h3{font-family:'Fraunces',Georgia,serif; font-weight:300; font-size:24px; letter-spacing:-.02em}
.proy-cab .lugar{color:var(--texto-3); font-size:13px; margin-top:6px}
.proy-cuerpo{display:flex; flex-direction:column; gap:14px}
.tramo{display:grid; grid-template-columns:104px minmax(0,1fr); gap:14px; font-size:14.5px; margin:0}
@media (max-width:520px){ .tramo{grid-template-columns:minmax(0,1fr); gap:3px} }
.tramo dt{color:var(--texto-3); font-size:12px; letter-spacing:.09em; text-transform:uppercase; padding-top:3px}
.tramo dd{margin:0; color:var(--texto-2)}
.tramo.resultado dd{color:var(--texto)}

/* ---------- clips de obra ---------- */
.clips{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.clip{margin:0}
.clip-marco{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--borde);
            background:var(--panel); aspect-ratio:9/16}
.clip-marco video{width:100%; height:100%; object-fit:cover}
.clip-etq{position:absolute; top:12px; left:12px; background:color-mix(in srgb, var(--fondo) 80%, transparent);
          border:1px solid var(--borde-2); border-radius:99px; padding:4px 11px; font-size:11px; color:var(--texto-2)}
.clip figcaption{margin-top:12px}
.clip figcaption b{display:block; font-size:15px; font-weight:500}
.clip figcaption span{color:var(--texto-3); font-size:13.5px}

/* ---------- catálogo ---------- */
.filtros{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px}
.filtro{
  font:inherit; font-size:13px; font-weight:500; color:var(--texto-2); background:none;
  border:1px solid var(--borde); border-radius:99px; padding:8px 16px; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.filtro:hover{border-color:var(--borde-2); color:var(--texto)}
.filtro[aria-pressed="true"]{background:var(--texto); border-color:var(--texto); color:var(--fondo)}

.prods{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px}
.prod{
  display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--r);
  transition:border-color .2s, transform .2s;
}
.prod:hover{border-color:var(--borde-2); transform:translateY(-2px)}
.prod[hidden]{display:none}
.prod-fig{
  position:relative; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(100% 90% at 50% 15%, #16203200 0%, var(--fondo-2) 100%);
  border-bottom:1px solid var(--borde);
}
/* la foto se encaja por posición, no por tamaño propio: si no, una imagen
   de 900 px estira la tarjeta y rompe la fila entera */
.prod-fig img{position:absolute; inset:22px; width:calc(100% - 44px); height:calc(100% - 44px);
              object-fit:contain}
.prod-fig svg{width:56px; height:56px; stroke:var(--texto-3); fill:none; stroke-width:1.1;
              stroke-linecap:round; stroke-linejoin:round}
.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500;
  border:1px solid var(--borde-2); border-radius:99px; padding:4px 10px; color:var(--texto-2);
}
.chip-ok{border-color:rgba(74,222,128,.35); color:var(--ok)}
.chip-encargo{border-color:rgba(233,162,59,.35); color:var(--aviso)}
.prod-estado{position:absolute; top:12px; right:12px;
             background:color-mix(in srgb, var(--fondo) 80%, transparent)}
.prod-sku{position:absolute; top:14px; left:14px; font-family:'Plex Mono',monospace;
          font-size:10.5px; color:var(--texto-3); letter-spacing:.05em}
.prod-cuerpo{padding:20px; display:flex; flex-direction:column; gap:8px; flex:1}
.prod-cuerpo h3{font-size:17px}
.prod-cuerpo p{color:var(--texto-2); font-size:14px; flex:1}
.prod-pie{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
          padding-top:14px; border-top:1px solid var(--borde); margin-top:4px}
.precio b{font-family:'Plex Mono',monospace; font-size:15px; font-weight:400; display:block}
.precio span{font-size:11.5px; color:var(--texto-3)}
.ver{font-size:13px; color:var(--marca-claro)}

/* ---------- ficha de producto ---------- */
.ficha{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:38px; align-items:start}
@media (max-width:900px){ .ficha{grid-template-columns:minmax(0,1fr); gap:24px} }
.ficha-fig{
  position:relative; border:1px solid var(--borde); border-radius:var(--r); aspect-ratio:1;
  display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(100% 90% at 50% 12%, #16203200 0%, var(--fondo-2) 100%);
}
.ficha-fig img{position:absolute; inset:36px; width:calc(100% - 72px); height:calc(100% - 72px);
               object-fit:contain}
.ficha-fig svg{width:96px; height:96px; stroke:var(--texto-3); fill:none; stroke-width:.9;
               stroke-linecap:round; stroke-linejoin:round}
.miniaturas{display:flex; gap:10px; margin-top:12px}
.miniatura{
  width:64px; height:64px; border:1px solid var(--borde); border-radius:8px; padding:7px;
  background:var(--fondo-2); cursor:pointer; display:grid; place-items:center;
}
.miniatura[aria-pressed="true"]{border-color:var(--marca)}
.miniatura img{max-width:100%; max-height:100%; object-fit:contain}

.ficha-precio{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
              padding-block:18px; margin-block:20px; border-block:1px solid var(--borde)}
.ficha-precio b{font-family:'Plex Mono',monospace; font-size:26px; font-weight:400; letter-spacing:-.01em}
.ficha-precio span{color:var(--texto-3); font-size:13px}

.lista-check{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.lista-check li{display:flex; gap:11px; font-size:15px; color:var(--texto-2)}
.lista-check li::before{
  content:""; flex:none; width:16px; height:16px; margin-top:4px; border-radius:50%;
  border:1px solid var(--marca); background:
    radial-gradient(circle at 50% 50%, var(--marca) 0 3px, transparent 3px);
}

.specs{width:100%; border-collapse:collapse; margin-top:10px; font-size:14.5px}
.specs th, .specs td{text-align:left; padding:11px 0; border-bottom:1px solid var(--borde); vertical-align:top}
.specs th{color:var(--texto-3); font-weight:400; width:44%}
.specs td{color:var(--texto-2)}

.ecos-linea{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.eco-chip{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--borde);
          border-radius:99px; padding:6px 13px; font-size:13px; color:var(--texto-2)}
.eco-chip i{width:7px; height:7px; border-radius:50%; display:block}

/* ---------- tecnología ---------- */
.marcas{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.marcas span{border:1px solid var(--borde); border-radius:99px; padding:7px 15px;
             font-size:13px; color:var(--texto-2)}
.ecos{display:flex; flex-wrap:wrap; gap:22px; margin-top:26px}
.eco{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--texto-2)}
.eco i{width:8px; height:8px; border-radius:50%; display:block}

/* ---------- preguntas ---------- */
.faq{border-top:1px solid var(--borde)}
.faq details{border-bottom:1px solid var(--borde)}
.faq summary{
  cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative;
  font-size:17px; font-weight:500; color:var(--texto);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:27px; width:11px; height:11px;
  border-right:1.5px solid var(--texto-3); border-bottom:1.5px solid var(--texto-3);
  transform:rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(225deg); top:31px}
.faq .resp{padding:0 40px 22px 0; color:var(--texto-2); font-size:15.5px; max-width:70ch}

/* ---------- cierre ---------- */
.cierre{border:0; border-bottom:1px solid var(--borde); border-radius:0; padding:clamp(42px,6vw,72px) 0;
  background:transparent; text-align:left}
.cierre h2{margin-bottom:14px}
.cierre .bajada{margin-bottom:26px}
.cierre-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-start}
.contacto-lin{display:flex; flex-wrap:wrap; gap:10px 30px; justify-content:flex-start; margin-top:28px;
              padding-top:22px; border-top:1px solid var(--borde); font-size:14px; color:var(--texto-2)}
.contacto-lin a{text-decoration:none; border-bottom:1px solid var(--borde-2); padding-bottom:1px}
.contacto-lin a:hover{border-color:var(--marca-claro)}

/* ---------- formulario ---------- */
.forma{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:640px){ .forma{grid-template-columns:minmax(0,1fr)} }
.campo{display:flex; flex-direction:column; gap:7px}
.campo.ancho{grid-column:1/-1}
.campo label{font-size:13px; color:var(--texto-2)}
.campo input, .campo textarea, .campo select{
  font:inherit; font-size:15px; color:var(--texto); background:var(--panel);
  border:1px solid var(--borde); border-radius:8px; padding:12px 14px; width:100%;
}
.campo textarea{min-height:130px; resize:vertical}
.campo input:focus, .campo textarea:focus, .campo select:focus{
  outline:none; border-color:var(--marca);
}
.forma-pie{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:14px; align-items:center;
           justify-content:space-between}
.forma-pie small{color:var(--texto-3); font-size:12.5px; max-width:44ch}

/* ---------- vías de contacto ---------- */
.vias{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px;
      background:var(--borde); border:1px solid var(--borde); border-radius:var(--r); overflow:hidden}
.via{background:var(--fondo); padding:24px 22px; text-decoration:none; display:flex;
     flex-direction:column; gap:6px; transition:background .2s}
.via:hover{background:var(--panel)}
.via b{font-size:15px; font-weight:500}
.via span{color:var(--texto-2); font-size:14px}
.via em{font-style:normal; color:var(--texto-3); font-size:12.5px; margin-top:4px}

/* ---------- videos de obra: sonido y tiras por proyecto ---------- */
.clip-marco video{cursor:pointer; display:block}
.clip-sonido{position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:7px;
             min-height:44px; padding:0 14px 0 11px; border-radius:99px; cursor:pointer;
             background:color-mix(in srgb, var(--fondo) 78%, transparent); color:var(--texto);
             border:1px solid var(--borde-2); font:500 13px/1 'Archivo',system-ui,sans-serif;
             backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.clip-sonido svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
                 stroke-linecap:round; stroke-linejoin:round}
.clip-sonido .ico-sonido{display:none}
.clip-sonido[aria-pressed="true"]{background:var(--marca-claro); color:var(--fondo); border-color:transparent}
.clip-sonido[aria-pressed="true"] .ico-sonido{display:block}
.clip-sonido[aria-pressed="true"] .ico-mudo{display:none}
.clip-sonido:focus-visible{outline:2px solid var(--marca-claro); outline-offset:3px}

/* en proyectos: una tira de videos debajo del texto; en celular se desliza de costado */
.proy-videos{grid-column:1 / -1; display:grid; grid-auto-flow:column;
             grid-auto-columns:minmax(210px, 250px); gap:16px; overflow-x:auto;
             scroll-snap-type:x mandatory; padding-bottom:6px; overscroll-behavior-x:contain}
.proy-videos .clip{scroll-snap-align:start}
@media (max-width:520px){ .proy-videos{grid-auto-columns:66vw} }

/* proyectos: una línea de qué se hizo y la lista corta */
.proy-resumen{color:var(--texto); font-size:16px; line-height:1.6; max-width:62ch}
.proy-items{gap:7px}
.proy-videos .clip figcaption span{display:none}

/* en la ficha de producto */
.ficha-video{margin-top:26px; max-width:300px}
.ficha-video h3{font-size:15px; margin-bottom:12px; color:var(--texto-2); font-weight:500}