/* ============================================================
   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);
}
.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}
/* <picture> es inline por defecto y entonces el alto en porcentaje de
   la imagen no tiene contra qué resolverse */
.servicio-foto picture{display:block;width:100%;height:100%}
.servicio-foto img{width:100%;height:100%;object-fit:cover;object-position:center}
/* el degradado funde la foto con la tarjeta: arranca en el borde
   izquierdo y se acaba antes de la mitad, para no comerse el motivo */
.servicio-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,#26363D 0%,rgba(38,54,61,.55) 17%,rgba(38,54,61,0) 50%);
}

/* ---- modo recorte: la imagen es una figura sin fondo ----------
   Con un PNG transparente el tratamiento anterior no sirve: recortar
   a «cover» le corta los pies y el velo degradado le cae encima de la
   cara. Aquí la figura se para sobre el fondo de la tarjeta y se sale
   por el borde de arriba, que es lo que da la sensación de relieve.
   El alto extra vive en --saliente y se usa dos veces: lo que crece
   la imagen y lo que sube. */
.tarjeta-servicio.con-recorte{overflow:visible}
.servicio-foto.recorte{
  --saliente:clamp(26px,5.4vw,74px);
  --ancla:72%;            /* dónde cae el centro de la figura */
  --sangria:clamp(6px,1.4vw,22px);
  position:relative;
  overflow:visible;
}
/* sin velo: en un recorte no hay fondo que fundir */
.servicio-foto.recorte::after{display:none}
/* un halo tenue detrás y una sombra de contacto abajo, para que la
   figura no quede flotando sobre un rectángulo vacío. Siguen a la
   figura con --ancla en vez de quedarse en el centro de la columna */
.servicio-foto.recorte::before{
  content:"";position:absolute;z-index:0;
  left:0;right:0;bottom:0;height:90%;
  background:
    radial-gradient(54% 58% at var(--ancla) 56%, rgba(127,198,220,.22), transparent 72%),
    radial-gradient(34% 12% at var(--ancla) 100%, rgba(8,17,22,.55), transparent 76%);
}
/* La figura va en posición absoluta, y eso es lo que hace que todo lo
   demás funcione:

   · Fuera del flujo, no puede estirar la fila. En flujo normal un
     recorte vertical hacía crecer la columna, la columna estiraba la
     fila y la tarjeta terminaba con casi el doble de alto, con el
     texto flotando en el medio de un rectángulo vacío.
   · Con «top» y «bottom» puestos, el alto de la caja queda definido
     —el de la fila más lo que sobresale— y el alto en porcentaje de la
     imagen tiene por fin contra qué resolverse.
   · Con «right» fijo, la figura queda anclada al borde derecho y el
     ancho extra crece hacia la izquierda, que es donde está el espacio
     muerto entre el texto y la figura.

   El ancho va al 130 % de la columna a propósito. Con «contain» la
   imagen se limita por el lado que primero topa: una figura apaisada
   topa por el ancho, le sobra alto y no sobresale nada. Con la caja
   ancha pasa a limitarse por el alto y llena también lo que sube. Una
   figura vertical ya se limitaba por el alto, así que el ensanche no
   la toca: el mismo CSS sirve para las dos sin deformar ninguna. */
.servicio-foto.recorte picture{
  position:absolute;z-index:1;
  right:var(--sangria);
  width:130%;
  top:calc(-1 * var(--saliente));
  bottom:0;
  /* anula el height:100% de la regla general: aquí el alto lo definen
     top y bottom, y con los tres puestos el navegador ignora bottom */
  height:auto;
}
.servicio-foto.recorte img{
  object-fit:contain;
  object-position:bottom right;
  filter:drop-shadow(0 22px 26px rgba(8,18,23,.45));
}
.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%);
  }
  /* el recorte necesita un cuadro más alto: una persona en 16/10
     queda diminuta. Y aquí va centrada: apilada sobre el texto, pegarla
     a un costado deja la tarjeta coja */
  .servicio-foto.recorte{
    aspect-ratio:4/3;--saliente:24px;--ancla:50%;--sangria:0px;
  }
  .servicio-foto.recorte picture{width:112%;right:-6%}
  .servicio-foto.recorte img{object-position:bottom center}
  .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{
  /* Cuántas tarjetas entran enteras. El ancho de cada una se calcula a
     partir de este número, no al revés: así nunca queda una tarjeta
     cortada a medias en el borde derecho, que es lo que pasaba con un
     flex-basis en porcentaje (31 % dejaba 3,2 tarjetas a la vista). */
  --columnas:1;
  --hueco:20px;

  display:flex;gap:var(--hueco);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* sin relleno lateral: clientWidth tiene que valer exactamente lo que
     mide una página para que el salto de las flechas cuadre */
  padding:4px 0 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 calc((100% - (var(--columnas) - 1) * var(--hueco)) / var(--columnas));
  scroll-snap-align:start;
}
/* filtrado sin recargar: la ficha sale del flujo, no solo se transparenta */
.ficha.oculta{display:none}

/* La rejilla se reacomoda sola al angostar la ventana. Los cortes están
   puestos donde la tarjeta bajaría de unos 250 px, que es cuando el
   nombre del equipo empieza a partirse en tres líneas. */
@media (min-width:560px){  .carrusel-pista{--columnas:2} }
@media (min-width:860px){  .carrusel-pista{--columnas:3} }
@media (min-width:1120px){ .carrusel-pista{--columnas:4} }

.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}
/* Un poco más afuera que antes: ahora la última tarjeta llega justo al
   borde de la pista, así que una flecha a -14px se le montaba encima.
   El contenedor deja 37 px de margen o más a estos anchos, de sobra
   para los 22 px que sobresale el botón. */
.carrusel-flecha.atras{left:-20px}
.carrusel-flecha.adelante{right:-20px}
@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
   ============================================================ */
/* ---- textura de fondo del bloque «Sobre nosotros» --------------
   El bloque era blanco puro de lado a lado y la foto quedaba flotando
   en el vacío. Detrás va una textura de arcos finos, anclada a la
   derecha, que da profundidad sin competir con nada: el trazo está al
   6-8 % de opacidad y la máscara lo apaga hacia la izquierda, así que
   nunca llega al texto.

   Es un archivo aparte (assets/textura.svg) y no un data-URI: así se
   cachea, se puede abrir para editarlo y no engorda la hoja. Si falta
   el archivo no pasa nada, el bloque se ve como antes. */
#nosotros{position:relative;overflow:hidden}
#nosotros::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:0;top:-6%;width:min(62%,760px);height:112%;
  background:url(textura.svg) right center / cover no-repeat;
  -webkit-mask-image:radial-gradient(118% 92% at 100% 50%,
      #000 26%, rgba(0,0,0,.55) 60%, transparent 93%);
  mask-image:radial-gradient(118% 92% at 100% 50%,
      #000 26%, rgba(0,0,0,.55) 60%, transparent 93%);
}
/* el contenido por encima de la textura */
#nosotros > .contenedor{position:relative;z-index:1}

@media (max-width:860px){
  /* en el teléfono la textura se corre al centro y baja de intensidad:
     a ese ancho la foto no tiene un lado libre donde apoyarse */
  #nosotros::before{width:100%;opacity:.55}
}

.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} }
/* La foto conserva su propia proporción: nada de aspect-ratio fijo con
   «cover» aquí. Antes el recuadro era 4:5 y recortaba todo lo que no
   viniera exactamente con esa forma —y basta que la foto traiga unos
   píxeles de más para que el recorte se coma una cabeza—. Con
   height:auto cualquier foto entra completa, vertical u horizontal, y
   los atributos width y height del <img> dejan el hueco reservado para
   que la página no salte al cargarla. */
.nosotros-foto img{
  display:block;
  width:100%;height:auto;
  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(60%,196px);height:122px}
  .penacho{width:38%;height:132px}

  /* 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, con el 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"] .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){
  /* ----------------------------------------------------------
     El equipo, más chico en el teléfono

     En la foto vertical el equipo competía con la escena. Baja de
     tamaño el ancho y, con él, el alto y los detalles que estaban
     en píxeles fijos (la rejilla y el led), para que la proporción
     siga pareciéndose a la del escritorio y no quede un bloque
     achatado.
     ---------------------------------------------------------- */
  .equipo{
    --ancho-equipo:min(54%,196px);
    height:clamp(56px,14.5vw,86px);
    border-radius:10px 10px 16px 16px;
  }
  .rejilla{inset:9px 15px auto}
  .led{right:15px;width:5px;height:5px}

  .equipo[data-tipo="techo"]{--ancho-equipo:min(72%,252px)}
  .equipo[data-tipo="techo"] ~ .aire .penacho{height:150px}
  .equipo[data-tipo="techo"] ~ .aire .corrientes{height:140px}

  /* ----------------------------------------------------------
     El dock, más chico en el teléfono

     Los tamaños del escritorio son cómodos con mouse, pero en una
     pantalla de 390 px el bloque plegado se comía una esquina de
     la foto. Aquí todo baja un escalón sin perder área táctil:
     el botón de encendido queda en 44 px, que es el mínimo
     recomendado para tocar con el dedo.
     ---------------------------------------------------------- */
  .dock{padding:10px 12px 10px 10px;gap:7px 10px}
  .dock-perilla{width:128px;padding:16px 0}
  .dial{width:94px;height:94px}
  .aguja{height:34px}
  .dock-botones{gap:9px}
  .poder{gap:6px}
  .bisel{padding:5px}
  .boton-poder{width:46px;height:46px}
  .ico-poder{width:19px;height:19px}
  .poder-rotulo{font-size:9px;letter-spacing:.14em;min-width:9ch}
  .boton-sonido{padding:8px 13px;font-size:9px}
  .ico-audio{width:15px;height:15px}
  .dock-datos .pie-escena{font-size:9px}
  .dock-datos .pie-escena b{font-size:15px}

  /* plegado: dos círculos compactos y nada más */
  .dock[data-oculto="true"]{padding:8px 10px 8px 8px}
  .dock[data-oculto="true"] .dock-botones{gap:8px}
  .dock[data-oculto="true"] .bisel{padding:4px}
  .dock[data-oculto="true"] .boton-poder{width:44px;height:44px}
  .dock[data-oculto="true"] .ico-poder{width:18px;height:18px}
  .dock[data-oculto="true"] .boton-sonido{width:34px;height:34px}
  .dock[data-oculto="true"] .ico-audio{width:16px;height:16px}

  .pestana{min-height:76px;width:30px;left:-30px;gap:6px}
  .pestana-flecha{width:13px;height:13px}
  .pestana-rotulo{font-size:8px;letter-spacing:.16em}
}
@media (max-width:420px){
  .equipo{--ancho-equipo:min(58%,178px)}
  .equipo[data-tipo="techo"]{--ancho-equipo:min(76%,232px)}
}

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