/* ============================================================
   MELLOS PTY
   ============================================================ */
:root{
  --papel:#F3F7F8;
  --pizarra:#2A3B42;
  --gris:#5C757F;
  --tenue:#7B929D;
  --cavidad:#16232A;
  --aire:#7FC6DC;
  --ambar:#E8A33D;
  --wa:#1FA855;
  --linea:rgba(42,59,66,.16);
  --borde:rgba(42,59,66,.10);

  --intensidad:0;
  --velocidad:2.2s;
  --apertura:0deg;
  --tono:#DDE9EE;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  margin:0;background:var(--papel);color:var(--pizarra);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.65;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.contenedor{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.eyebrow{
  font-family:'Chivo Mono',monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tenue);margin:0 0 8px;
}
h1,h2,h3{letter-spacing:-.02em;margin:0 0 14px}
h1{font-size:clamp(30px,5.2vw,52px);font-weight:700;line-height:1.08}
h2{font-size:clamp(24px,3.6vw,36px);font-weight:600}
h3{font-size:18px;font-weight:600}
.bajada{color:var(--gris);max-width:52ch;margin:0}

/* ============================================================
   CABECERA
   ============================================================ */
.cabecera{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:clamp(16px,3vw,32px);
  padding:16px clamp(18px,4vw,40px);
  background:rgba(243,247,248,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borde);
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--pizarra)}
.logo svg{width:26px;height:26px;flex:none}
.logo span{font-size:15px;font-weight:700;letter-spacing:.26em;text-transform:uppercase}
.logo span i{font-style:normal;font-weight:400;color:var(--tenue);margin-left:.26em}

.menu{display:flex;gap:clamp(14px,2.2vw,28px);margin-left:auto}
.menu a{
  font-size:14px;color:var(--gris);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.menu a:hover{color:var(--pizarra);border-color:var(--pizarra)}
.menu .solo-movil{display:none}

.llamada{display:flex;align-items:center;gap:16px}
.boton-fantasma{
  font-family:'Chivo Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 20px;border-radius:999px;text-decoration:none;
  border:1px solid var(--linea);background:rgba(255,255,255,.6);
  transition:background .2s,border-color .2s;
}
.boton-fantasma:hover{background:#fff;border-color:var(--pizarra)}
.tel{font-family:'Chivo Mono',monospace;font-size:13px;white-space:nowrap;text-decoration:none}

.conmutador-menu,.hamburguesa{display:none}
.hamburguesa{width:26px;height:20px;position:relative;cursor:pointer;margin-left:auto}
.hamburguesa span{
  position:absolute;left:0;right:0;height:2px;background:var(--pizarra);border-radius:2px;
  transition:transform .25s,opacity .25s;
}
.hamburguesa span:nth-child(1){top:0}
.hamburguesa span:nth-child(2){top:9px}
.hamburguesa span:nth-child(3){top:18px}

@media (max-width:900px){
  .hamburguesa{display:block}
  .menu{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;margin:0;
    background:var(--papel);border-bottom:1px solid var(--borde);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .menu a{padding:15px clamp(18px,4vw,40px);border-bottom:1px solid var(--borde)}
  .menu .solo-movil{display:block;color:var(--wa)}
  .conmutador-menu:checked ~ .menu{max-height:320px}
  .conmutador-menu:checked ~ .hamburguesa span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .conmutador-menu:checked ~ .hamburguesa span:nth-child(2){opacity:0}
  .conmutador-menu:checked ~ .hamburguesa span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
  .llamada .boton-fantasma{display:none}
  .llamada{position:absolute;right:clamp(18px,4vw,40px);top:18px}
}
@media (max-width:520px){ .llamada{display:none} }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;isolation:isolate;
  min-height:min(94vh,940px);
  display:flex;flex-direction:column;
  /* el equipo arranca arriba y el titular se va al fondo con
     margin-top:auto: antes todo quedaba centrado y el equipo
     bajaba demasiado */
  justify-content:flex-start;
  gap:0;
  padding:clamp(22px,3.4vw,40px) clamp(18px,4vw,40px) clamp(30px,4vw,48px);
  background:var(--tono);
  transition:background 700ms ease;
}

.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(115% 80% at 50% -10%, rgba(255,255,255,.9), transparent 62%);
}
/* Con foto de fondo el velo va en diagonal: aclara la columna del texto
   y deja respirar la imagen del lado derecho. */
/* Dos velos superpuestos: uno en diagonal que abre la imagen hacia la
   derecha, y otro que sube desde abajo-izquierda, donde quedó el texto. */
.hero.con-foto::before{
  background:
    linear-gradient(to top,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.55) 26%,
      rgba(255,255,255,.12) 52%,
      rgba(255,255,255,0) 70%),
    linear-gradient(96deg,
      rgba(255,255,255,.82) 0%,
      rgba(255,255,255,.5) 30%,
      rgba(255,255,255,.14) 58%,
      rgba(255,255,255,0) 82%);
}
/* en móvil el texto va arriba, así que el velo baja de arriba a abajo */
@media (max-width:760px){
  /* en móvil el equipo va arriba y el texto abajo: el velo se invierte */
  .hero.con-foto::before{
    background:linear-gradient(to top,
      rgba(255,255,255,.93) 0%,
      rgba(255,255,255,.78) 38%,
      rgba(255,255,255,.42) 66%,
      rgba(255,255,255,.28) 100%);
  }
}
/* el equipo necesita separarse más de una foto que de un fondo plano */
.hero.con-foto .equipo{
  box-shadow:0 1px 0 #fff inset,
             0 -14px 24px -18px rgba(22,35,42,.35) inset,
             0 30px 60px -20px rgba(22,35,42,.6);
}
.hero.con-foto .pie-escena b{text-shadow:0 1px 0 rgba(255,255,255,.7)}
.fondo{position:absolute;inset:0;z-index:0;overflow:hidden}
.escenario{
  position:absolute;inset:0;
  opacity:0;transform:translateY(14px) scale(1.03);
  transition:opacity 700ms ease,transform 900ms cubic-bezier(.22,1,.3,1);
}
.escenario.activa{opacity:1;transform:none}
.escenario svg{position:absolute;left:0;bottom:0;width:100%;height:74%}
.escenario svg *{
  fill:none;stroke:var(--linea);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.escenario svg .relleno{fill:rgba(42,59,66,.05);stroke:none}
.escenario img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  /* la foto se ve entera: antes iba a .55 y con el velo blanco de arriba
     quedaba casi invisible */
  opacity:1;
}

/* En escritorio el lienzo es transparente: no crea contexto de
   posicionamiento, así que el fondo y el dock se siguen anclando al
   hero como antes. En móvil pasa a ser la imagen con su proporción. */
.hero-lienzo{position:static;display:block}
/* empuja el titular al fondo del hero y deja el equipo arriba */
.hero > .hero-texto{margin-top:auto}

.hero-texto{
  position:relative;z-index:3;
  width:100%;max-width:1180px;margin:0 auto;
}
.hero-texto h1{max-width:20ch}
.hero-texto .bajada{max-width:44ch}

/* El equipo va arriba, donde estaría montado en la pared de verdad.
   El padding inferior es el aire que necesita el flujo para caer. */
.escena{
  position:relative;z-index:3;
  perspective:900px;perspective-origin:50% 30%;
  /* el relleno inferior es el carril del aire: mantiene las
     corrientes dentro de la escena y lejos del titular */
  padding:0 0 clamp(104px,13vw,158px);
  flex:none;
}
.equipo{
  position:relative;margin:0 auto;
  /* alto común a los dos tipos y ancho variable: así el cambio de
     equipo se puede animar sin que salte la altura */
  width:var(--ancho-equipo,min(100%,480px));
  height:clamp(94px,12.4vw,132px);
  transition:width 700ms cubic-bezier(.22,1,.3,1),
             border-radius 500ms ease;
  border-radius:14px 14px 22px 22px;
  background:linear-gradient(#FFFFFF 0%,#FDFEFE 55%,#E4EDF1 100%);
  box-shadow:0 1px 0 #fff inset,
             0 -14px 24px -18px rgba(22,35,42,.35) inset,
             0 26px 50px -22px rgba(22,35,42,.45);
  z-index:2;
}
.rejilla{
  position:absolute;inset:14px 26px auto;height:34%;border-radius:6px;
  background:repeating-linear-gradient(to bottom,rgba(42,59,66,.09) 0 1px,transparent 1px 6px);
}
.marca{position:absolute;left:26px;bottom:26%;font-family:'Chivo Mono',monospace;
  font-size:10px;letter-spacing:.3em;color:#9CB0B9}
.led{position:absolute;right:26px;bottom:27%;width:7px;height:7px;border-radius:50%;
  background:#C4D3DA;transition:background .35s,box-shadow .35s}
.equipo[data-estado="encendido"] .led,
.equipo[data-estado="contando"] .led{
  background:var(--ambar);box-shadow:0 0 10px 2px rgba(232,163,61,.55);
}
.equipo[data-estado="contando"] .led{animation:latido .7s steps(2,end) infinite}
@keyframes latido{0%,49%{opacity:1}50%,100%{opacity:.25}}

.salida{position:absolute;left:5%;right:5%;bottom:10px;height:24px;border-radius:5px;
  background:linear-gradient(var(--cavidad),#0B1418);
  box-shadow:0 2px 6px rgba(0,0,0,.5) inset;overflow:hidden}
.salida::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 140% at 50% 100%, rgba(127,198,220,.5), transparent 70%);
  opacity:calc(var(--intensidad) * .9);transition:opacity .6s;
}
.aleta{
  position:absolute;left:5%;right:5%;bottom:10px;height:24px;border-radius:0 0 6px 6px;
  background:linear-gradient(#FFFFFF,#DCE7EC 70%,#B9CBD3);
  transform-origin:50% 0%;transform:rotateX(var(--apertura));
  transform-style:preserve-3d;
  box-shadow:0 4px 10px -4px rgba(22,35,42,.5);
  transition:transform 900ms cubic-bezier(.22,1.05,.3,1);
  will-change:transform;
}
.aleta::before{content:"";position:absolute;inset:auto 0 0;height:2px;
  background:rgba(255,255,255,.85);border-radius:2px}

.aire{position:absolute;inset:0;pointer-events:none;z-index:1}
.penacho{
  position:absolute;top:56%;left:50%;width:62%;height:250px;transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 0%, rgba(127,198,220,.55), rgba(127,198,220,0) 72%);
  filter:blur(14px);opacity:calc(var(--intensidad) * .8);transition:opacity .8s;
  animation:respirar 4.5s ease-in-out infinite;
}
@keyframes respirar{
  0%,100%{transform:translateX(-50%) scaleY(1)}
  50%{transform:translateX(-50%) scaleY(1.12)}
}
.corrientes{position:absolute;top:52%;left:50%;width:min(96%,600px);height:220px;
  transform:translateX(-50%);overflow:visible}
.corrientes path{
  fill:none;stroke:var(--aire);stroke-linecap:round;stroke-dasharray:16 84;opacity:0;
  animation:fluir var(--velocidad) linear infinite;
}
@keyframes fluir{
  0%{stroke-dashoffset:100;opacity:0}
  18%{opacity:calc(var(--intensidad) * .9)}
  70%{opacity:calc(var(--intensidad) * .55)}
  100%{stroke-dashoffset:-16;opacity:0}
}
.mota{
  position:absolute;top:56%;width:4px;height:4px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px 1px rgba(127,198,220,.9);opacity:0;
  animation:deriva var(--velocidad) linear infinite;
}
@keyframes deriva{
  0%{transform:translate3d(0,0,0) scale(.6);opacity:0}
  15%{opacity:calc(var(--intensidad) * .8)}
  100%{transform:translate3d(var(--dx),160px,0) scale(1.3);opacity:0}
}
.conteo{
  position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);
  font-family:'Chivo Mono',monospace;font-size:56px;font-weight:300;
  opacity:0;pointer-events:none;z-index:3;
}
.conteo.tic{animation:tic .95s ease-out}
@keyframes tic{
  0%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
  25%{opacity:.9;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}
}


.dial{
  position:relative;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(60% 60% at 35% 25%, #fff, #E3EDF1 60%, #C6D6DE 100%);
  box-shadow:0 1px 2px #fff inset,0 12px 24px -12px rgba(22,35,42,.5),
             0 0 0 8px rgba(255,255,255,.5);
  cursor:grab;touch-action:none;
}
.dial:active{cursor:grabbing}
.dial:focus-visible{outline:3px solid var(--ambar);outline-offset:6px}
.aguja{
  position:absolute;left:50%;top:50%;width:3px;height:44px;border-radius:2px;
  background:linear-gradient(var(--pizarra),#6E8792);
  transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(0deg);
  transition:transform 420ms cubic-bezier(.3,1.4,.4,1);
}
.marcas{
  position:absolute;inset:-30px;
  font-family:'Chivo Mono',monospace;
  font-size:10px;letter-spacing:.08em;
  /* más contraste: a 9 px y en gris claro no se leían sobre la foto */
  color:var(--gris);font-weight:500;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}
.marcas span{position:absolute;white-space:nowrap;transform:translate(-50%,-50%);
  transition:color .3s,font-weight .3s}
.marcas span[aria-current="true"]{color:var(--pizarra);font-weight:700}

/* ---------- anillo de progreso del slideshow ---------- */
.anillo{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);
  transform:rotate(-90deg);pointer-events:none}
.anillo circle{fill:none;stroke-linecap:round}
.anillo-pista{stroke:rgba(42,59,66,.08);stroke-width:2}
.anillo-avance{
  stroke:var(--aire);stroke-width:2.5;
  stroke-dasharray:100;stroke-dashoffset:100;opacity:0;
  transition:opacity .4s;
}
.dial.auto .anillo-avance{
  opacity:1;
  animation:avanzar var(--paso,5000ms) linear infinite;
}
@keyframes avanzar{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* ---------- botón físico de encendido ---------- */
.poder{display:flex;flex-direction:column;align-items:center;gap:9px}
.fila-controles{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bisel{
  display:block;padding:7px;border-radius:50%;
  background:linear-gradient(160deg,#D2E0E6,#EEF4F6);
  box-shadow:inset 0 3px 7px rgba(22,35,42,.3),
             inset 0 -1px 0 rgba(255,255,255,.9),
             0 1px 0 rgba(255,255,255,.7);
}
.boton-poder{
  display:grid;place-items:center;
  width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:linear-gradient(#FEFEFE,#E8F0F3 62%,#CDDBE1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -4px 7px rgba(22,35,42,.13),
    0 3px 0 #AFC3CC,
    0 10px 18px -7px rgba(22,35,42,.5);
  transition:transform 90ms ease, box-shadow 90ms ease, background 300ms;
}
.boton-poder:hover{background:linear-gradient(#fff,#EDF3F6 62%,#D2DFE5)}
.boton-poder:focus-visible{outline:3px solid var(--ambar);outline-offset:6px}

/* el hundido real: baja y pierde el zócalo */
.boton-poder:active{
  transform:translateY(3px);
  box-shadow:
    inset 0 2px 5px rgba(22,35,42,.28),
    0 0 0 #AFC3CC,
    0 4px 8px -5px rgba(22,35,42,.5);
}
/* encendido: queda medio hundido y el símbolo se ilumina */
.boton-poder[aria-pressed="true"]{
  transform:translateY(2px);
  background:linear-gradient(#F6FAFB,#DEE9ED 62%,#C4D4DB);
  box-shadow:
    inset 0 2px 5px rgba(22,35,42,.22),
    0 1px 0 #AFC3CC,
    0 6px 12px -7px rgba(22,35,42,.45);
}
.ico-poder{
  width:24px;height:24px;fill:none;
  stroke:#8DA2AA;stroke-width:2.2;stroke-linecap:round;
  transition:stroke 400ms, filter 400ms;
}
.boton-poder[aria-pressed="true"] .ico-poder{
  stroke:var(--ambar);
  filter:drop-shadow(0 0 6px rgba(232,163,61,.75));
}
.boton-poder:disabled{cursor:wait}
.poder-rotulo{
  font-family:'Chivo Mono',monospace;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tenue);
  /* Encender / Arrancando / Encendido / Apagando tienen anchos
     distintos: se reserva el sitio del más largo */
  min-width:11ch;text-align:center;
}

/* ---------- interruptor de sonido ---------- */
.boton-sonido{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:'Chivo Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:11px 18px;border-radius:999px;
  border:1px solid var(--linea);background:rgba(255,255,255,.6);
  color:var(--tenue);
  transition:background .25s,border-color .25s,color .25s;
}
.boton-sonido:hover{background:#fff;border-color:var(--pizarra);color:var(--pizarra)}
.boton-sonido:focus-visible{outline:3px solid var(--ambar);outline-offset:3px}
.boton-sonido[aria-pressed="true"]{
  background:rgba(127,198,220,.18);
  border-color:rgba(127,198,220,.7);
  color:#2A3B42;
}
.ico-audio{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ico-audio .bocina{fill:currentColor;stroke:none}
.ico-audio .onda{opacity:0;transition:opacity .3s}
.ico-audio .tache{opacity:1;transition:opacity .3s}
.boton-sonido[aria-pressed="true"] .onda{opacity:1}
.boton-sonido[aria-pressed="true"] .onda-2{animation:onda 2.6s ease-in-out infinite}
.boton-sonido[aria-pressed="true"] .onda-1{animation:onda 2.6s ease-in-out .35s infinite}
.boton-sonido[aria-pressed="true"] .tache{opacity:0}
@keyframes onda{0%,100%{opacity:.35}50%{opacity:1}}

/* invitación discreta la primera vez que enciendan el equipo */
.boton-sonido.sugerir{animation:latir-sonido 2.2s ease-in-out 3}
@keyframes latir-sonido{
  0%,100%{box-shadow:0 0 0 0 rgba(127,198,220,0)}
  50%{box-shadow:0 0 0 7px rgba(127,198,220,.28)}
}
.lectura{
  font-family:'Chivo Mono',monospace;font-size:11.5px;color:var(--gris);
  letter-spacing:.08em;margin:0;
  min-height:2.6em;              /* dos líneas reservadas */
  font-variant-numeric:tabular-nums;
}
.lectura b{
  color:var(--pizarra);font-weight:600;
  display:inline-block;min-width:7ch;   /* «45%» y «reposo» ocupan lo mismo */
}
.lectura b:first-of-type{min-width:0}

/* Antes flotaba pegado abajo a la izquierda, lejos de la perilla que lo
   controla. Ahora vive junto a ella, que es lo que describe. */
.pie-escena{
  /* rótulo del ambiente: va dentro de los controles, junto a la
     perilla, porque describe lo que la perilla acaba de elegir */
  margin:0;line-height:1.4;
  font-family:'Chivo Mono',monospace;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tenue);
}
.pie-escena b{
  display:block;font-family:'Archivo',sans-serif;
  font-size:clamp(17px,2.2vw,22px);font-weight:600;letter-spacing:-.01em;
  text-transform:none;color:var(--pizarra);margin-top:2px;
}


/* ============================================================
   SECCIONES
   ============================================================ */
.seccion{padding:clamp(56px,9vw,104px) 0}
.seccion-clara{background:#fff;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.titular{margin-bottom:36px}
.pagina-interna .seccion{padding-top:44px}

.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.filtros a{
  font-family:'Chivo Mono',monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  padding:9px 17px;border-radius:999px;
  border:1px solid var(--linea);color:var(--gris);
  transition:background .2s,color .2s,border-color .2s;
}
.filtros a:hover{border-color:var(--pizarra);color:var(--pizarra)}
.filtros a.activo{background:var(--pizarra);border-color:var(--pizarra);color:var(--papel)}

.rejilla-productos{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
}
.ficha{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--borde);border-radius:14px;overflow:hidden;
  transition:transform .25s,box-shadow .25s;
}
.ficha:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(22,35,42,.4)}
.ficha-foto{
  position:relative;display:grid;place-items:center;
  aspect-ratio:1/1;overflow:hidden;
  background:#fff;
  border-bottom:1px solid var(--borde);
}
/* contain, no cover: la foto del equipo nunca se recorta, sin importar
   si viene cuadrada, vertical o con la unidad exterior incluida */
.ficha-foto img{
  width:100%;height:100%;
  object-fit:contain;
  padding:12px;
}
.sin-foto{font-family:'Chivo Mono',monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:#A8BCC4}
.etiqueta,.cuenta-fotos{
  position:absolute;top:12px;
  font-family:'Chivo Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
}
.etiqueta{left:12px;background:var(--ambar);color:#2A1D06}
.cuenta-fotos{right:12px;background:rgba(22,35,42,.72);color:#fff}

.ficha-cuerpo{padding:18px;display:flex;flex-direction:column;flex:1;gap:6px}
.ficha-cat{font-family:'Chivo Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);margin:0}
.ficha-cuerpo h3{margin:0;font-size:17px;line-height:1.3}
.ficha-cuerpo h3 a{text-decoration:none}
.ficha-cuerpo h3 a:hover{color:#0F1B20}
.ficha-ref{font-family:'Chivo Mono',monospace;font-size:11px;color:var(--tenue);margin:0}
.ficha-resumen{font-size:14px;color:var(--gris);margin:2px 0 0}
.ficha-pie{
  margin-top:auto;padding-top:14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--borde);
}
/* «Precio a consultar» se partía en dos líneas y descuadraba la tarjeta */
.precio{
  font-family:'Chivo Mono',monospace;font-size:12.5px;font-weight:600;margin:0;
  line-height:1.35;
}
.precio.consulta{
  font-family:'Archivo',sans-serif;font-size:13px;font-weight:400;
  color:var(--tenue);
}
.ficha-pie{align-items:flex-end}
.vacio{color:var(--gris);padding:30px 0}

.boton-wa{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Chivo Mono',monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:11px 16px;border-radius:999px;
  background:var(--wa);color:#fff;white-space:nowrap;
  transition:background .2s,transform .1s;
}
.boton-wa:hover{background:#178C46}
.boton-wa:active{transform:translateY(1px)}
.boton-wa.grande{padding:15px 26px;font-size:12px}
.ico-wa{width:16px;height:16px;fill:currentColor;flex:none}

.dos-columnas{display:grid;gap:clamp(30px,6vw,72px);grid-template-columns:1.35fr .65fr;align-items:start}
.dos-columnas p{color:var(--gris)}
.datos{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.datos li{border-top:1px solid var(--linea);padding-top:14px}
.datos b{display:block;font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1}
.datos span{font-size:14px;color:var(--gris)}
@media (max-width:820px){ .dos-columnas{grid-template-columns:1fr} }

/* ============================================================
   FICHA DE PRODUCTO
   ============================================================ */
.miga{font-family:'Chivo Mono',monospace;font-size:11px;color:var(--tenue);margin-bottom:26px}
.miga a{text-decoration:none}
.miga a:hover{color:var(--pizarra)}
.miga span{margin:0 6px}

.detalle{display:grid;gap:clamp(28px,5vw,56px);grid-template-columns:1.05fr .95fr;align-items:start}
@media (max-width:860px){ .detalle{grid-template-columns:1fr} }

.galeria-grande{
  aspect-ratio:1/1;border-radius:16px;overflow:hidden;
  background:#fff;
  display:grid;place-items:center;border:1px solid var(--borde);
}
.galeria-grande img{
  width:100%;height:100%;
  object-fit:contain;
  padding:clamp(16px,3vw,34px);
}
.galeria-tiras{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.tira{
  flex:none;width:84px;aspect-ratio:1;padding:0;overflow:hidden;cursor:pointer;
  border:2px solid transparent;border-radius:10px;background:#fff;
  transition:border-color .2s,opacity .2s;opacity:.7;
}
.tira img{width:100%;height:100%;object-fit:contain;padding:5px;background:#fff}
.tira:hover{opacity:1}
.tira.activa{border-color:var(--pizarra);opacity:1}

.detalle-datos h1{font-size:clamp(26px,4vw,40px)}
.ref-grande{font-family:'Chivo Mono',monospace;font-size:12px;color:var(--tenue);margin:0 0 18px}
.precio-grande{font-family:'Chivo Mono',monospace;font-size:clamp(22px,3vw,30px);
  font-weight:600;margin:0 0 18px}
.precio-grande .consultar{font-size:16px;font-weight:400;color:var(--gris)}
.lead{color:var(--gris);margin:0 0 24px}

.pedido{
  background:#fff;border:1px solid var(--borde);border-radius:14px;
  padding:22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;
}
.pedido label{font-family:'Chivo Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}
.contador{display:flex;align-items:center;border:1px solid var(--linea);border-radius:999px;overflow:hidden}
.contador button{
  width:40px;height:44px;border:0;background:transparent;cursor:pointer;
  font-size:18px;color:var(--pizarra);
}
.contador button:hover{background:#EEF4F6}
.contador input{
  width:52px;height:44px;border:0;text-align:center;
  font-family:'Chivo Mono',monospace;font-size:15px;color:var(--pizarra);
  -moz-appearance:textfield;
}
.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.nota-pedido{flex-basis:100%;font-size:13px;color:var(--tenue);margin:0}

.descripcion{margin-top:34px}
.descripcion h2{font-size:19px}
.descripcion p{color:var(--gris)}
.relacionados{margin-top:clamp(50px,8vw,86px)}
.relacionados h2{font-size:22px;margin-bottom:24px}

/* ============================================================
   FOOTER
   ============================================================ */
.pie{background:var(--cavidad);color:#C7D6DC;padding:clamp(48px,7vw,76px) 0 0;margin-top:0}
.pie-rejilla{display:grid;gap:clamp(28px,5vw,56px);grid-template-columns:1.5fr .75fr 1fr}
@media (max-width:820px){ .pie-rejilla{grid-template-columns:1fr 1fr} .pie-marca{grid-column:1/-1} }
@media (max-width:520px){ .pie-rejilla{grid-template-columns:1fr} }
.logo-claro{color:#fff}
.logo-claro span i{color:#7E97A1}
.pie-marca p{max-width:38ch;color:#93A9B2;margin:16px 0 22px}
.pie h3{font-size:12px;font-family:'Chivo Mono',monospace;letter-spacing:.18em;
  text-transform:uppercase;color:#7E97A1;margin-bottom:16px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px}
.pie ul a{text-decoration:none;color:#C7D6DC;transition:color .2s}
.pie ul a:hover{color:#fff}
.lista-contacto .horario{color:#7E97A1;font-size:13px;line-height:1.5}
.redes{display:flex;gap:16px;margin-top:18px;font-size:13px}
.redes a{color:#93A9B2;text-decoration:none}
.redes a:hover{color:#fff}
.pie-legal{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  margin-top:clamp(38px,6vw,60px);padding-top:20px;padding-bottom:26px;
  border-top:1px solid rgba(199,214,220,.14);
  font-family:'Chivo Mono',monospace;font-size:11px;color:#6E8792;
}
.pie-legal p{margin:0}
.pie-legal a{text-decoration:none}
.pie-legal a:hover{color:#C7D6DC}

.wa-flotante{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--wa);color:#fff;
  box-shadow:0 12px 26px -10px rgba(31,168,85,.7);
  transition:transform .2s;
}
.wa-flotante:hover{transform:scale(1.06)}
.wa-flotante .ico-wa{width:27px;height:27px}

/* ============================================================
   TARJETA DE SERVICIO
   ============================================================ */
.franja-servicio{padding:clamp(40px,7vw,80px) 0}
.tarjeta-servicio{
  position:relative;overflow:hidden;
  border-radius:22px;
  background:linear-gradient(105deg,#1B2A31 0%,#26363D 52%,#2A3B42 100%);
  color:#E6EFF2;
  display:grid;grid-template-columns:1.02fr .98fr;
  min-height:340px;
}
.servicio-texto{
  padding:clamp(28px,4.4vw,54px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  position:relative;z-index:2;
}
.servicio-pregunta{
  font-size:clamp(17px,2.2vw,22px);font-weight:400;color:#9FBAC4;margin:0;
}
.servicio-titulo{
  font-size:clamp(28px,4.4vw,46px);font-weight:700;letter-spacing:-.025em;
  line-height:1.05;color:#fff;margin:2px 0 18px;
}
.servicio-lista{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px}
.servicio-lista li{display:flex;align-items:center;gap:11px;font-size:15px;color:#C9DBE2}
.servicio-lista svg{
  width:17px;height:17px;flex:none;fill:none;
  stroke:var(--aire);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.servicio-botones{display:flex;flex-wrap:wrap;gap:12px}
.pastilla-cta{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 24px;border-radius:999px;text-decoration:none;
  font-size:14px;font-weight:500;white-space:nowrap;
  transition:background .2s,transform .1s,border-color .2s;
}
.pastilla-cta svg{
  width:17px;height:17px;flex:none;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.pastilla-cta.solida{background:#fff;color:#1B2A31}
.pastilla-cta.solida svg{stroke:#1B7F9E}
.pastilla-cta.solida:hover{background:#EAF4F7}
.pastilla-cta.hueca{
  background:transparent;color:#E6EFF2;
  border:1px solid rgba(230,239,242,.42);
}
.pastilla-cta.hueca svg{stroke:var(--aire)}
.pastilla-cta.hueca:hover{border-color:#E6EFF2;background:rgba(230,239,242,.08)}
.pastilla-cta:active{transform:translateY(1px)}
.pastilla-cta:focus-visible{outline:3px solid var(--ambar);outline-offset:3px}

.servicio-foto{position:relative;overflow:hidden}
.servicio-foto img{width:100%;height:100%;object-fit:cover;object-position:center}
/* el degradado funde la foto con la tarjeta */
.servicio-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,#26363D 0%,rgba(38,54,61,.75) 26%,rgba(38,54,61,0) 62%);
}
.servicio-foto.sin-imagen{
  background:
    radial-gradient(70% 70% at 70% 30%, rgba(127,198,220,.22), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 12px);
  display:grid;place-items:center;
}
.servicio-foto.sin-imagen::after{display:none}
.servicio-foto.sin-imagen span{
  font-family:'Chivo Mono',monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:#6B8892;
}

@media (max-width:780px){
  .tarjeta-servicio{grid-template-columns:1fr;min-height:0}
  .servicio-foto{order:-1;aspect-ratio:16/10}
  .servicio-foto::after{
    background:linear-gradient(to top,#22323A 0%,rgba(34,50,58,.55) 45%,rgba(34,50,58,.1) 100%);
  }
  .servicio-botones .pastilla-cta{flex:1 1 100%;justify-content:center}
}

/* ============================================================
   FORMULARIO DE AGENDA
   ============================================================ */
.agenda{display:grid;gap:clamp(28px,5vw,60px);grid-template-columns:1.15fr .85fr;align-items:start}
@media (max-width:880px){ .agenda{grid-template-columns:1fr} }

.caja-agenda{
  background:#fff;border:1px solid var(--borde);border-radius:16px;
  padding:clamp(20px,3.4vw,32px);
}
.caja-agenda h2{font-size:20px;margin-top:6px}
.caja-agenda h2:first-child{margin-top:0}
.grupo{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-bottom:4px}
@media (max-width:620px){ .grupo{grid-template-columns:1fr} }
.grupo .todo{grid-column:1/-1}
.campo{display:block;font-size:13px;color:var(--gris);margin-bottom:14px}
.campo > span:first-child{display:block;margin-bottom:6px}
.campo .req{color:#B4402F;font-style:normal}
.pista{font-size:12px;color:var(--tenue);margin-top:5px}

.tipos{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:20px}
.tipo{
  position:relative;display:block;cursor:pointer;margin:0;
  border:1px solid var(--linea);border-radius:12px;padding:14px 16px;
  background:#fff;transition:border-color .2s,background .2s,box-shadow .2s;
}
.tipo input{position:absolute;opacity:0;pointer-events:none;width:0;height:0;margin:0}
.tipo b{display:block;font-size:14px;font-weight:600;margin-bottom:2px;color:var(--pizarra)}
.tipo em{font-style:normal;font-size:12px;color:var(--tenue);line-height:1.4}
.tipo:has(input:checked){
  border-color:var(--pizarra);background:#F5FAFB;
  box-shadow:inset 0 0 0 1px var(--pizarra);
}
.tipo:has(input:focus-visible){outline:3px solid var(--ambar);outline-offset:2px}

.franjas{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.franja{
  position:relative;text-align:center;cursor:pointer;margin:0;
  border:1px solid var(--linea);border-radius:10px;padding:13px 8px;
  font-family:'Chivo Mono',monospace;font-size:13px;background:#fff;
  color:var(--pizarra);
  transition:border-color .2s,background .2s,color .2s;
}
.franja input{position:absolute;opacity:0;pointer-events:none;width:0;height:0;margin:0}
.franja:has(input:checked){background:var(--pizarra);border-color:var(--pizarra);color:#fff}
.franja.llena{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.franja:has(input:focus-visible){outline:3px solid var(--ambar);outline-offset:2px}

.aparte{
  background:#F5FAFB;border:1px solid var(--borde);border-radius:16px;
  padding:clamp(20px,3vw,28px);
}
.aparte h3{font-size:15px}
.aparte ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px;font-size:14px;color:var(--gris)}
.aparte li{display:flex;gap:10px;align-items:flex-start}
.aparte li svg{width:16px;height:16px;flex:none;margin-top:3px;fill:none;
  stroke:var(--aire);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aparte .separador{border-top:1px solid var(--borde);margin:20px 0}

/* fuera de pantalla, pero no display:none: los bots lo llenan igual */
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.confirmacion{
  background:#fff;border:1px solid var(--borde);border-left:3px solid var(--wa);
  border-radius:16px;padding:clamp(24px,4vw,38px);max-width:660px;
}
.confirmacion h1{font-size:clamp(24px,3.4vw,32px)}
.resumen-cita{
  list-style:none;margin:22px 0;padding:0;display:grid;gap:0;
  border:1px solid var(--borde);border-radius:12px;overflow:hidden;
}
.resumen-cita li{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 16px;font-size:14px;border-bottom:1px solid var(--borde);
}
.resumen-cita li:last-child{border-bottom:0}
.resumen-cita span{color:var(--tenue)}
.resumen-cita b{font-weight:600;text-align:right}

/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aleta,.aguja,.escenario,.hero,.ficha,.boton-poder{transition-duration:1ms}
  .corrientes path,.mota,.penacho,.conteo.tic,.led,.anillo-avance{animation:none!important}
  .corrientes path,.mota{opacity:calc(var(--intensidad) * .55)}
  .anillo-avance{opacity:0}
  .carrusel-pista{scroll-behavior:auto}
}

/* ============================================================
   CARRUSEL DE PRODUCTOS
   Scroll nativo con snap: en móvil se desliza con el dedo sin
   una línea de JS. Las flechas solo empujan ese scroll.
   ============================================================ */
.carrusel{position:relative}
.carrusel-pista{
  display:flex;gap:20px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:4px 2px 18px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.carrusel-pista::-webkit-scrollbar{display:none}
.carrusel-pista:focus-visible{outline:3px solid var(--ambar);outline-offset:4px;border-radius:14px}
.carrusel-pista > .ficha{
  flex:0 0 clamp(255px,78vw,310px);
  scroll-snap-align:start;
}
/* filtrado sin recargar: la ficha sale del flujo, no solo se transparenta */
.ficha.oculta{display:none}
@media (min-width:700px){
  .carrusel-pista > .ficha{flex-basis:clamp(262px,31%,320px)}
}

.carrusel-flecha{
  position:absolute;top:38%;z-index:5;
  width:44px;height:44px;border-radius:50%;
  display:none;place-items:center;cursor:pointer;
  border:1px solid var(--borde);background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  box-shadow:0 8px 18px -10px rgba(22,35,42,.5);
  transition:background .2s,transform .1s,opacity .2s;
}
.carrusel-flecha svg{
  width:20px;height:20px;fill:none;stroke:var(--pizarra);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.carrusel-flecha:hover{background:#fff;transform:scale(1.06)}
.carrusel-flecha:active{transform:scale(.96)}
.carrusel-flecha:focus-visible{outline:3px solid var(--ambar);outline-offset:2px}
.carrusel-flecha[disabled]{opacity:0;pointer-events:none}
.carrusel-flecha.atras{left:-14px}
.carrusel-flecha.adelante{right:-14px}
@media (min-width:920px){ .carrusel-flecha{display:grid} }

.carrusel-puntos{display:flex;justify-content:center;gap:7px;margin-top:2px}
.carrusel-puntos button{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(42,59,66,.2);transition:background .2s,width .2s;
}
.carrusel-puntos button.activo{background:var(--pizarra);width:20px;border-radius:99px}
.carrusel-pista-texto{
  text-align:center;margin:14px 0 0;
  font-family:'Chivo Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);
}
@media (min-width:920px){ .carrusel-pista-texto{display:none} }

/* ============================================================
   SOBRE NOSOTROS AMPLIADO
   ============================================================ */
.nosotros{
  display:grid;gap:clamp(28px,5vw,64px);
  grid-template-columns:1.08fr .92fr;align-items:start;
  margin-bottom:clamp(34px,5vw,56px);
}
@media (max-width:860px){ .nosotros{grid-template-columns:1fr} }
.nosotros-texto p{color:var(--gris)}
.nosotros-texto > p:first-of-type{margin-top:0}

.nosotros-puntos{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:13px}
.nosotros-puntos li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--pizarra)}
.nosotros-puntos svg{
  width:18px;height:18px;flex:none;margin-top:3px;fill:none;
  stroke:var(--aire);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
.nosotros-cta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin:0}
.enlace-flecha{
  font-family:'Chivo Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--gris);
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.enlace-flecha:hover{color:var(--pizarra);border-color:var(--pizarra)}

.nosotros-foto{margin:0;position:sticky;top:100px}
@media (max-width:860px){ .nosotros-foto{position:static} }
.nosotros-foto img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:16px;
}
.nosotros-foto.sin-imagen{
  aspect-ratio:4/5;border-radius:16px;
  display:grid;place-items:center;
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(127,198,220,.16), transparent 70%),
    repeating-linear-gradient(135deg, rgba(42,59,66,.035) 0 2px, transparent 2px 12px);
  border:1px solid var(--borde);
}
.nosotros-foto.sin-imagen span{
  font-family:'Chivo Mono',monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:#A8BCC4;
}
.nosotros-foto figcaption{
  margin-top:11px;font-size:13px;color:var(--tenue);line-height:1.5;
}

.datos{grid-template-columns:repeat(3,1fr)}
@media (max-width:620px){ .datos{grid-template-columns:1fr} }

/* horario de la agenda */
.horario-lista{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px}
.horario-lista li{display:flex;justify-content:space-between;gap:14px;color:var(--gris)}
.horario-lista b{color:var(--pizarra);font-family:'Chivo Mono',monospace;font-size:13px}
.pista-alerta{color:#9A3627!important;font-weight:500}

/* ============================================================
   FORMULARIOS Y BOTONES DEL SITIO PÚBLICO
   (los usa agendar.php; el panel tiene su propia hoja)
   ============================================================ */
label{display:block;font-size:13px;color:var(--gris);margin-bottom:14px}
input[type=text],input[type=password],input[type=number],input[type=email],
input[type=url],input[type=tel],input[type=date],select,textarea{
  display:block;width:100%;margin-top:6px;padding:12px 14px;
  border:1px solid var(--linea);border-radius:9px;
  font-family:inherit;font-size:16px;color:var(--pizarra);
  background:#fff;-webkit-appearance:none;appearance:none;
}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235C757F' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
  background-size:11px;padding-right:36px;
}
textarea{min-height:120px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--aire);outline-offset:1px;border-color:transparent;
}
/* 16 px en móvil evita que iOS haga zoom al enfocar el campo */

.boton{
  display:inline-flex;align-items:center;gap:8px;
  border:0;cursor:pointer;text-decoration:none;
  font-family:'Chivo Mono',monospace;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:14px 26px;border-radius:999px;
  background:var(--pizarra);color:var(--papel);
  transition:background .2s,transform .1s;
}
.boton:hover{background:#1B2A30}
.boton:active{transform:translateY(1px)}
.boton:focus-visible{outline:3px solid var(--ambar);outline-offset:3px}
.boton.secundario{background:transparent;color:var(--pizarra);border:1px solid var(--linea)}
.boton.secundario:hover{background:#EEF4F6}

.aviso{padding:13px 16px;border-radius:9px;font-size:14px;margin:0 0 16px}
.aviso.ok{background:#E4F3EA;color:#186B39}
.aviso.error{background:#FBE9E7;color:#9A3627}

.enlace{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:14px;color:var(--gris);text-decoration:underline;
}
.enlace:hover{color:var(--pizarra)}


/* ============================================================
   DOCK DE CONTROL

   Flota sobre la foto anclado al borde derecho, igual en móvil y
   en escritorio: no ocupa sitio en el flujo, así que la foto de
   la habitación se ve completa.

   Plegado deja a la vista solo el encendido y el sonido, que es
   lo único que alguien va a querer tocar de paso. Desplegado
   aparecen la perilla, el ambiente elegido y la lectura.
   ============================================================ */
.dock{
  position:absolute;
  right:0;
  bottom:clamp(76px,12vh,132px);
  z-index:6;

  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(6px,1.2vw,14px);

  padding:14px clamp(16px,1.6vw,22px) 14px clamp(10px,1.2vw,16px);
  border-radius:24px 0 0 24px;
  border:1px solid rgba(255,255,255,.6);
  border-right:0;

  background:rgba(255,255,255,.5);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:-14px 18px 44px -26px rgba(22,35,42,.55);

  transition:padding 460ms cubic-bezier(.22,1,.3,1);
}
/* sin foto detrás el cristal no tiene qué difuminar */
.hero:not(.con-foto) .dock{
  background:rgba(255,255,255,.78);
  border-color:var(--linea);
}

/* ---------- la perilla ---------- */
.dock-perilla{
  /* ancho fijo: las etiquetas del dial sobresalen del círculo y
     necesitan sitio reservado o se montan con los textos */
  width:246px;
  display:grid;place-items:center;
  padding:34px 0;
  /* visible: con overflow:hidden las etiquetas salían cortadas.
     Solo se recorta mientras está plegado, para el deslizamiento. */
  overflow:visible;
  transition:width 460ms cubic-bezier(.22,1,.3,1),
             opacity 260ms ease,
             padding 460ms cubic-bezier(.22,1,.3,1);
}

/* ---------- ambiente y lectura ---------- */
.dock-datos{
  display:flex;flex-direction:column;gap:9px;
  min-width:172px;max-width:210px;
  overflow:hidden;
  transition:min-width 460ms cubic-bezier(.22,1,.3,1),
             max-width 460ms cubic-bezier(.22,1,.3,1),
             opacity 260ms ease,
             margin 460ms cubic-bezier(.22,1,.3,1);
}
.dock-datos .pie-escena{
  /* «Café o restaurante» ocupa dos líneas: se reservan las dos para
     que el dock no cambie de alto al girar la perilla */
  min-height:3.1em;
}

/* ---------- encendido y sonido: siempre visibles ---------- */
.dock-botones{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  flex:none;
}
.dock-botones .poder{margin:0}

/* ============================================================
   PLEGADO
   ============================================================ */
.dock[data-oculto="true"]{
  padding-left:clamp(10px,1.2vw,16px);
  padding-right:clamp(14px,1.4vw,18px);
}
.dock[data-oculto="true"] .dock-perilla{
  width:0;padding:0;opacity:0;overflow:hidden;
  /* fuera del orden de tabulación cuando ya terminó de plegarse */
  visibility:hidden;
  transition:width 460ms cubic-bezier(.22,1,.3,1),
             padding 460ms cubic-bezier(.22,1,.3,1),
             opacity 200ms ease,
             visibility 0s linear 460ms;
}
.dock[data-oculto="true"] .dock-datos{
  min-width:0;max-width:0;opacity:0;margin:0;
  visibility:hidden;
  transition:min-width 460ms cubic-bezier(.22,1,.3,1),
             max-width 460ms cubic-bezier(.22,1,.3,1),
             opacity 200ms ease,
             visibility 0s linear 460ms;
}
.dock-perilla,.dock-datos{visibility:visible}

/* ============================================================
   PESTAÑA
   ============================================================ */
.pestana{
  position:absolute;
  left:-38px;top:50%;
  transform:translateY(-50%);
  width:38px;min-height:112px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:12px 0;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.6);
  border-right:0;
  border-radius:15px 0 0 15px;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:-10px 12px 30px -22px rgba(22,35,42,.5);
  color:var(--gris);
  transition:background .2s,color .2s;
}
.pestana:hover{background:rgba(255,255,255,.72);color:var(--pizarra)}
.pestana:active{transform:translateY(-50%) scale(.97)}
.pestana:focus-visible{outline:3px solid var(--ambar);outline-offset:3px}
.hero:not(.con-foto) .pestana{background:rgba(255,255,255,.8);border-color:var(--linea)}

.pestana-flecha{
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform 460ms cubic-bezier(.22,1,.3,1);
}
/* desplegado la flecha empuja hacia fuera; plegado invita a abrir */
.dock[data-oculto="true"] .pestana-flecha{transform:rotate(180deg)}
.pestana-rotulo{
  writing-mode:vertical-rl;
  font-family:'Chivo Mono',monospace;font-size:9px;
  letter-spacing:.22em;text-transform:uppercase;
  user-select:none;
}

/* ============================================================
   PLEGADO COMPACTO

   Plegado el dock debe estorbar lo mínimo: se van los rótulos y
   los botones se reducen a dos círculos.
   ============================================================ */
.dock[data-oculto="true"]{
  padding:10px 13px 10px 11px;
  gap:8px;
}
.dock[data-oculto="true"] .dock-botones{gap:9px}
.dock[data-oculto="true"] .poder-rotulo{display:none}
.dock[data-oculto="true"] .bisel{padding:5px}
.dock[data-oculto="true"] .boton-poder{width:50px;height:50px}
.dock[data-oculto="true"] .ico-poder{width:20px;height:20px}
/* el botón de sonido pasa a icono redondo, sin texto */
.dock[data-oculto="true"] .boton-sonido{
  width:38px;height:38px;padding:0;border-radius:50%;
  justify-content:center;gap:0;
}
.dock[data-oculto="true"] .boton-sonido span{display:none}

/* ============================================================
   HERO EN MÓVIL

   La foto deja de ser un fondo sobre el que se lee texto y pasa a
   ser una imagen con su propia proporción: la habitación se ve
   completa y el titular va debajo, sobre color sólido. Así se
   entiende qué es cada cosa y desaparece el velo blanco, que
   tapaba la foto sin necesidad.
   ============================================================ */
@media (max-width:760px){
  .hero{
    display:block;
    padding:0;
    min-height:0;
    background:var(--tono);
  }
  /* sin velo: el texto ya no va encima de la foto */
  .hero::before{display:none}

  .hero-lienzo{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    background:var(--tono);
  }

  /* el equipo se monta sobre la foto, dentro del lienzo */
  .escena{
    position:absolute;left:0;right:0;top:0;
    padding:7% 0 0;
  }
  /* el ancho se fija con --ancho-equipo más abajo, por tipo de equipo */
  .corrientes{width:min(70%,240px);height:150px}
  .penacho{width:44%;height:160px}

  /* el dock vive dentro de la foto, abajo a la derecha: ya no choca
     con el botón flotante de WhatsApp */
  .dock{
    top:auto;bottom:14px;
    max-width:calc(100% - 42px);
    grid-template-columns:minmax(0,auto) auto;
    grid-template-areas:
      "perilla botones"
      "datos   datos";
    gap:8px 12px;
    padding:12px 14px 12px 12px;
  }
  /* sin etiquetas alrededor del dial: no caben sin recortarse y el
     rótulo de abajo ya dice en qué ambiente está */
  .marcas{display:none}
  .dock-perilla{grid-area:perilla;width:142px;padding:20px 0}
  .dial{width:106px;height:106px}
  .aguja{height:38px}

  .dock-botones{grid-area:botones}
  .dock-datos{grid-area:datos;max-width:none;min-width:0;text-align:center}
  .dock-datos .pie-escena{min-height:0}
  /* «Espacio · Flujo» repite lo que ya dice el rótulo */
  .dock-datos .lectura{display:none}

  .dock[data-oculto="true"]{
    grid-template-columns:auto;
    grid-template-areas:"botones";
  }
  .dock[data-oculto="true"] .dock-perilla,
  .dock[data-oculto="true"] .dock-datos{
    width:0;height:0;padding:0;margin:0;
    min-width:0;max-width:0;opacity:0;visibility:hidden;
  }

  .pestana{min-height:88px;width:34px;left:-34px}
  .pestana-rotulo{font-size:8.5px;letter-spacing:.18em}

  /* el titular, sobre color sólido y legible sin trucos */
  .hero-texto{
    padding:clamp(24px,7vw,34px) clamp(18px,5vw,26px) clamp(30px,8vw,44px);
    max-width:none;
  }
  .hero-texto h1{max-width:none}
  .hero-texto .bajada{max-width:none}
}

/* pantallas muy angostas: la foto se estira un poco menos */
@media (max-width:420px){
  .hero-lienzo{aspect-ratio:3/4}
  .dock-perilla{width:130px}
  .dial{width:98px;height:98px}
}

@media (prefers-reduced-motion:reduce){
  .dock,.dock-perilla,.dock-datos,.pestana-flecha{transition-duration:1ms}
}

/* ============================================================
   EQUIPO DE TECHO

   Basado en la unidad real: cuerpo cuadrado de esquinas apenas
   redondeadas, la rendija de salida arriba —casi pegada al canto
   superior— y dentro se ven las aletas verticales con la punta.
   El frente es liso, con la marca al centro y el visor a la
   derecha.

   El aire NO sale por abajo como un split: sale por esa rendija.
   ============================================================ */
.placa,.paneles{display:none}

.equipo[data-tipo="techo"]{
  --ancho-equipo:min(100%,640px);
  /* cuadrado: apenas un radio para que no se vea cortado a cuchillo */
  border-radius:3px 3px 11px 11px;
  background:linear-gradient(#F4F8FA 0%,#FFFFFF 22%,#FDFEFE 58%,#EAF1F4 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 -22px 34px -24px rgba(22,35,42,.28) inset,
             0 22px 44px -18px rgba(22,35,42,.45);
}

/* canto superior contra el techo */
.equipo[data-tipo="techo"] .placa{
  display:block;position:absolute;
  left:0;right:0;top:0;height:5px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(#E4EDF1,#F9FBFC);
}

/* ---- LA RENDIJA: cavidad oscura arriba, con las aletas dentro ---- */
.equipo[data-tipo="techo"] .salida{
  left:4%;right:15%;top:9%;bottom:auto;height:27%;
  border-radius:2px;
  background:linear-gradient(#0B1317,#18242A 55%,#0A1216);
  box-shadow:0 3px 7px rgba(0,0,0,.55) inset,
             0 -1px 0 rgba(255,255,255,.5);
}
/* las aletas verticales: dientes con punta, como en la foto */
.equipo[data-tipo="techo"] .salida::before{
  content:"";position:absolute;
  left:2%;right:2%;bottom:0;height:56%;
  background:linear-gradient(#B9C4CA,#8D9BA3 60%,#77858D);
  clip-path:polygon(0.00% 100%, 1.92% 8%, 3.85% 100%, 5.77% 8%, 7.69% 100%, 9.62% 8%, 11.54% 100%, 13.46% 8%, 15.38% 100%, 17.31% 8%, 19.23% 100%, 21.15% 8%, 23.08% 100%, 25.00% 8%, 26.92% 100%, 28.85% 8%, 30.77% 100%, 32.69% 8%, 34.62% 100%, 36.54% 8%, 38.46% 100%, 40.38% 8%, 42.31% 100%, 44.23% 8%, 46.15% 100%, 48.08% 8%, 50.00% 100%, 51.92% 8%, 53.85% 100%, 55.77% 8%, 57.69% 100%, 59.62% 8%, 61.54% 100%, 63.46% 8%, 65.38% 100%, 67.31% 8%, 69.23% 100%, 71.15% 8%, 73.08% 100%, 75.00% 8%, 76.92% 100%, 78.85% 8%, 80.77% 100%, 82.69% 8%, 84.62% 100%, 86.54% 8%, 88.46% 100%, 90.38% 8%, 92.31% 100%, 94.23% 8%, 96.15% 100%, 98.08% 8%, 100% 100%);
  opacity:.95;
}
/* el resplandor del aire, detrás de las aletas */
.equipo[data-tipo="techo"] .salida::after{
  background:radial-gradient(75% 150% at 50% 100%, rgba(127,198,220,.6), transparent 74%);
}

/* ---- la tapa: cerrada tapa la rendija, al encender se abre ---- */
.equipo[data-tipo="techo"] .aleta{
  left:4%;right:15%;top:9%;bottom:auto;height:27%;
  border-radius:2px;
  transform-origin:50% 0%;
  transform:rotateX(calc(var(--apertura) * .82));
  background:linear-gradient(#FFFFFF,#F1F6F8 62%,#DCE6EA);
  box-shadow:0 3px 9px -4px rgba(22,35,42,.45);
}
.equipo[data-tipo="techo"] .aleta::before{
  /* una junta fina en el canto inferior, no el filo del split */
  content:"";position:absolute;inset:auto 0 0;height:1px;
  background:rgba(42,59,66,.22);border-radius:0;
}

/* ---- frente liso, marca al centro y visor a la derecha ---- */
.equipo[data-tipo="techo"] .paneles{
  display:block;position:absolute;
  left:0;right:0;top:36%;bottom:0;
  background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0) 40%);
}
/* el visor oscuro de la esquina derecha */
.equipo[data-tipo="techo"] .paneles::after{
  content:"";position:absolute;
  right:6%;top:8%;width:13%;height:34%;
  border-radius:2px;
  background:linear-gradient(#2B3941,#1A252B);
  box-shadow:0 1px 0 rgba(255,255,255,.6);
}
/* junta del panel inferior, como la línea que se ve en el equipo */
.equipo[data-tipo="techo"] .rejilla{
  inset:auto 8% 22%;
  height:1px;
  border-radius:0;
  background:rgba(42,59,66,.12);
}

.equipo[data-tipo="techo"] .marca{
  bottom:auto;top:48%;left:50%;transform:translateX(-50%);
}
.equipo[data-tipo="techo"] .led{bottom:auto;top:50%;right:23%}

/* ---- el aire arranca en la rendija, no en el borde inferior ---- */
.equipo[data-tipo="techo"] ~ .aire .penacho{
  top:22%;width:70%;height:290px;
}
.equipo[data-tipo="techo"] ~ .aire .corrientes{
  top:20%;width:min(92%,660px);height:260px;
}
.equipo[data-tipo="techo"] ~ .aire .mota{top:24%}

@media (max-width:760px){
  .equipo{--ancho-equipo:min(62%,232px)}
  .equipo[data-tipo="techo"]{--ancho-equipo:min(82%,296px)}
  .equipo[data-tipo="techo"] ~ .aire .penacho{height:185px}
  .equipo[data-tipo="techo"] ~ .aire .corrientes{height:175px}
}
@media (max-width:420px){
  .equipo{--ancho-equipo:min(66%,210px)}
  .equipo[data-tipo="techo"]{--ancho-equipo:min(86%,268px)}
}

@media (prefers-reduced-motion:reduce){
  .equipo{transition-duration:1ms}
}