/* ==========================================================================
   BIBI'S DETAILING — hoja de estilos
   Paleta y tipografia segun manual de marca.

   La tipografia esta alojada en el propio sitio, no en Google Fonts: evita
   dos conexiones externas antes de poder pintar texto. Son dos archivos
   variables (81 KB en total) que cubren todos los pesos que usa la pagina.
   ========================================================================== */

@font-face{
  font-family:"Saira";
  font-style:normal;
  font-weight:100 900;
  font-stretch:100%;
  font-display:swap;
  src:url("../fonts/saira-recta.woff2?v=2") format("woff2");
}
@font-face{
  font-family:"Saira";
  font-style:italic;
  font-weight:800;
  font-stretch:76%;
  font-display:swap;
  src:url("../fonts/saira-titulo.woff2?v=2") format("woff2");
}

:root{
  --azul:        #3392D0;
  --azul-hondo:  #1F6FA8;
  --azul-claro:  #6FBCEE;
  --negro:       #0E1214;
  --negro-2:     #12181B;
  --carbon:      #1A2226;
  --carbon-2:    #232D33;
  --blanco:      #F4F6F7;
  --gris:        #9AA8B0;
  --gris-2:      #7C8B94;   /* 5.1:1 sobre el negro de fondo */

  --borde:       rgba(244,246,247,.10);
  --borde-vivo:  rgba(51,146,208,.45);

  --ancho:       1240px;
  --pad-lat:     clamp(1.15rem, 4vw, 3rem);

  --radio-pastilla: 999px;   /* botones y chips */
  --radio-suave:     10px;   /* campos, marcos de icono */
  --radio-panel:     14px;   /* paneles flotantes */

  --t-rapida:    .18s cubic-bezier(.4,0,.2,1);
  --t-media:     .3s cubic-bezier(.4,0,.2,1);
  --t-lenta:     .55s cubic-bezier(.16,1,.3,1);

  --z-flotante:  50;
  --z-menu:      60;
  --z-nav:       70;   /* por encima del panel: la X tiene que quedar accesible */
  --z-modal:     90;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--negro);
  color:var(--blanco);
  font-family:"Saira","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body.sin-scroll{ overflow:hidden; }

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--azul-claro);
  outline-offset:3px;
  border-radius:var(--radio-suave);
}

::selection{ background:var(--azul); color:var(--negro); }

/* --------------------------------------------------------------- tipografia */

h1,h2,h3,h4{
  font-family:"Saira","Segoe UI",system-ui,sans-serif;
  font-style:italic;
  font-weight:800;
  font-stretch:76%;
  text-transform:uppercase;
  line-height:.93;
  letter-spacing:-.012em;
  margin:0;
  text-wrap:balance;
}

h1{ font-size:clamp(2.6rem,1.4rem + 5.4vw,5.4rem); }
h2{ font-size:clamp(2rem,1.25rem + 3.1vw,3.6rem); }
h3{ font-size:clamp(1.15rem,1rem + .6vw,1.45rem); }

p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }

.plomo{ color:var(--gris); }

.rotulo{
  display:inline-flex;
  align-items:center;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  /* un tono mas claro que --azul: con letra de 11 px sobre el fondo oscuro,
     el azul de marca queda en 4,8:1 y cualquier variacion lo baja de 4,5.
     Este pasa con margen (5,9:1) y se sigue leyendo como el mismo azul. */
  color:#4AA3DE;
  margin:0 0 1.15rem;
}

.entradilla{
  max-width:56ch;
  color:var(--gris);
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  margin-top:1.25rem;
}

/* --------------------------------------------------------------- estructura */

.envoltorio{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--pad-lat);
}

/* Aire parejo entre secciones: antes cada una llevaba hasta 115 px arriba y
   abajo (230 px de vacio entre una y otra en escritorio). Ahora 77 px por
   lado en escritorio y 52 en celular: se sigue leyendo cada bloque aparte,
   sin pantallas vacias entre medio. */
.seccion{ padding-block:clamp(3.25rem,6vw,5.5rem); position:relative; }

/* Las secciones que quedan lejos del primer pantallazo no se dibujan hasta
   que el visitante se acerca (content-visibility). En el telefono es la
   diferencia entre pintar 200 fotos y 60 tarjetas de entrada o pintar solo
   la portada y los servicios. El alto estimado evita saltos en la barra de
   desplazamiento; una vez dibujada, cada seccion conserva su alto real.
   Los saltos por ancla (#contacto, #productos) siguen funcionando: el
   navegador dibuja la seccion destino antes de desplazarse. */
#resultados,
#trabajos,
#prensa,
#garantia,
#productos,
#preguntas,
#agenda{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}
/* altos medidos en escritorio, para que el salto sea minimo */
#resultados{ contain-intrinsic-size:auto 860px; }
#trabajos{   contain-intrinsic-size:auto 1100px; }
#garantia{   contain-intrinsic-size:auto 700px; }
#productos{  contain-intrinsic-size:auto 1000px; }
#preguntas{  contain-intrinsic-size:auto 1030px; }
#agenda{     contain-intrinsic-size:auto 1700px; }
.seccion--tenue{ background:var(--negro-2); }
.seccion--linea{ border-top:1px solid var(--borde); }

.cabecera-seccion{
  display:grid;
  gap:1.5rem;
  margin-bottom:clamp(2rem,3.5vw,3rem);   /* 45 px en escritorio, 32 en celular */
}
@media (min-width:900px){
  .cabecera-seccion{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    align-items:end;
    gap:3rem;
  }
  .cabecera-seccion .entradilla{ margin-top:0; padding-bottom:.4rem; }
}

.enlace-salto{
  position:absolute;
  left:-999px;
  top:0;
  z-index:100;
  background:var(--azul);
  color:var(--negro);
  padding:.7rem 1.2rem;
  font-weight:600;
}
.enlace-salto:focus{ left:.75rem; top:.75rem; }

/* --------------------------------------------------------------- botones */

.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:48px;
  padding:.85rem 1.6rem;
  border-radius:var(--radio-pastilla);
  font-weight:600;
  font-size:.94rem;
  letter-spacing:.045em;
  text-transform:uppercase;
  cursor:pointer;
  border:1px solid transparent;
  transition:background var(--t-rapida),color var(--t-rapida),border-color var(--t-rapida);
  white-space:nowrap;
}
.boton svg{ flex:none; }

.boton--primario{ background:var(--azul); color:var(--negro); }
.boton--primario:hover{ background:var(--azul-claro); }

.boton--fantasma{ border-color:var(--borde); color:var(--blanco); }
.boton--fantasma:hover{ border-color:var(--azul); color:var(--azul-claro); }

.boton--bloque{ width:100%; }

/* --------------------------------------------------------------- navegacion */

.nav{
  position:fixed;
  inset:0 0 auto;
  z-index:var(--z-nav);
  transition:background var(--t-media),border-color var(--t-media),backdrop-filter var(--t-media);
  border-bottom:1px solid transparent;
}
.nav.fijada{
  background:rgba(14,18,20,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--borde);
}

.nav__caja{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  min-height:74px;
}
@media (min-width:1024px){
  .nav__caja{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:2rem;
    min-height:80px;
  }
  .nav__caja .marca{ justify-self:start; }
  .nav__caja .nav__menu{ justify-self:center; }
  .nav__caja .nav__acciones{ justify-self:end; }
}

/* ---------------------------------------------------------------- la marca
   Lockup 2b del manual: el auto dentro de una placa de linea fina, el nombre
   en caja alta liviana con mucho interletrado y "Detailing" en azul debajo.
   En la barra va la version horizontal; en el pie, la apilada completa. */

.marca{ display:flex; align-items:center; gap:.85rem; flex:none; }

.marca__placa{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.3rem;
  padding:.5rem .7rem;
  border:1px solid var(--azul);
  flex:none;
}
.marca__placa img{ width:72px; height:auto; }

.marca__est{
  font-size:.42rem;
  font-weight:400;
  letter-spacing:.42em;
  text-indent:.42em;
  text-transform:uppercase;
  color:var(--gris-2);
  white-space:nowrap;
}

.marca__texto{ display:flex; flex-direction:column; line-height:1; }

.marca__nombre{
  font-family:"Saira","Segoe UI",system-ui,sans-serif;
  font-style:normal;
  font-weight:300;
  font-stretch:100%;
  text-transform:uppercase;
  font-size:1.32rem;
  line-height:1;
  letter-spacing:.2em;
  text-indent:.2em;      /* compensa el interletrado del ultimo caracter */
  color:var(--blanco);
}
.marca__bajada{
  font-size:.6rem;
  font-weight:400;
  letter-spacing:.58em;
  text-indent:.58em;
  text-transform:uppercase;
  color:var(--azul);
  margin-top:.5rem;
}

/* version apilada, la del manual */
.marca--pila{
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
  text-align:center;
}
.marca--pila .marca__placa{ padding:1.1rem 1.6rem; gap:.85rem; }
.marca--pila .marca__placa img{ width:150px; }
.marca--pila .marca__est{ font-size:.5rem; }
.marca--pila .marca__texto{ align-items:center; }
.marca--pila .marca__nombre{ font-size:2.1rem; }
.marca--pila .marca__bajada{ font-size:.78rem; margin-top:.75rem; }

.nav__menu{ display:none; }
.nav__acciones{ display:flex; align-items:center; gap:.7rem; }
@media (min-width:1024px){
  /* linea fina que separa la navegacion de los botones de accion */
  .nav__acciones::before{
    content:"";
    width:1px;
    height:26px;
    margin-right:.35rem;
    background:var(--borde);
  }
}

@media (min-width:1024px){
  /* Con cinco pestanas y una de dos palabras (Royal Enfield), a 1024 px el
     menu se partia en dos renglones y se montaba sobre el logo. El aire entre
     pestanas crece con la pantalla y ninguna se parte al medio. */
  .nav__menu{
    display:flex;
    align-items:center;
    gap:clamp(1rem,-0.6rem + 2.6vw,2.1rem);
  }
  .nav__menu a{
    white-space:nowrap;
    font-size:.83rem;
    font-weight:500;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--gris);
    padding-block:.4rem;
    position:relative;
    transition:color var(--t-rapida);
  }
  @media (min-width:1200px){
    .nav__menu a{ letter-spacing:.11em; }
  }
  .nav__menu a::after{
    content:"";
    position:absolute;
    left:50%; bottom:0;
    width:0; height:2px;
    background:var(--azul);
    transform:translateX(-50%);
    box-shadow:0 0 10px rgba(51,146,208,.8);
    transition:width var(--t-media);
  }
  .nav__menu a:hover,.nav__menu a[aria-current="true"]{ color:var(--blanco); }
  .nav__menu a:hover::after,.nav__menu a[aria-current="true"]::after{ width:100%; }
}

.hamburguesa{
  display:grid;
  place-items:center;
  width:48px; height:48px;
  border:1px solid var(--borde);
  border-radius:50%;
  transition:border-color var(--t-rapida);
}
.hamburguesa:hover{ border-color:var(--azul); }
.hamburguesa span{
  display:block;
  width:20px; height:2px;
  background:var(--blanco);
  position:relative;
  transition:background var(--t-rapida);
}
.hamburguesa span::before,.hamburguesa span::after{
  content:""; position:absolute; left:0;
  width:20px; height:2px; background:var(--blanco);
  transition:transform var(--t-media),top var(--t-media);
}
.hamburguesa span::before{ top:-6px; }
.hamburguesa span::after{ top:6px; }
.hamburguesa[aria-expanded="true"] span{ background:transparent; }
.hamburguesa[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.hamburguesa[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (min-width:1024px){ .hamburguesa{ display:none; } }
.nav__wa{ display:none; }
@media (min-width:600px){ .nav__wa{ display:inline-flex; } }

/* panel movil */
.panel{
  position:fixed;
  inset:0;
  z-index:var(--z-menu);
  background:var(--negro);
  padding:6rem var(--pad-lat) 2.5rem;
  display:flex;
  flex-direction:column;
  gap:.25rem;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform var(--t-lenta),visibility var(--t-lenta);
  overflow-y:auto;
}
.panel.abierto{ transform:none; visibility:visible; }
.panel a{
  font-family:"Saira",sans-serif;
  font-style:italic;
  font-weight:800;
  font-stretch:76%;
  text-transform:uppercase;
  font-size:clamp(1.75rem,7vw,2.5rem);
  line-height:1.15;
  padding-block:.4rem;
  border-bottom:1px solid var(--borde);
  transition:color var(--t-rapida),padding-left var(--t-rapida);
}
.panel a:hover{ color:var(--azul); padding-left:.5rem; }
.panel .boton{ margin-top:2rem; }
@media (min-width:1024px){ .panel{ display:none; } }

/* --------------------------------------------------------------- portada */

.portada{
  position:relative;
  min-height:min(100svh,860px);
  display:flex;
  align-items:flex-end;
  padding-top:120px;
  padding-bottom:clamp(3rem,7vw,5.5rem);
  overflow:hidden;
}
.portada__fondo{
  position:absolute;
  inset:0;
  z-index:0;
}
.portada__fondo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 45%;
}
/* el reel del taller, en bucle, tapa la foto cuando ya esta reproduciendo;
   hasta entonces (y si no hay archivo) se ve la foto de siempre */
.portada__video{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 45%;
  transform:scale(1.12);
  transform-origin:50% 40%;
  opacity:0;
  transition:opacity 1.2s ease;
  pointer-events:none;
}
.portada__video.lista{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .portada__video{ display:none; }
}
/* Velo liviano: el video se ve claro. Solo se oscurece la franja izquierda
   donde va el texto, el borde de abajo para fundir con la seccion siguiente
   y apenas el borde de arriba bajo el menu. Antes el velo tapaba entre un
   34% y un 90% del video; ahora el centro y la derecha quedan limpios. */
.portada__fondo::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top,var(--negro) 0%,rgba(14,18,20,.55) 14%,rgba(14,18,20,0) 40%,rgba(14,18,20,0) 82%,rgba(14,18,20,.3) 100%),
    linear-gradient(to right,rgba(14,18,20,.6) 0%,rgba(14,18,20,.3) 38%,rgba(14,18,20,0) 62%);
}
/* en el telefono el texto ocupa todo el ancho: un tinte parejo y suave en
   vez de la franja izquierda */
@media (max-width:640px){
  .portada__fondo::after{
    background:
      linear-gradient(to top,var(--negro) 0%,rgba(14,18,20,.6) 16%,rgba(14,18,20,.28) 45%,rgba(14,18,20,.28) 100%);
  }
}
.portada__caja{ position:relative; z-index:1; width:100%; }
.portada h1{ max-width:15ch; }
.portada h1 em{ color:var(--azul); font-style:italic; }
.portada .entradilla{ max-width:48ch; }

/* Legibilidad sobre el video sin oscurecerlo entero: detras del bloque de
   texto va una sombra ovalada, suave y desenfocada (backdrop-filter con
   mascara radial, asi no tiene bordes). El resto del video queda limpio.
   La bajada va un tono mas clara y con una sombra fina en las letras. */
.portada__texto{
  position:relative;
  z-index:0;
  max-width:46rem;
}
.portada__texto::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-2.5rem -4rem -2.5rem -4rem;
  background:radial-gradient(ellipse 62% 70% at 38% 50%,rgba(14,18,20,.86),rgba(14,18,20,.58) 50%,rgba(14,18,20,0) 82%);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  -webkit-mask-image:radial-gradient(ellipse 62% 70% at 38% 50%,#000 45%,transparent 82%);
          mask-image:radial-gradient(ellipse 62% 70% at 38% 50%,#000 45%,transparent 82%);
  pointer-events:none;
}
.portada .entradilla{
  color:#D3DBE0;
  text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 16px rgba(0,0,0,.5);
}
.portada .marcadores{ text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.5); }
@media (max-width:640px){
  .portada__texto::before{
    inset:-1.5rem -1.5rem -1.5rem -1.5rem;
    background:radial-gradient(ellipse 75% 70% at 50% 50%,rgba(14,18,20,.8),rgba(14,18,20,.55) 50%,rgba(14,18,20,0) 85%);
    -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 50%,transparent 85%);
            mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 50%,transparent 85%);
  }
}

.portada__botones{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-top:2.2rem;
}

.marcadores{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.75rem;
  margin-top:2.75rem;
  padding-top:1.75rem;
  border-top:1px solid var(--borde);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gris-2);
}
.marcadores li{ display:flex; align-items:center; gap:.5rem; }
.marcadores li::before{
  content:"";
  width:5px; height:5px;
  background:var(--azul);
  transform:rotate(45deg);
  flex:none;
}

/* Reset de listas con especificidad cero: asi cualquier regla de componente
   le gana. Escrito como `ul.limpia` pisaba el margen de .marcadores, porque
   sumaba mas especificidad y venia despues en la hoja. */
:where(.limpia){ list-style:none; margin:0; padding:0; }

/* --------------------------------------------------------------- cinta
   Una franja fina y oscura, no una barra de color. Texto gris en mayusculas
   chicas con mucho aire entre letras, un punto azul entre palabra y palabra,
   y los dos extremos se desvanecen para que las palabras entren y salgan
   sin corte. Pasa despacio y se frena con el cursor encima.
   Va entre Servicios y "Como trabajamos", como remate de la lista de
   servicios: comparte el fondo de la seccion que sigue y queda enmarcada
   por dos lineas, la suya arriba y la de la seccion abajo. */

/* Para que se destaque sin volverse una barra de color: un halo azul muy
   tenue en el centro, dos rieles de luz (arriba y abajo) que se apagan hacia
   los bordes, y la palabra que cruza el centro se enciende en blanco con halo
   azul mientras las dos vecinas quedan celestes. La palabra la marca el
   script (.viva y .cerca). */
.cinta{
  position:relative;
  overflow:hidden;
  padding-block:1.35rem;
  background:
    radial-gradient(60% 180% at 50% 50%,rgba(51,146,208,.14),transparent 72%),
    var(--negro-2);
  color:var(--gris);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.cinta::before,
.cinta::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(51,146,208,.55) 30%,var(--azul-claro) 50%,rgba(51,146,208,.55) 70%,transparent);
  pointer-events:none;
}
.cinta::before{ top:0; }
.cinta::after{ bottom:0; }
.cinta__pista{
  display:flex;
  width:max-content;
  animation:desfile 58s linear infinite;
}
.cinta:hover .cinta__pista{ animation-play-state:paused; }
.cinta__pista span{
  display:flex;
  align-items:center;
  gap:2.2rem;
  padding-inline:1.1rem;
  font-weight:500;
  font-size:.8rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .6s ease,text-shadow .6s ease;
}
.cinta__pista span.cerca{ color:var(--azul-claro); }
.cinta__pista span.viva{
  color:var(--blanco);
  text-shadow:0 0 18px rgba(111,188,238,.6),0 0 3px rgba(244,246,247,.4);
}
.cinta__pista span::after{
  content:"";
  flex:none;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--azul);
  box-shadow:0 0 8px rgba(51,146,208,.55);
  transition:background var(--t-media),box-shadow var(--t-media),transform var(--t-media);
}
.cinta__pista span.viva::after{
  background:var(--azul-claro);
  box-shadow:0 0 12px var(--azul-claro),0 0 3px var(--blanco);
  transform:scale(1.5);
}
@keyframes desfile{ to{ transform:translateX(-50%); } }

/* --------------------------------------------------------------- servicios */

.rejilla-servicios{
  display:grid;
  gap:1px;
  background:var(--borde);
  border:1px solid var(--borde);
}
@media (min-width:640px){ .rejilla-servicios{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .rejilla-servicios{ grid-template-columns:repeat(3,1fr); } }

.servicio{
  background:var(--negro);
  padding:0;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:background var(--t-media);
}
.servicio:hover{ background:var(--carbon); }

.servicio__foto{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--carbon);
}
.servicio__foto img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.9) contrast(1.03);
  transition:transform var(--t-lenta),filter var(--t-media);
}
.servicio:hover .servicio__foto img{ transform:scale(1.05); filter:saturate(1.05) contrast(1.06); }
.servicio__foto::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(14,18,20,.85),rgba(14,18,20,0) 55%);
}

.servicio__cuerpo{
  padding:1.5rem 1.5rem 1.75rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  flex:1;
}
.servicio__cuerpo p{ color:var(--gris); font-size:.94rem; line-height:1.6; }
.servicio h3{ transition:color var(--t-rapida); }
.servicio:hover h3{ color:var(--azul-claro); }

.servicio__detalle{
  margin-top:auto;
  padding-top:.9rem;
  font-size:.76rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gris-2);
  border-top:1px solid var(--borde);
}

/* --------------------------------------------------------------- proceso */

.pasos{
  display:grid;
  gap:1px;
  background:var(--borde);
  border:1px solid var(--borde);
  counter-reset:paso;
}
@media (min-width:700px){ .pasos{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .pasos{ grid-template-columns:repeat(4,1fr); } }

.paso{
  background:var(--negro-2);
  padding:2rem 1.6rem 2.2rem;
  counter-increment:paso;
  position:relative;
}
.paso::before{
  content:"0" counter(paso);
  display:block;
  font-family:"Saira",sans-serif;
  font-style:italic;
  font-weight:800;
  font-stretch:76%;
  font-size:2.6rem;
  line-height:1;
  color:var(--carbon-2);
  margin-bottom:1rem;
  transition:color var(--t-media);
}
.paso:hover::before{ color:var(--azul-hondo); }
.paso h3{ margin-bottom:.65rem; font-size:1.1rem; }
.paso p{ color:var(--gris); font-size:.92rem; }

/* --------------------------------------------------------------- antes/despues */

.comparador-caja{
  display:grid;
  gap:2.5rem;
  align-items:center;
}
@media (min-width:1000px){
  .comparador-caja{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:3.5rem; }
}

.comparador{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border:1px solid var(--borde);
  background:var(--carbon);
  touch-action:pan-y;
  user-select:none;
  cursor:ew-resize;
}
.comparador img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}
.comparador__encima{
  position:absolute;
  inset:0;
  width:100%;
  overflow:hidden;
  clip-path:inset(0 calc(100% - var(--corte,50%)) 0 0);
}
.comparador__tirador{
  position:absolute;
  top:0; bottom:0;
  left:var(--corte,50%);
  width:2px;
  background:var(--azul);
  transform:translateX(-1px);
  pointer-events:none;
}
.comparador__tirador::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:46px; height:46px;
  transform:translate(-50%,-50%);
  border:2px solid var(--azul);
  border-radius:50%;
  background:rgba(14,18,20,.75);
  backdrop-filter:blur(3px);
}
.comparador__tirador::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  z-index:1;
  width:15px; height:9px;
  transform:translate(-50%,-50%);
  background:var(--azul);
  clip-path:polygon(0 50%,35% 0,35% 35%,65% 35%,65% 0,100% 50%,65% 100%,65% 65%,35% 65%,35% 100%);
}
.comparador__rango{
  position:absolute;
  inset:0;
  width:100%;
  opacity:0;
  cursor:ew-resize;
  margin:0;
}
.comparador__rango:focus-visible{
  opacity:1;
  outline:2px solid var(--azul-claro);
  outline-offset:-2px;
}
.comparador__etiqueta{
  position:absolute;
  bottom:1rem;
  z-index:2;
  padding:.35rem .8rem;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:rgba(14,18,20,.82);
  border:1px solid var(--borde);
  color:var(--blanco);
  pointer-events:none;
}
.comparador__etiqueta--a{ left:1rem; }
.comparador__etiqueta--b{ right:1rem; color:var(--azul); border-color:var(--borde-vivo); }

/* --------------------------------------------------------------- galeria */

.filtros{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:2rem;
}
.filtro{
  padding:.6rem 1.1rem;
  min-height:44px;
  border:1px solid var(--borde);
  border-radius:var(--radio-pastilla);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gris);
  transition:color var(--t-rapida),border-color var(--t-rapida),background var(--t-rapida);
}
.filtro:hover{ color:var(--blanco); border-color:var(--gris-2); }
.filtro[aria-pressed="true"]{
  background:var(--azul);
  border-color:var(--azul);
  color:var(--negro);
  font-weight:600;
}

.galeria{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--borde);
  border:1px solid var(--borde);
}
@media (min-width:760px){ .galeria{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .galeria{ grid-template-columns:repeat(4,1fr); } }

.pieza{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--negro);
  cursor:pointer;
  display:block;
  width:100%;
  padding:0;
}
.pieza img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform var(--t-lenta),opacity var(--t-media);
}
.pieza::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(51,146,208,0);
  transition:background var(--t-media);
}
.pieza:hover img,.pieza:focus-visible img{ transform:scale(1.07); }
.pieza:hover::after,.pieza:focus-visible::after{ background:rgba(14,18,20,.32); }
.pieza__pie{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:1;
  padding:2.5rem .9rem .8rem;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:left;
  color:var(--blanco);
  background:linear-gradient(to top,rgba(14,18,20,.9),transparent);
  opacity:0;
  transform:translateY(6px);
  transition:opacity var(--t-media),transform var(--t-media);
}
.pieza:hover .pieza__pie,.pieza:focus-visible .pieza__pie{ opacity:1; transform:none; }
.pieza.oculta{ display:none; }

/* visor */
.visor{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  background:rgba(8,11,12,.985);
  display:grid;
  place-items:center;
  padding:clamp(1rem,4vw,3rem);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--t-media),visibility var(--t-media);
}
.visor.abierto{ opacity:1; visibility:visible; }
.visor img{
  max-width:100%;
  max-height:82vh;
  object-fit:contain;
  border:1px solid var(--borde);
}
.visor__pie{
  margin-top:1rem;
  text-align:center;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gris);
}
.visor__cerrar,.visor__previo,.visor__siguiente{
  position:absolute;
  display:grid;
  place-items:center;
  width:52px; height:52px;
  border:1px solid var(--borde);
  background:rgba(14,18,20,.7);
  color:var(--blanco);
  transition:border-color var(--t-rapida),color var(--t-rapida);
}
.visor__cerrar:hover,.visor__previo:hover,.visor__siguiente:hover{ border-color:var(--azul); color:var(--azul); }
.visor__cerrar{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.visor__previo{ left:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%); }
.visor__siguiente{ right:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%); }

/* --------------------------------------------------------- franja instagram */

.icono-red{
  display:none;
  place-items:center;
  width:48px; height:48px;
  border:1px solid var(--borde);
  border-radius:50%;
  color:var(--gris);
  transition:color var(--t-rapida),border-color var(--t-rapida);
}
.icono-red:hover{ color:var(--azul); border-color:var(--azul); }
@media (min-width:600px){ .icono-red{ display:grid; } }

.franja-ig{
  display:flex;
  align-items:center;
  gap:1.25rem;
  margin-top:1px;
  padding:1.5rem clamp(1.25rem,3vw,2rem);
  border:1px solid var(--borde);
  border-top:0;
  background:var(--negro);
  transition:background var(--t-media),border-color var(--t-media);
}
.franja-ig:hover{ background:var(--carbon); border-color:var(--borde-vivo); }

.franja-ig__icono{
  display:grid;
  place-items:center;
  width:54px; height:54px;
  flex:none;
  border:1px solid var(--borde-vivo);
  border-radius:var(--radio-suave);
  color:var(--azul);
  transition:background var(--t-media),color var(--t-media);
}
.franja-ig:hover .franja-ig__icono{ background:var(--azul); color:var(--negro); }

.franja-ig__texto{ display:grid; gap:.25rem; min-width:0; }
.franja-ig__texto strong{
  font-family:"Saira",sans-serif;
  font-style:italic;
  font-weight:800;
  font-stretch:76%;
  text-transform:uppercase;
  font-size:clamp(1.05rem,1rem + .5vw,1.35rem);
  line-height:1.05;
}
.franja-ig__texto span{ color:var(--gris); font-size:.9rem; line-height:1.45; }

.franja-ig__flecha{
  margin-left:auto;
  flex:none;
  color:var(--azul);
  transition:transform var(--t-media);
}
.franja-ig:hover .franja-ig__flecha{ transform:translateX(6px); }
@media (max-width:520px){ .franja-ig__flecha{ display:none; } }

/* ---------------------------------------------------------------- pilares
   Como trabajamos, dicho en cuatro puntos dentro de la agenda. */

.pilares{
  display:grid;
  gap:1px;
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
  background:var(--borde);
  border:1px solid var(--borde);
}
@media (min-width:640px){ .pilares{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .pilares{ grid-template-columns:repeat(4,1fr); } }

.pilar{
  background:var(--negro-2);
  padding:1.75rem 1.5rem 1.85rem;
  transition:background var(--t-media);
}
.pilar:hover{ background:var(--carbon); }
.pilar h3{ font-size:1.05rem; margin-bottom:.7rem; }
.pilar p{ color:var(--gris); font-size:.93rem; line-height:1.6; }

/* --------------------------------------------------------------- preguntas */

.preguntas{ max-width:860px; border-top:1px solid var(--borde); }
.pregunta{ border-bottom:1px solid var(--borde); }
.pregunta__boton{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  width:100%;
  padding:1.4rem 0;
  text-align:left;
  font-weight:600;
  font-size:clamp(1rem,.97rem + .2vw,1.12rem);
  transition:color var(--t-rapida);
}
.pregunta__boton:hover{ color:var(--azul-claro); }
.pregunta__mas{
  position:relative;
  width:20px; height:20px;
  flex:none;
}
.pregunta__mas::before,.pregunta__mas::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  background:var(--azul);
  transform:translate(-50%,-50%);
  transition:transform var(--t-media),opacity var(--t-media);
}
.pregunta__mas::before{ width:16px; height:2px; }
.pregunta__mas::after{ width:2px; height:16px; }
.pregunta__boton[aria-expanded="true"] .pregunta__mas::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.pregunta__cuerpo{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--t-media);
}
.pregunta__boton[aria-expanded="true"] + .pregunta__cuerpo{ grid-template-rows:1fr; }
.pregunta__cuerpo > div{ overflow:hidden; }
.pregunta__cuerpo p{
  color:var(--gris);
  font-size:.96rem;
  max-width:70ch;
  padding-bottom:1.4rem;
}

/* --------------------------------------------------------------- turno */

.turno{
  display:grid;
  gap:2.5rem;
}
@media (min-width:980px){
  .turno{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:4rem; }
}

/* Cada dato lleva un icono en un marco a la izquierda y, cuando es un enlace,
   toda la fila se toca (icono y texto juntos, 44px de alto como minimo). */
.datos{ display:grid; gap:1.1rem; align-content:start; }
.dato{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.95rem;
  align-items:center;
  min-height:44px;
}
.dato__icono{
  width:44px; height:44px;
  display:grid; place-items:center;
  flex:none;
  color:var(--azul-claro);
  border:1px solid var(--borde);
  border-radius:var(--radio-suave);
  background:rgba(51,146,208,.08);
  transition:border-color var(--t-media),box-shadow var(--t-media),background var(--t-media),color var(--t-media);
}
.dato__texto{ display:grid; gap:.2rem; }
.dato__clave{
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gris-2);
}
.dato__valor{ font-size:1.05rem; font-weight:500; line-height:1.35; transition:color var(--t-rapida); }
.dato__valor--chico{ font-size:.95rem; font-weight:400; color:var(--gris); }
.dato--enlace{ color:inherit; text-decoration:none; }
.dato--enlace:hover .dato__valor,
.dato--enlace:focus-visible .dato__valor{ color:var(--azul); }
.dato--enlace:hover .dato__icono,
.dato--enlace:focus-visible .dato__icono{
  border-color:var(--azul);
  color:var(--blanco);
  background:rgba(51,146,208,.22);
  box-shadow:0 0 16px rgba(51,146,208,.35);
}

.formulario{
  display:grid;
  gap:1.15rem;
  padding:clamp(1.5rem,3.5vw,2.5rem);
  border:1px solid var(--borde);
  background:var(--negro-2);
}
@media (min-width:640px){
  .formulario{ grid-template-columns:1fr 1fr; }
  .formulario .campo--ancho,.formulario .boton,.formulario .nota{ grid-column:1/-1; }
}
.campo{ display:grid; gap:.45rem; }
.campo label{
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gris);
}
.campo input,.campo select,.campo textarea{
  width:100%;
  min-height:48px;
  padding:.75rem .9rem;
  background:var(--negro);
  border:1px solid var(--borde);
  border-radius:var(--radio-suave);
  color:var(--blanco);
  font:inherit;
  font-size:1rem;
  transition:border-color var(--t-rapida);
}
.campo textarea{ min-height:110px; resize:vertical; }
.campo input::placeholder,.campo textarea::placeholder{ color:var(--gris-2); }
.campo input:hover,.campo select:hover,.campo textarea:hover{ border-color:var(--gris-2); }
.campo input:focus,.campo select:focus,.campo textarea:focus{ border-color:var(--azul); outline-offset:1px; }
.campo select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233392D0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
  cursor:pointer;
}
.nota{ font-size:.8rem; color:var(--gris-2); margin:0; }

/* --------------------------------------------------------------- pie */

.pie{
  border-top:1px solid var(--borde);
  padding-block:clamp(3rem,6vw,4.5rem) 2rem;
  background:var(--negro-2);
}
.pie__grilla{
  display:grid;
  gap:2.5rem;
  padding-bottom:2.5rem;
}
@media (min-width:760px){
  .pie__grilla{ grid-template-columns:1.4fr 1fr 1fr; gap:3rem; }
}
/* h3 y no h4: despues de los h2 de las secciones, un h4 era un salto de nivel */
.pie .pie__titulo{ font-size:.8rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gris-2); margin:0 0 1.1rem; font-stretch:100%; font-style:normal; }
.pie ul{ display:grid; gap:.15rem; }
.pie ul a,.pie ul li{ color:var(--gris); font-size:.92rem; transition:color var(--t-rapida); }
/* los enlaces del pie tambien tienen que ser comodos de tocar */
.pie ul a{ display:inline-flex; align-items:center; min-height:44px; }
.pie ul li:not(:has(a)){ padding-block:.45rem; }
.pie ul a:hover{ color:var(--azul); }
.pie__texto{ color:var(--gris); font-size:.93rem; max-width:38ch; margin-top:1.2rem; }
.pie__abajo{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1.5rem;
  justify-content:space-between;
  align-items:center;
  padding-top:1.75rem;
  border-top:1px solid var(--borde);
  font-size:.8rem;
  color:var(--gris-2);
}
.redes{ display:flex; gap:.6rem; }
.redes a{
  display:grid;
  place-items:center;
  width:44px; height:44px;
  border:1px solid var(--borde);
  border-radius:50%;
  color:var(--gris);
  transition:color var(--t-rapida),border-color var(--t-rapida);
}
.redes a:hover{ color:var(--azul); border-color:var(--azul); }

/* --------------------------------------------------------------- flotante */

.flotante{
  position:fixed;
  right:clamp(1rem,3vw,1.75rem);
  bottom:clamp(1rem,3vw,1.75rem);
  z-index:var(--z-flotante);
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.85rem 1.3rem;
  background:#25D366;
  color:#0B141A;
  border-radius:999px;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.02em;
  box-shadow:0 10px 32px rgba(0,0,0,.5);
  transform:translateY(140%);
  transition:transform var(--t-lenta),background var(--t-rapida);
}
.flotante.visible{ transform:none; }
.flotante:hover{ background:#33e277; }
.flotante span{ display:none; }
@media (min-width:520px){ .flotante span{ display:inline; } }

/* --------------------------------------------------------------- animacion */

/* El contenido arranca VISIBLE. Solo se esconde si el script pudo poner la
   clase "anima" en <html>, o sea si hay JavaScript andando para volver a
   mostrarlo. Antes era al reves y era peligroso: cualquier motivo por el que
   el observador no llegara a correr (sin JavaScript, o la pagina metida en un
   marco que el navegador no considera visible y por lo tanto no dibuja) dejaba
   la pagina entera en blanco, porque todas las secciones son .revelar. */
.anima .revelar{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
.anima .revelar.visto{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .revelar{ opacity:1; transform:none; }
  .cinta__pista{ animation:none; }
  .flotante{ transform:none; }
}

/* ==========================================================================
   DESTELLOS
   La luz barre los titulos y los botones como barre una pintura recien
   pulida. Todo el movimiento se apaga con prefers-reduced-motion y queda
   solo el resplandor estatico, que no molesta a nadie.
   ========================================================================== */

/* el degradado mide 260% del ancho: entre 0% y 100% de posicion siempre
   cubre el texto, asi que en reposo se ve solido y nunca desaparece */
@keyframes barrido{
  0%       { background-position:100% 0; }
  55%,100% { background-position:0% 0; }
}
@keyframes lustre{
  0%       { transform:translateX(-220%) skewX(-22deg); }
  50%,100% { transform:translateX(560%)  skewX(-22deg); }
}
/* El latido late en el resplandor, no en la opacidad del texto: bajarle la
   opacidad a un rotulo de 11 px lo dejaba por debajo del contraste minimo
   (4,29:1 medido con axe) durante media animacion. */
@keyframes latido{
  0%,100% { text-shadow:0 0 10px rgba(51,146,208,.35), 0 0 22px rgba(51,146,208,.12); }
  50%     { text-shadow:0 0 18px rgba(51,146,208,.8),  0 0 38px rgba(51,146,208,.38); }
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  h1,h2,h3,
  .marca__nombre,
  .franja-ig__texto strong{
    --base:var(--blanco);
    --chispa:#FFFFFF;
    background-image:linear-gradient(100deg,
      var(--base) 0%,   var(--base) 40%,
      var(--chispa) 47%, var(--chispa) 53%,
      var(--base) 60%,  var(--base) 100%);
    background-size:260% 100%;
    background-position:100% 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation:barrido 7s ease-in-out infinite;
    filter:drop-shadow(0 0 14px rgba(51,146,208,.28));
  }

  /* El titular de la portada NO lleva el recorte al texto en el h1: la
     palabra que rota (em) se anima con opacidad y desplazamiento, y Chrome
     pinta mal el recorte de un padre cuando un hijo se compone aparte (queda
     una copia fantasma de la palabra arriba del titulo). El brillo va en el
     span de las palabras fijas (.h1__luz) y la palabra en azul lleva el suyo. */
  .portada h1{
    background:none;
    -webkit-background-clip:border-box;
    background-clip:border-box;
    color:var(--blanco);
    -webkit-text-fill-color:var(--blanco);
    animation:none;
    filter:none;
  }
  .portada h1 .h1__luz{
    --base:var(--blanco);
    --chispa:#FFFFFF;
    background-image:linear-gradient(100deg,
      var(--base) 0%,   var(--base) 40%,
      var(--chispa) 47%, var(--chispa) 53%,
      var(--base) 60%,  var(--base) 100%);
    background-size:260% 100%;
    background-position:100% 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation:barrido 5.5s ease-in-out infinite;
    filter:drop-shadow(0 0 26px rgba(51,146,208,.45));
  }

  /* las palabras en azul llevan su propio barrido, si no se apagan */
  .portada h1 em{
    --base:var(--azul);
    --chispa:#C6E8FF;
    background-image:linear-gradient(100deg,
      var(--base) 0%,   var(--base) 40%,
      var(--chispa) 47%, var(--chispa) 53%,
      var(--base) 60%,  var(--base) 100%);
    background-size:260% 100%;
    background-position:100% 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation:barrido 5.5s ease-in-out infinite;
    filter:drop-shadow(0 0 26px rgba(51,146,208,.45));
  }
  .servicio:hover h3,
  .paso:hover h3{ --base:var(--azul-claro); }
}

/* rotulos y microtextos: resplandor, sin barrido */
.rotulo{
  text-shadow:0 0 16px rgba(51,146,208,.65), 0 0 34px rgba(51,146,208,.3);
}
.servicio__detalle,
.dato__clave,
.marcadores{
  text-shadow:0 0 12px rgba(51,146,208,.18);
}
.marcadores li::before,

/* enlaces del menu */
.nav__menu a{ transition:color var(--t-rapida),text-shadow var(--t-rapida); }
.nav__menu a:hover,
.nav__menu a[aria-current="true"]{ text-shadow:0 0 14px rgba(110,190,240,.85); }
.panel a:hover{ text-shadow:0 0 20px rgba(51,146,208,.8); }

/* ---------------------------------------------------------------- botones */

.boton{ position:relative; overflow:hidden; isolation:isolate; }
.boton > *{ position:relative; z-index:1; }

.boton::after{
  content:"";
  position:absolute;
  top:-60%; bottom:-60%;
  left:0;
  width:22%;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);
  transform:translateX(-220%) skewX(-22deg);
  animation:lustre 5s ease-in-out infinite;
}
.boton--fantasma::after{ background:linear-gradient(100deg,transparent,rgba(160,215,255,.34),transparent); }
.boton:hover::after{ animation-duration:1.6s; }

.boton--primario{
  box-shadow:0 0 20px rgba(51,146,208,.35), 0 6px 26px rgba(51,146,208,.22);
  transition:background var(--t-rapida),box-shadow var(--t-media),color var(--t-rapida);
}
.boton--primario:hover{
  box-shadow:0 0 32px rgba(110,190,240,.62), 0 8px 34px rgba(51,146,208,.4);
}
.boton--fantasma{ transition:border-color var(--t-rapida),color var(--t-rapida),box-shadow var(--t-media); }
.boton--fantasma:hover{ box-shadow:0 0 24px rgba(51,146,208,.3); }

/* filtros, iconos y demas superficies que se prenden */
.filtro[aria-pressed="true"]{ box-shadow:0 0 18px rgba(51,146,208,.5); }
.filtro:hover{ box-shadow:0 0 14px rgba(51,146,208,.22); }

.icono-red:hover,
.redes a:hover{ box-shadow:0 0 18px rgba(51,146,208,.42); }

.servicio:hover{ box-shadow:inset 0 0 60px rgba(51,146,208,.09); }
.franja-ig:hover{ box-shadow:0 0 30px rgba(51,146,208,.18); }
.franja-ig__icono{ box-shadow:0 0 16px rgba(51,146,208,.28); }

.comparador__tirador{ box-shadow:0 0 16px rgba(51,146,208,.85); }
.comparador__tirador::after{ box-shadow:0 0 22px rgba(51,146,208,.55); }

.pregunta__boton:hover{ text-shadow:0 0 14px rgba(110,190,240,.6); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus{ box-shadow:0 0 18px rgba(51,146,208,.28); }

/* boton flotante de WhatsApp */
.flotante{
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 0 26px rgba(37,211,102,.5), 0 10px 32px rgba(0,0,0,.5);
}
.flotante > *{ position:relative; z-index:1; }
.flotante::after{
  content:"";
  position:absolute;
  top:-60%; bottom:-60%;
  left:0;
  width:26%;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);
  transform:translateX(-220%) skewX(-22deg);
  animation:lustre 4s ease-in-out infinite;
}
.flotante:hover{ box-shadow:0 0 38px rgba(37,211,102,.8), 0 10px 34px rgba(0,0,0,.5); }

/* ---------------------------------------------------------- destello del logo
   Un punto de luz recorre el perimetro del recuadro. Se hace con un degradado
   conico girando, recortado a un anillo de 1px con mascara: asi sigue la linea
   exacta de la caja en cualquier tamano, sin depender de medidas fijas. */

@property --giro{ syntax:"<angle>"; initial-value:0deg; inherits:false; }

@keyframes girar{ to{ --giro:360deg; } }

@keyframes respiroAuto{
  0%,100%{ filter:drop-shadow(0 0 5px rgba(51,146,208,.4)); opacity:.88; }
  50%    { filter:drop-shadow(0 0 13px rgba(110,190,240,.7)); opacity:1; }
}

.marca__placa{
  position:relative;
  box-shadow:0 0 18px rgba(51,146,208,.2), inset 0 0 22px rgba(51,146,208,.07);
}
.marca__placa::before{
  content:"";
  position:absolute;
  inset:-1px;
  padding:1px;
  pointer-events:none;
  background:conic-gradient(from var(--giro),
    transparent 0deg,
    transparent 288deg,
    rgba(110,190,240,.45) 314deg,
    #EAF6FF 335deg,
    rgba(110,190,240,.45) 353deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:girar 3.8s linear infinite;
}
.marca:hover .marca__placa::before{ animation-duration:1.5s; }
.marca:hover .marca__placa{ box-shadow:0 0 28px rgba(51,146,208,.4), inset 0 0 26px rgba(51,146,208,.13); }

/* el auto late mas despacio y mas suave que el recuadro */
.marca__placa img{ animation:respiroAuto 5.5s ease-in-out infinite; }

.marca__bajada{ text-shadow:0 0 14px rgba(51,146,208,.6); }
.rotulo{ animation:latido 4.5s ease-in-out infinite; }

@media (prefers-reduced-motion:reduce){
  h1,h2,h3,
  .marca__nombre,
  .franja-ig__texto strong,
  .portada h1 .h1__luz,
  .portada h1 em,
  .rotulo{ animation:none; }
  .boton::after,
  .flotante::after{ display:none; }
}

/* ==========================================================================
   AGENDA: pedir turno
   El almanaque se retiro (el turno se pide por WhatsApp). Sus estilos
   quedaron guardados en _src/retirado/calendario.css.
   ========================================================================== */

/* ------------------------------------------- pedir turno, sin almanaque
   Un panel con el texto a la izquierda y el boton grande de WhatsApp a la
   derecha; en el telefono se apilan. */
.turno-cta{
  display:grid;
  gap:1.5rem;
  align-items:center;
  margin-top:clamp(3rem,6vw,4.5rem);
  padding:clamp(1.5rem,3.5vw,2.5rem);
  border:1px solid var(--borde);
  border-radius:var(--radio-panel);
  background:
    radial-gradient(70% 120% at 100% 50%,rgba(51,146,208,.12),transparent 70%),
    var(--negro-2);
}
@media (min-width:820px){
  .turno-cta{ grid-template-columns:minmax(0,1fr) auto; gap:2.5rem; }
}
.turno-cta .rotulo{ margin:0 0 .6rem; }
.turno-cta__titulo{
  margin:0 0 .6rem;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);
}
.turno-cta__bajada{
  margin:0;
  max-width:56ch;
  color:var(--gris);
  line-height:1.65;
}
.turno-cta__boton{
  justify-self:start;
  padding:1rem 1.6rem;
  font-size:1rem;
  white-space:nowrap;
}
@media (min-width:820px){ .turno-cta__boton{ justify-self:end; } }
@media (max-width:480px){ .turno-cta__boton{ width:100%; justify-content:center; white-space:normal; } }

/* ==========================================================================
   ASISTENTE
   Guia de navegacion, no un chat con inteligencia artificial: cada boton
   lleva a una seccion o abre WhatsApp con el mensaje ya escrito.
   ========================================================================== */

.asistente{
  position:fixed;
  right:clamp(1rem,3vw,1.75rem);
  bottom:calc(clamp(1rem,3vw,1.75rem) + 74px);
  z-index:var(--z-flotante);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.6rem;
}

@keyframes saludar{
  0%,58%,100% { transform:rotate(0deg); }
  64%         { transform:rotate(-19deg); }
  72%         { transform:rotate(11deg); }
  80%         { transform:rotate(-14deg); }
  88%         { transform:rotate(6deg); }
}
@keyframes asomar{
  from{ opacity:0; transform:translateY(8px) scale(.94); }
  to  { opacity:1; transform:none; }
}

.asistente__boton{
  display:grid;
  place-items:center;
  width:60px; height:60px;
  border-radius:50%;
  background:var(--azul);
  color:var(--negro);
  transform:translateY(160%);
  box-shadow:0 0 26px rgba(51,146,208,.5), 0 10px 30px rgba(0,0,0,.5);
  transition:transform var(--t-lenta),background var(--t-rapida),box-shadow var(--t-media);
}
.asistente.visible .asistente__boton{ transform:none; }
.asistente__boton:hover{ background:var(--azul-claro); box-shadow:0 0 38px rgba(110,190,240,.75), 0 10px 30px rgba(0,0,0,.5); }
.asistente__boton svg{ width:38px; height:31px; }
.asistente__mano{ transform-origin:31px 22px; animation:saludar 3.4s ease-in-out infinite; }

.asistente__globo{
  margin:0;
  padding:.6rem .95rem;
  max-width:15rem;
  background:var(--blanco);
  color:var(--negro);
  border-radius:14px 14px 3px 14px;
  font-size:.85rem;
  font-weight:500;
  line-height:1.35;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  animation:asomar .45s cubic-bezier(.16,1,.3,1) both;
}

.asistente__panel{
  width:min(90vw,20.5rem);
  background:var(--negro-2);
  border:1px solid var(--borde-vivo);
  box-shadow:0 22px 60px rgba(0,0,0,.6), 0 0 34px rgba(51,146,208,.18);
  animation:asomar .32s cubic-bezier(.16,1,.3,1) both;
  overflow:hidden;
}

.asistente__cabecera{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:1rem 1.1rem;
  border-bottom:1px solid var(--borde);
  background:rgba(51,146,208,.08);
}
.asistente__cara{
  display:grid;
  place-items:center;
  width:42px; height:42px;
  flex:none;
  border:1px solid var(--borde-vivo);
  border-radius:50%;
  color:var(--azul);
}
.asistente__titulo{ display:grid; gap:.1rem; min-width:0; }
.asistente__titulo strong{
  font-family:"Saira",sans-serif;
  font-style:italic;
  font-weight:800;
  font-stretch:76%;
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing:.01em;
}
.asistente__titulo span{ font-size:.76rem; color:var(--gris); }
.asistente__cerrar{
  margin-left:auto;
  display:grid;
  place-items:center;
  width:36px; height:36px;
  flex:none;
  border:1px solid var(--borde);
  border-radius:50%;
  color:var(--gris);
  transition:color var(--t-rapida),border-color var(--t-rapida);
}
.asistente__cerrar:hover{ color:var(--azul); border-color:var(--azul); }

.asistente__saludo{
  margin:0;
  padding:1rem 1.1rem .35rem;
  font-size:.9rem;
  color:var(--gris);
}

.asistente__opciones{
  display:grid;
  gap:6px;
  padding:.75rem 1.1rem 1.1rem;
}
.asistente__opciones button,
.asistente__opciones a{
  display:block;
  width:100%;
  min-height:44px;
  padding:.7rem .9rem;
  text-align:left;
  border:1px solid var(--borde);
  border-radius:var(--radio-suave);
  font-size:.88rem;
  color:var(--blanco);
  transition:border-color var(--t-rapida),background var(--t-rapida),color var(--t-rapida);
}
.asistente__opciones button:hover,
.asistente__opciones a:hover{ border-color:var(--azul); background:rgba(51,146,208,.1); color:var(--azul-claro); }
.asistente__wa{
  margin-top:.35rem;
  background:rgba(37,211,102,.12) !important;
  border-color:rgba(37,211,102,.45) !important;
  font-weight:600;
}
.asistente__wa:hover{ border-color:#25D366 !important; background:rgba(37,211,102,.2) !important; color:#63E696 !important; }

/* el WhatsApp flotante queda solo como icono redondo */
.flotante{
  width:60px; height:60px;
  padding:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  gap:0;
}
.flotante::after{ width:34%; }

@media (prefers-reduced-motion:reduce){
  .marca__placa::before,
  .marca__placa img,
  .asistente__mano,
  .asistente__panel,
  .asistente__globo{ animation:none; }
  .asistente__boton{ transform:none; }
}

/* ==========================================================================
   AJUSTES DE CELULAR
   En pantallas chicas se gana altura antes que ancho, que es el eje donde el
   dedo falla mas.
   ========================================================================== */

@media (max-width:520px){


  /* el logo tambien tiene que ser comodo de tocar */
  .marca{ padding-block:.3rem; }

  /* los dos flotantes no deben tapar el contenido en pantallas bajas */
  .flotante{ width:54px; height:54px; }
  .asistente__boton{ width:54px; height:54px; }
  .asistente__boton svg{ width:34px; height:28px; }
  .asistente{ bottom:calc(clamp(1rem,3vw,1.75rem) + 66px); }
  .asistente__globo{ max-width:13rem; font-size:.8rem; }
}

/* ==========================================================================
   CREDITO DE AUTORIA
   El isotipo va en vector con sus degradados y el nombre en texto real, para
   que no dependa de que la tipografia del otro estudio este cargada.
   ========================================================================== */

.credito{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  min-height:44px;
  padding:.35rem .6rem;
  margin-left:auto;
  border:1px solid transparent;
  border-radius:var(--radio-pastilla);
  transition:border-color var(--t-rapida),background var(--t-media);
}
.credito:hover{ border-color:var(--borde); background:rgba(244,246,247,.04); }

.credito__rotulo{
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gris-2);
  white-space:nowrap;
}

.credito__marca{ display:inline-flex; align-items:center; gap:.45rem; }

.credito__signo{
  width:17px;
  height:16px;
  flex:none;
  filter:saturate(.85) opacity(.9);
  transition:filter var(--t-media),transform var(--t-media);
}
.credito:hover .credito__signo{ filter:none; transform:translateX(2px); }

.credito__nombre{
  font-family:"Saira","Segoe UI",system-ui,sans-serif;
  font-size:.74rem;
  font-weight:200;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--gris);
  transition:color var(--t-rapida);
}
.credito__nombre strong{ font-weight:600; }
.credito:hover .credito__nombre{ color:var(--blanco); }

@media (max-width:640px){
  .credito{ margin-left:0; padding-left:0; }
  .credito:hover{ background:none; border-color:transparent; }
}

/* ==========================================================================
   REDONDEO
   Pastilla en botones y chips, circulo en los botones de icono, radio suave
   en campos y marcos. La placa del logo queda de canto vivo: es el lockup
   del manual y redondearla seria cambiar la marca.
   ========================================================================== */

.enlace-salto{ border-radius:var(--radio-pastilla); }

.visor__cerrar,
.visor__previo,
.visor__siguiente{ border-radius:50%; }

.asistente__panel{ border-radius:var(--radio-panel); }
.asistente__cara{ border-radius:50%; }

.producto__marca,
.garantia__sello,
.comparador__etiqueta{ border-radius:var(--radio-suave); }

.chip{ border-radius:var(--radio-pastilla); }

/* la galeria y el comparador comparten borde con la grilla: si se redondean,
   la linea de 1px que los separa se corta. Quedan rectos a proposito. */

/* ---------------------------------------------- ficha de servicio enlazada
   El titulo es un enlace real (navegable con teclado y anunciado por el
   lector de pantalla) y su ::after se estira sobre toda la ficha, asi que
   se puede tocar en cualquier parte sin envolver la tarjeta entera. */

.servicio--enlazado{ position:relative; }

.servicio__enlace{ color:inherit; }

/* La capa de click va sobre la ficha, no sobre el pseudo del enlace: el
   bloque contenedor de un ::after depende de la cadena de ancestros y ahi
   no cubria la tarjeta entera. El titulo sigue siendo un enlace real, asi
   que teclado y lector de pantalla no pierden nada. */
.servicio--enlazado::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  cursor:pointer;
}
.servicio--enlazado:hover .servicio__enlace{ color:var(--azul-claro); }
.servicio__enlace:focus-visible{ outline:none; }
.servicio--enlazado:has(.servicio__enlace:focus-visible){
  outline:2px solid var(--azul-claro);
  outline-offset:-2px;
}

.servicio__detalle--enlace{
  display:flex;
  align-items:center;
  gap:.45rem;
  color:var(--azul);
}
.servicio__detalle--enlace svg{
  flex:none;
  transition:transform var(--t-media);
}
.servicio--enlazado:hover .servicio__detalle--enlace{ color:var(--azul-claro); }
.servicio--enlazado:hover .servicio__detalle--enlace svg{ transform:translateX(4px); }

/* ========================================================================== */
/* SERVICIOS EN MOSAICO                                                       */
/*                                                                            */
/* El mosaico asimetrico se mantiene, pero el texto sale de arriba de la foto */
/* y baja a un panel opaco. Sobre una foto el contraste depende de que se vea */
/* atras, o sea que no hay contraste garantizado; sobre el panel el titulo    */
/* queda en 15:1 y la bajada en 7:1, muy por encima del 4.5:1 que se pide.    */
/*                                                                            */
/* La jerarquia: las piezas 1, 5 y 9 ocupan dos columnas y se acuestan, foto  */
/* a la izquierda y texto a la derecha, con el titulo mas grande. Son los     */
/* tres servicios que primero se leen. Las otras seis van en vertical.        */
/* Nueve piezas mas tres dobles son doce lugares: tres filas justas.          */
/*                                                                            */
/* El numero de orden lo pone un contador de CSS, asi que el HTML no lleva    */
/* nada que despues haya que renumerar a mano.                                */
/* ========================================================================== */

.rejilla-servicios{
  display:grid;
  grid-template-columns:1fr;
  gap:.85rem;
  background:none;
  border:0;
  counter-reset:srv;
}

.servicio{
  position:relative;
  counter-increment:srv;
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
  border:1px solid var(--borde);
  border-radius:var(--radio-panel);
  background:var(--negro-2);
  cursor:pointer;
  transition:background var(--t-media), border-color var(--t-media), transform var(--t-media), box-shadow var(--t-media);
}
.servicio:hover{
  background:var(--carbon);
  border-color:var(--borde-vivo);
  transform:translateY(-4px);
  box-shadow:0 16px 38px rgba(0,0,0,.45);
}

/* filo azul que entra desde la izquierda al pasar por arriba */
.servicio::before{
  content:"";
  position:absolute;
  inset-inline:0;
  top:0;
  height:2px;
  z-index:3;
  background:linear-gradient(90deg,var(--azul),var(--azul-claro));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t-lenta);
}
.servicio:hover::before{ transform:scaleX(1); }

.servicio__foto{
  position:relative;
  flex:none;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:0;
  background:var(--carbon);
}
/* velo suave: ya no tiene que sostener texto, solo asentar la foto */
.servicio__foto::after{
  background:linear-gradient(to top,rgba(18,24,27,.5),rgba(18,24,27,0) 60%);
}

.servicio__cuerpo{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  height:auto;
  justify-content:flex-start;
  padding:clamp(1.15rem,2.2vw,1.6rem);
}
.servicio__cuerpo::before{
  content:counter(srv,decimal-leading-zero);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.18em;
  line-height:1;
  color:var(--azul);
  transition:color var(--t-rapida);
}
.servicio:hover .servicio__cuerpo::before{ color:var(--azul-claro); }

.servicio__cuerpo h3{
  font-size:clamp(1.05rem,.98rem + .35vw,1.3rem);
  line-height:1.18;
}

/* la bajada vuelve a estar siempre a la vista: es lo que explica el servicio */
.servicio__cuerpo > p{
  max-height:none;
  opacity:1;
  overflow:visible;
  margin:0;
  color:var(--gris);
  /* en celular la ficha es ancha y el cuerpo va a 16px, que es el minimo
     comodo de lectura; recien en cuatro columnas se aprieta un poco */
  font-size:1rem;
  line-height:1.62;
}

.servicio__detalle{
  margin-top:auto;
  padding-top:1rem;
  border-top:1px solid var(--borde);
}

@media (min-width:640px){
  .rejilla-servicios{ grid-template-columns:repeat(2,1fr); }
  .servicio:nth-child(1){ grid-column:span 2; }
}

@media (min-width:1000px){
  /* Seis columnas: las anchas ocupan tres y las angostas dos. Con siete
     tarjetas cierra en tres filas llenas: dos anchas, tres angostas, dos
     anchas. Cual es ancha lo dice la clase servicio--ancho en el HTML, no
     la posicion: antes era "cada cuarta" y al sacar dos servicios quedaba
     una fila con un hueco. */
  .rejilla-servicios{ grid-template-columns:repeat(6,1fr); gap:1rem; }
  .servicio{ grid-column:span 2; }
  /* doble clase a proposito: la regla de tablet .servicio:nth-child(1)
     rige desde 640px y con una sola clase le ganaba a esta */
  .servicio.servicio--ancho{ grid-column:span 3; }
  /* Las anchas van con la foto en formato apaisado. Se probo con la foto al
     costado y no sirve: la caja queda mas alta que ancha y el recorte se
     come el auto, que es justo lo que hay que mostrar. */
  .servicio--ancho .servicio__foto{ aspect-ratio:21/9; }
  .servicio--ancho .servicio__cuerpo{
    gap:.65rem;
    padding:clamp(1.4rem,2.4vw,1.85rem);
  }
  .servicio--ancho .servicio__cuerpo > p{ max-width:52ch; }
  .servicio--ancho .servicio__cuerpo h3{
    font-size:clamp(1.2rem,1rem + .6vw,1.55rem);
  }
  .servicio__cuerpo > p{ font-size:.92rem; }
  .servicio--ancho .servicio__cuerpo > p{ font-size:.96rem; }
}

/* ------------------------------------------------------- ficha ampliada */

.vitrina{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  display:grid;
  place-items:center;
  padding:0;   /* la ficha ocupa toda la pantalla */
  background:rgba(8,11,12,.86);
  backdrop-filter:blur(14px);
  opacity:0;
  /* en reposo no puede interceptar clicks: display:grid le gana a [hidden],
     asi que la que apaga la capa es la visibilidad, igual que el visor */
  visibility:hidden;
  transition:opacity var(--t-media), visibility var(--t-media);
}
.vitrina[hidden]{ display:none; }
.vitrina.abierta{ opacity:1; visibility:visible; }

.vitrina__lamina{
  position:relative;
  width:100%;
  height:100%;
  overflow:auto;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;   /* texto, banner, boton */
  gap:0;
  border:0;
  border-radius:0;
  background:var(--negro-2);
  transform:scale(.97);
  transition:transform var(--t-lenta);
}
.vitrina.abierta .vitrina__lamina{ transform:scale(1); }

.vitrina__foto{
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--carbon);
}
.vitrina__foto img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.vitrina__texto{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  padding:clamp(1.25rem,3vw,2rem);
}
.vitrina__texto h3{ font-size:clamp(1.15rem,1rem + .7vw,1.5rem); }
.vitrina__texto p{ color:var(--gris); font-size:.96rem; line-height:1.65; margin:0; }
.vitrina__marca{
  font-size:.76rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gris-2);
}
.vitrina__accion{
  display:inline-flex;
  align-self:flex-start;
  align-items:center;
  gap:.5rem;
  margin-top:.4rem;
  padding:.72rem 1.3rem;
  border-radius:var(--radio-pastilla);
  background:var(--azul);
  color:#fff;
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
  transition:background var(--t-rapida);
}
.vitrina__accion:hover{ background:var(--azul-hondo); }
.vitrina__accion svg{ transition:transform var(--t-rapida); }
.vitrina__accion:hover svg{ transform:translateX(2px); }

.vitrina__cerrar{
  position:absolute;
  top:.75rem;
  right:.75rem;
  z-index:2;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:var(--radio-pastilla);
  background:rgba(14,18,20,.72);
  backdrop-filter:blur(6px);
  color:var(--blanco);
  cursor:pointer;
  transition:background var(--t-rapida), transform var(--t-rapida);
}
.vitrina__cerrar:hover{ background:var(--azul); transform:scale(1.08); }

.vitrina__cerrar:focus-visible,
.vitrina__accion:focus-visible{
  outline:2px solid var(--azul-claro);
  outline-offset:2px;
}

/* La ficha va apilada en una sola columna a cualquier ancho: texto, banner
   con las fotos, boton. El alto del banner se define mas abajo, en el
   bloque "la ficha: un solo album". */
.vitrina__texto{
  max-width:86ch;
  padding:1.3rem clamp(1.25rem,4vw,3rem) .7rem;
  gap:.6rem;
}
.vitrina__texto h3{ font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem); }

@media (prefers-reduced-motion:reduce){
  .servicio,
  .servicio:hover{ transform:none; }
}


/* ========================================================================== */
/* GALERIA: REPARTO DE LAS PIEZAS                                             */
/*                                                                            */
/* Estaba armada como hoja de contactos: veintitres cuadrados iguales pegados */
/* a un pixel de distancia. Con fotos parecidas entre si (veintitres primeros */
/* planos de opticas) eso se lee como una sola mancha.                        */
/*                                                                            */
/* Ahora cada pieza es una ficha con aire, borde y esquina redondeada, y las  */
/* comparaciones antes y despues ocupan el doble de ancho en formato apaisado */
/* porque son dos fotos dentro de una: en un cuadrado no se leen. El flujo va */
/* en modo denso para que las piezas anchas no dejen huecos.                  */
/* ========================================================================== */

.galeria{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-flow:row dense;
  gap:.55rem;
  background:none;
  border:0;
}
@media (min-width:760px){ .galeria{ grid-template-columns:repeat(3,1fr); gap:.7rem; } }
@media (min-width:1100px){ .galeria{ grid-template-columns:repeat(4,1fr); gap:.8rem; } }

.pieza{
  border:1px solid var(--borde);
  border-radius:var(--radio-panel);
  background:var(--negro-2);
  transition:border-color var(--t-media), transform var(--t-media), box-shadow var(--t-media);
}
.pieza:hover,
.pieza:focus-visible{
  border-color:var(--borde-vivo);
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(0,0,0,.5);
}

/* Las comparaciones son dos fotos dentro de una y hay que respetar por donde
   estan pegadas: medida la costura, g42 y g43 estan lado a lado y g44 esta una
   arriba de la otra. Recortarlas todas apaisadas le comeria una mitad a g44. */
/* dos fotos lado a lado: el doble de ancho y la mitad de alto */
.pieza[data-par="lado"]{
  grid-column:span 2;
  aspect-ratio:2/1;
}
/* dos fotos apiladas: el conjunto es cuadrado, asi que la ficha va al doble
   en las dos direcciones. En una columna sola se recortaria media foto. */
.pieza[data-par="apilado"]{
  grid-column:span 2;
  grid-row:span 2;
  aspect-ratio:1;
}

/* El pie deja de esconderse detras del cursor. En el telefono no hay cursor y
   justamente aca el pie es el dato: dice cual es el antes y cual el despues. */
.pieza__pie{
  opacity:1;
  transform:none;
  color:var(--gris);
  background:linear-gradient(to top,rgba(14,18,20,.94) 12%,rgba(14,18,20,.55) 55%,rgba(14,18,20,0));
  transition:color var(--t-media);
}
.pieza:hover .pieza__pie,
.pieza:focus-visible .pieza__pie{ color:var(--blanco); }

/* marca de comparacion, para que se distingan de las fotos sueltas */
.pieza[data-par]::before{
  content:"Antes / Después";
  position:absolute;
  top:.7rem;
  left:.7rem;
  z-index:2;
  padding:.32rem .6rem;
  border-radius:var(--radio-pastilla);
  background:rgba(51,146,208,.92);
  color:#fff;
  font-size:.63rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  pointer-events:none;
}


/* ==========================================================================
   GALERIA: LAS FOTOS DEL FILTRO, EN ABANICO

   Al entrar a un servicio se cae aca con su filtro puesto. Las fotos se abren
   como una mano de cartas: la del medio derecha y entera, las de los costados
   giradas hasta 21 grados, mas chicas y corridas hacia abajo.

   El giro sale de un punto por debajo de la carta (transform-origin), que es
   lo que hace que se abran en arco y no que roten sobre si mismas.
   ========================================================================== */

.fila{ margin-bottom:clamp(2rem,4vw,3.25rem); }

.fila__mando{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.6rem;
}
.fila__ayuda{
  margin:0;
  font-size:.76rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gris-2);
}
.fila__flechas{ display:flex; gap:.55rem; }
.fila__flecha{
  width:44px; height:44px;   /* minimo tactil: 44 */
  display:grid; place-items:center;
  padding:0; border:0;
  border-radius:var(--radio-pastilla);
  background:var(--azul); color:#fff;
  cursor:pointer;
  transition:background var(--t-rapida), transform var(--t-rapida), opacity var(--t-rapida);
}
.fila__flecha:hover{ background:var(--azul-hondo); }
.fila__flecha:active{ transform:scale(.93); }
.fila__flecha[disabled]{ opacity:.3; cursor:default; }
.fila__flecha:focus-visible{ outline:2px solid var(--azul-claro); outline-offset:2px; }

.fila__pista{
  position:relative;
  height:clamp(320px,44vw,640px);   /* la del medio, apaisada, llena el 96% de esto */
  overflow:hidden;
}
.fila__pista:focus-visible{ outline:2px solid var(--azul-claro); outline-offset:4px; }

/* La carta mide lo que dice el script (--carta-ancho / --carta-alto, que
   salen del tamano de la pista); el clamp es solo el valor de arranque
   antes de que corra el script. Misma receta que la ficha: borde luminoso
   que gira, resplandor en la del medio, paso suave de 1,1 s. */
.fila__carta{
  position:absolute;
  top:50%;
  left:50%;
  width:var(--carta-ancho, clamp(126px,19vw,230px));
  height:var(--carta-alto, clamp(126px,19vw,230px));
  margin-left:calc(var(--carta-ancho, clamp(126px,19vw,230px)) / -2);
  margin-top:calc(var(--carta-alto, clamp(126px,19vw,230px)) / -2);
  padding:0;
  overflow:hidden;
  border:2px solid transparent;
  border-radius:var(--radio-panel);
  background:
    linear-gradient(var(--negro),var(--negro)) padding-box,
    conic-gradient(from var(--giro),
      rgba(255,255,255,.14) 0deg,
      rgba(110,190,240,.95) 40deg,
      rgba(255,255,255,.14) 90deg,
      rgba(255,255,255,.14) 180deg,
      rgba(51,146,208,.9) 225deg,
      rgba(255,255,255,.14) 270deg,
      rgba(255,255,255,.14) 360deg) border-box;
  animation:giro-borde 7s linear infinite;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform-origin:50% 115%;   /* el giro sale de abajo: por eso abre en arco */
  box-shadow:0 14px 34px rgba(0,0,0,.55);
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1),
             opacity .6s ease,
             filter .9s ease,
             box-shadow .9s ease;
}
.fila__carta.a-la-vista{ opacity:1; pointer-events:auto; }
.fila__carta img{ width:100%; height:100%; object-fit:cover; user-select:none; }
.fila__carta:hover,
.fila__carta.al-medio{ border-color:transparent; }
.fila__carta.al-medio{
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 0 34px rgba(51,146,208,.5), 0 22px 50px rgba(0,0,0,.65);
}
.fila__carta:focus-visible{ outline:2px solid var(--azul-claro); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  .fila__carta{ animation:none; transition:opacity .2s ease; }
}

/* ==========================================================================
   FOTOS SIN TEXTO ENCIMA

   Ni pies, ni insignias, ni velos oscuros sobre las fotos de la galeria y de
   la fila. La foto se ve entera y sola.

   El texto no se borra del documento, se esconde: de ahi sale el pie que
   muestra el visor al ampliar y el nombre que anuncia el lector de pantalla.
   Si se quitara del HTML, el visor quedaria sin pie y cada foto pasaria a
   llamarse "boton" para quien no ve la pantalla.
   ========================================================================== */

/* --- mosaico ---------------------------------------------------------- */

.pieza__pie{
  position:absolute;
  left:0;
  top:0;
  right:auto;
  bottom:auto;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  background:none;
  opacity:1;
  transform:none;
  transition:none;
}
.pieza:hover .pieza__pie,
.pieza:focus-visible .pieza__pie{ opacity:1; color:inherit; }

/* la insignia de comparacion tambien era texto sobre la foto */
.pieza[data-par]::before{ content:none; }

/* --- fila que se arrastra --------------------------------------------- */

.fila__texto{ display:none; }
.fila__marca{ display:none; }

/* El velo existia para que se leyera el texto. Sin texto no tiene sentido
   oscurecer la foto: la respuesta al pasar por arriba ya la dan el borde
   azul, la sombra y el acercamiento. */
.fila__velo{ display:none; }

@media (hover:none){
  .fila__velo,
  .fila__texto{ display:none; }
}


/* ==========================================================================
   CINTA DE SERVICIOS: LEGIBILIDAD

   El color no era el problema: negro sobre el azul medio da 5.5:1 y la norma
   pide 4.5:1. El problema es la letra. Cursiva, condensada al 76%, en
   mayusculas y con 0,32 px de separacion entre letras: sobre un azul saturado
   eso se empasta.

   Ensanchar la cursiva no se puede. Se midio: pedirle 85% o 90% renderiza
   exactamente igual que 76%, y al 100% se cae a la cara recta y pierde la
   cursiva. La cara italica del archivo existe en un solo ancho.

   Entonces se gana por los otros tres lados: fondo mas claro (el contraste
   sube de 5,5:1 a 9:1), mas aire entre letras y un punto mas de cuerpo.
   ========================================================================== */

/* El pie del visor tambien se esconde: al ampliar una foto no queda ningun
   texto en pantalla. Igual que en la grilla, no se borra del documento porque
   es lo que describe la foto para quien no ve la pantalla, y el script lo
   sigue escribiendo ahi. */
.visor__pie{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------------------------------------- la portada que va cambiando
   Las fotos de la tarjeta van apiladas en el mismo lugar; solo la que lleva
   .puesta se ve, y el cambio es un fundido. La que esta a la vista hace un
   zoom lento mientras dura, asi la tarjeta esta siempre en movimiento. (Este
   bloque se habia perdido en una limpieza: sin el, la primera foto tapaba a
   las demas y la rotacion no se veia.) */
.servicio__foto--rota{ position:relative; }
.servicio__foto--rota img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.04);
  transform-origin:50% 50%;
  /* la que sale se desvanece; su zoom recien vuelve al inicio cuando ya no se
     ve (retardo igual al fundido), asi no pega un salto mientras se apaga */
  transition:opacity .9s ease,transform 0s linear .9s,filter var(--t-media);
}
.servicio__foto--rota img.puesta{
  opacity:1;
  transform:scale(1.14);
  /* el zoom dura mas que lo que la foto queda puesta: nunca se frena */
  transition:opacity .9s ease,transform 5s linear,filter var(--t-media);
}

/* con "reducir movimiento" la foto cambia igual, pero sin cruzarse ni zoom */
.sin-fundido .servicio__foto--rota img{ transition:none; transform:none; }

/* ------------------------------------------------ portada con profundidad
   La foto, el velo y el texto se mueven a distinta velocidad al bajar. La
   foto va un 12% mas grande: si se corriera al tamano justo, al desplazarse
   destaparia el borde de abajo.

   Se mueve con translate3d y no cambiando "top": asi el navegador lo resuelve
   en la placa de video y no rehace el calculo de posiciones en cada cuadro. */
.portada__fondo{ will-change:transform; }
.portada__fondo img{ transform:scale(1.12); transform-origin:50% 40%; }
.portada__caja{ will-change:transform,opacity; }

@media (prefers-reduced-motion:reduce){
  .portada__fondo img{ transform:none; }
}

/* enlace de apoyo dentro de la ficha, para el servicio que tenga su propio
   filtro en la galeria. Va discreto: la accion principal es pedir el turno. */
.vitrina__secundario{
  align-self:flex-start;
  margin-top:.1rem;
  font-size:.83rem;
  color:var(--azul-claro);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color var(--t-rapida);
}
.vitrina__secundario:hover{ color:var(--blanco); }
.vitrina__secundario:focus-visible{ outline:2px solid var(--azul-claro); outline-offset:2px; }
.vitrina__secundario[hidden]{ display:none; }

/* la linea que vende, arriba del titulo */
.vitrina__resultado{
  margin:0 0 .15rem;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--azul-claro);
}
.vitrina__resultado[hidden]{ display:none; }

@media (max-width:759px){
  /* en una columna la foto es un bloque 16:9 y el comparador lo llena */
  .vitrina__foto{ aspect-ratio:16/9; }
}

/* ---------------------------------------------- la galeria es solo el abanico
   El mosaico de abajo ya no se muestra: por cada filtro se ve el abanico y
   nada mas. Las piezas siguen en el HTML porque de ahi salen las fotos del
   abanico, las del visor y las de cada ficha de servicio: se esconden, no se
   borran. display:none y no visibility, para que no ocupen alto. */
#galeria{ display:none; }
.fila{ margin-bottom:0; }

/* ================================================= la ficha: un solo album
   La columna de la foto ES el abanico. La del medio va al 130% y es la foto
   grande; las de los costados, chicas y giradas. El giro nace de un punto
   por debajo de la carta (transform-origin), que es lo que las abre en arco. */

.vitrina__foto{
  position:relative;
  /* sin proporcion fija: con 16/9 el alto minimo se transfiere al ancho
     (340 x 16/9 = 604px) y la ficha se sale del celular */
  aspect-ratio:auto;
  min-height:min(92vw,420px);   /* casi cuadrada en el telefono: la carta del medio la llena */
  overflow:hidden;
  background:var(--carbon);
}
.vitrina__tira{
  position:absolute;
  inset:0 0 52px 0;      /* deja lugar a las flechas abajo (44 + aire) */
  --carta:clamp(150px,30vw,190px);
}
.vitrina__tira[hidden]{ display:none; }

.vitrina__carta{
  position:absolute;
  top:50%;
  left:50%;
  width:var(--carta);
  height:var(--carta);
  margin-left:calc(var(--carta) / -2);
  margin-top:calc(var(--carta) / -2);
  padding:0;
  overflow:hidden;
  border:1px solid var(--borde);
  border-radius:14px;
  background:var(--negro);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform-origin:50% 115%;
  box-shadow:0 12px 30px rgba(0,0,0,.55);
  transition:transform .5s cubic-bezier(.2,1.25,.4,1),
             opacity .35s ease,
             border-color var(--t-rapida);
}
.vitrina__carta.a-la-vista{ opacity:1; pointer-events:auto; }
.vitrina__carta.al-medio{ border-color:var(--borde-vivo); box-shadow:0 18px 44px rgba(0,0,0,.65); }
.vitrina__carta > img{ width:100%; height:100%; object-fit:cover; display:block; }
.vitrina__carta:hover{ border-color:var(--azul-claro); }
.vitrina__carta:focus-visible{ outline:2px solid var(--azul-claro); outline-offset:3px; }

/* la primera carta puede ser el comparador antes/despues: llena la carta */
.vitrina__carta--par{ cursor:ew-resize; }
/* nombre del par (Techo, Butacas...) arriba a la izquierda de cada comparador */
.vitrina__par-nombre{
  position:absolute;
  top:.6rem; left:.6rem;
  z-index:3;
  padding:.28rem .6rem;
  border-radius:var(--radio-pastilla);
  background:rgba(14,18,20,.72);
  border:1px solid var(--borde);
  color:var(--blanco);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  pointer-events:none;
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
}
.vitrina__par{
  position:absolute;
  inset:0;
  aspect-ratio:auto;
  border:0;
  border-radius:0;
}
.vitrina__par .comparador__etiqueta{ bottom:.6rem; padding:.25rem .55rem; font-size:.6rem; }
.vitrina__par .comparador__etiqueta--a{ left:.6rem; }
.vitrina__par .comparador__etiqueta--b{ right:.6rem; }
.vitrina__par .comparador__tirador::after{ width:36px; height:36px; }

.vitrina__mando{
  position:absolute;
  left:0; right:0; bottom:0;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  background:linear-gradient(to top,rgba(14,18,20,.9),rgba(14,18,20,0));
}
.vitrina__mando[hidden]{ display:none; }
.vitrina__flecha{
  width:44px; height:44px;   /* minimo tactil: 44 */
  display:grid; place-items:center;
  padding:0;
  border:1px solid var(--borde);
  border-radius:var(--radio-pastilla);
  background:rgba(244,246,247,.08);
  color:var(--gris);
  cursor:pointer;
  transition:color var(--t-rapida), border-color var(--t-rapida);
}
.vitrina__flecha:hover{ color:var(--blanco); border-color:var(--gris-2); }
.vitrina__flecha:focus-visible{ outline:2px solid var(--azul-claro); outline-offset:2px; }
@media (min-width:760px){
  /* el banner usa todo el ancho de la ficha y un alto segun la pantalla:
     texto arriba, banner, boton abajo tienen que entrar sin scroll en una
     pantalla comun */
  /* el banner se queda con todo el alto que dejan el texto y el boton */
  .vitrina__foto{ height:auto; min-height:320px; }
}
@media (prefers-reduced-motion:reduce){
  .vitrina__carta{ transition:opacity .2s ease; }
}

/* ------------------------------------------------ el pie de la ficha
   Debajo del banner: el boton que abre WhatsApp con el servicio ya escrito
   y, cuando corresponde, el enlace a la galeria. */
.vitrina__pie{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.9rem 1.5rem;
  padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.25rem,3vw,2rem);
}
.vitrina__pie .vitrina__accion{
  align-self:center;
  justify-content:center;
  margin:0;
  padding:.9rem 1.7rem;
  font-size:1rem;
}
.vitrina__pie .vitrina__accion svg{ flex:none; }
.vitrina__pie .vitrina__accion:hover svg{ transform:none; }
.vitrina__pie .vitrina__secundario{ align-self:center; margin:0; }
@media (max-width:640px){
  .vitrina__pie .vitrina__accion{ width:100%; }
}

/* ============================================ galerias: efecto de vidriera
   Lo que hace que la foto del medio se vea como en un showroom, en la ficha
   y en la galeria de Trabajos por igual:
   - ambiente: una copia borrosa y saturada de esa foto detras del abanico,
     que cambia con fundido (la luz sigue al auto)
   - profundidad: las de los costados van mas oscuras y apenas desenfocadas
   - respiracion: la del medio hace un zoom lentisimo mientras esta quieta
   - paralaje: en escritorio la foto sigue apenas al cursor (--px / --py)
   (hubo un destello de luz al cambiar de foto; el cliente lo pidio afuera)
   Todo con transform, opacity y filter. Con "reducir movimiento" quedan solo
   el ambiente y la profundidad, que son estaticos. */

.ambiente{
  position:absolute;
  inset:-12%;
  width:124%;
  height:124%;
  object-fit:cover;
  filter:blur(46px) saturate(1.6) brightness(.62);
  opacity:0;
  transition:opacity .9s ease;
  pointer-events:none;
  z-index:0;
}
.ambiente--lista{ opacity:.75; }

/* la viñeta oscurece los bordes; queda debajo de las cartas y encima del ambiente */
.vitrina__foto::after,
.fila__pista::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(8,11,12,.55) 100%);
}
.vitrina__foto > .vitrina__tira{ z-index:2; }
.vitrina__foto > .vitrina__mando{ z-index:3; }
.fila__pista{ border-radius:var(--radio-panel); }

/* profundidad de campo: solo la del medio va nitida y con su color */
.vitrina__carta,
.fila__carta{
  transition:transform .5s cubic-bezier(.2,1.25,.4,1),
             opacity .35s ease,
             border-color var(--t-rapida),
             filter .5s ease;
}
.vitrina__carta:not(.al-medio),
.fila__carta:not(.al-medio){ filter:brightness(.6) saturate(.85) blur(.6px); }
.vitrina__carta:not(.al-medio):hover,
.fila__carta:not(.al-medio):hover{ filter:brightness(.9) saturate(1) blur(0); }

/* la del medio respira (zoom lento) y sigue al cursor. Van en las propiedades
   sueltas scale y translate para no pisar el transform de la carta. */
.vitrina__carta.al-medio > img,
.fila__carta.al-medio > img{
  translate:calc(var(--px, 0) * -3.5%) calc(var(--py, 0) * -3.5%);
  transition:translate .35s ease-out;
  animation:respirar 9s ease-in-out infinite alternate;
}
@keyframes respirar{ from{ scale:1.06; } to{ scale:1.14; } }

/* flechas de vidrio; en escritorio aparecen al pasar el cursor por la foto */
.vitrina__flecha{
  background:rgba(244,246,247,.10);
  border-color:rgba(255,255,255,.22);
  color:var(--blanco);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
}
.vitrina__flecha:hover{ background:rgba(244,246,247,.24); border-color:rgba(255,255,255,.4); }
@media (hover:hover) and (pointer:fine){
  .vitrina__mando{ opacity:0; transition:opacity .3s ease; }
  .vitrina__foto:hover .vitrina__mando,
  .vitrina__foto:focus-within .vitrina__mando{ opacity:1; }
}

@media (max-width:640px){
  .ambiente{ filter:blur(30px) saturate(1.5) brightness(.6); }   /* menos costo en el telefono */
}
@media (prefers-reduced-motion:reduce){
  .vitrina__carta.al-medio > img,
  .fila__carta.al-medio > img{ animation:none; translate:0 0; scale:1; }
  .ambiente{ transition:none; }
}

/* ================================================= productos: la tienda
   Seis tarjetas iguales: icono, nombre, que hace, para quien y el boton de
   WhatsApp. En escritorio van de a tres, en tablet de a dos, en el telefono
   de a una. El renglon chico se pega abajo para que los botones queden
   alineados aunque los textos midan distinto. */
.rejilla-productos{
  display:grid;
  grid-template-columns:1fr;
  gap:.85rem;
}
@media (min-width:640px){ .rejilla-productos{ grid-template-columns:repeat(2,1fr); gap:1rem; } }
@media (min-width:1000px){ .rejilla-productos{ grid-template-columns:repeat(3,1fr); } }

.producto{
  display:flex;
  flex-direction:column;
  gap:.65rem;
  padding:clamp(1.3rem,2.4vw,1.7rem);
  border:1px solid var(--borde);
  border-radius:var(--radio-panel);
  background:var(--negro-2);
  transition:border-color var(--t-media), transform var(--t-media);
}
.producto:hover{ border-color:var(--borde-vivo); transform:translateY(-3px); }
.producto__marca{
  width:54px; height:54px;
  display:grid; place-items:center;
  margin-bottom:.35rem;
  color:var(--azul-claro);
  border:1px solid var(--borde);
  background:rgba(51,146,208,.08);
}
.producto h3{ margin:0; font-size:1.08rem; }
.producto > p{ margin:0; color:var(--gris); font-size:.95rem; line-height:1.6; }
.producto__pie{
  margin-top:auto;
  padding-top:.5rem;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gris-2);
}
.producto .boton{ margin-top:.5rem; }
@media (prefers-reduced-motion:reduce){ .producto, .producto:hover{ transform:none; } }

/* ================================================== prensa: la charla en video
   El video no se descarga hasta que el visitante toca (preload="none"): son
   6 MB y la mayoria no lo va a abrir. Encima del poster va un boton propio,
   porque con los controles nativos y sin precarga Chrome de escritorio no
   dibuja ningun boton grande en el medio y la pieza parecia una foto muerta.
   Si el script no corre, los controles nativos siguen ahi. */
.prensa{
  display:grid;
  gap:clamp(1.5rem,3vw,2.5rem);
  align-items:center;
}
@media (min-width:860px){
  .prensa{ grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(2rem,4vw,3.5rem); }
}
.prensa__marco{
  position:relative;
  margin:0;
  justify-self:center;
  width:100%;
  max-width:340px;
  aspect-ratio:9/16;
  overflow:hidden;
  border:1px solid var(--borde);
  border-radius:var(--radio-panel);
  background:var(--carbon);
}
.prensa__video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.prensa__play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  cursor:pointer;
  color:var(--blanco);
  background:rgba(14,18,20,.28);
  transition:background var(--t-media);
}
.prensa__play:hover,
.prensa__play:focus-visible{ background:rgba(14,18,20,.14); }
.prensa__play[hidden]{ display:none; }
.prensa__play-icono{
  width:64px; height:64px;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--negro);
  background:var(--azul);
  box-shadow:0 0 0 10px rgba(51,146,208,.18), 0 0 28px rgba(51,146,208,.5);
  transition:transform var(--t-media),box-shadow var(--t-media);
}
.prensa__play:hover .prensa__play-icono,
.prensa__play:focus-visible .prensa__play-icono{ transform:scale(1.06); box-shadow:0 0 0 14px rgba(51,146,208,.2), 0 0 34px rgba(51,146,208,.6); }
.prensa__texto{ display:grid; gap:1rem; align-content:start; }
.prensa__texto > p{ margin:0; color:var(--gris); line-height:1.75; max-width:56ch; }
.prensa__puntos{
  display:grid;
  gap:.55rem;
  margin:.2rem 0 0;
}
.prensa__puntos li{
  position:relative;
  padding-left:1.4rem;
  font-size:.92rem;
  line-height:1.6;
  letter-spacing:.01em;
  color:var(--blanco);
  max-width:52ch;
}
.prensa__puntos li::before{
  content:"";
  position:absolute;
  left:0; top:.5em;
  width:6px; height:6px;
  rotate:45deg;
  background:var(--azul);
  box-shadow:0 0 10px rgba(51,146,208,.6);
}
/* El titular de esta seccion es una frase entera y no dos palabras: al tamano
   de un h2 normal ocuparia media pantalla. Baja de cuerpo, mantiene la
   italica del resto y se lee como una declaracion. */
.titulo-frase{
  font-size:clamp(1.5rem,1.05rem + 1.7vw,2.4rem);
  line-height:1.06;
  text-transform:none;
  letter-spacing:-.005em;
  max-width:24ch;
}
/* con una frase entera arriba y una bajada corta al lado, la cabecera se
   reparte al reves que en el resto: manda el titulo */
@media (min-width:900px){
  #prensa .cabecera-seccion{ grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr); }
}
.prensa__cierre{
  margin-top:.2rem;
  color:var(--blanco);
  font-weight:500;
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  line-height:1.5;
  max-width:44ch;
}
.prensa__credito{ font-size:.85rem; color:var(--gris-2); }
.prensa__credito a{
  display:inline-flex;
  align-items:center;
  min-height:44px;   /* en el telefono tiene que poder tocarse */
  color:var(--azul-claro);
}
.prensa__credito a:hover{ color:var(--blanco); }

@media (prefers-reduced-motion:reduce){
  .prensa__play-icono,
  .prensa__play:hover .prensa__play-icono{ transform:none; }
}

/* ------------------------------------------- la tienda todavia no abrio
   Los productos quedan detras, borrosos y apagados, sin poder tocarse (el
   HTML les pone inert), y adelante flota el cartel de "Proximamente". La
   grilla sigue en el documento para conservar la estructura; el bloque se
   recorta en alto para que en el telefono no haya que pasar seis tarjetas
   borrosas, y abajo se funde con el fondo. */
.tienda{ position:relative; }
.tienda--pronto{
  max-height:clamp(420px,70vh,620px);
  overflow:hidden;
}
.tienda--pronto .rejilla-productos{
  filter:blur(7px) saturate(.6) brightness(.7);
  opacity:.55;
  pointer-events:none;
  user-select:none;
}
.tienda--pronto::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:38%;
  background:linear-gradient(to bottom,transparent,var(--negro));
  pointer-events:none;
}
.tienda__cartel{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:.6rem;
  padding:clamp(1.5rem,4vw,3rem);
  text-align:center;
}
.tienda__cartel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(55% 60% at 50% 50%,rgba(14,18,20,.92),rgba(14,18,20,.55) 60%,transparent 100%);
  pointer-events:none;
}
.tienda__cartel > *{ max-width:46ch; }
.tienda__rotulo{
  margin:0;
  font-size:.78rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--azul-claro);
}
.tienda__titulo{
  margin:0;
  font-size:clamp(2.4rem,6vw,4rem);
  font-weight:800;
  font-style:italic;
  font-stretch:76%;
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--blanco);
  text-shadow:0 0 30px rgba(51,146,208,.5),0 0 60px rgba(51,146,208,.25);
}
.tienda__texto{
  margin:0;
  color:var(--gris);
  font-size:1rem;
  line-height:1.65;
}
.tienda__cartel .boton{ margin-top:.6rem; }

/* ================================================== celular: piso de 12px
   Los rotulos, etiquetas y creditos van chicos a proposito en escritorio,
   pero en el telefono lo que baja de 12px no se lee sin acercar. Aca se
   les sube el piso sin tocar el resto de la escala. */
@media (max-width:640px){
  .rotulo,
  .dato__clave,
  .credito__rotulo{ font-size:.78rem; }
  .campo label{ font-size:.8rem; }

  .credito__nombre{ font-size:.8rem; }
  .comparador__etiqueta,
  .vitrina__par .comparador__etiqueta{ font-size:.75rem; }
}

/* ===================================== la ficha a pantalla completa
   Paso mas suave entre fotos (1,1 s, curva sin rebote), cartas mucho mas
   grandes (el banner se queda con todo el alto libre) y un borde luminoso
   que gira despacio en cada carta, con resplandor en la del medio. */
.vitrina__carta{
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1),
             opacity .6s ease,
             filter .9s ease,
             box-shadow .9s ease;
}
.vitrina__cerrar{ width:44px; height:44px; top:1rem; right:1rem; z-index:5; }
.vitrina__pie{ justify-content:center; }

/* borde luminoso: el borde va transparente y deja ver un degradado conico
   pintado en la caja del borde; el angulo del degradado gira con @property */
@property --giro{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.vitrina__carta{
  border:2px solid transparent;
  background:
    linear-gradient(var(--negro),var(--negro)) padding-box,
    conic-gradient(from var(--giro),
      rgba(255,255,255,.14) 0deg,
      rgba(110,190,240,.95) 40deg,
      rgba(255,255,255,.14) 90deg,
      rgba(255,255,255,.14) 180deg,
      rgba(51,146,208,.9) 225deg,
      rgba(255,255,255,.14) 270deg,
      rgba(255,255,255,.14) 360deg) border-box;
  animation:giro-borde 7s linear infinite;
}
.vitrina__carta:hover,
.vitrina__carta.al-medio{ border-color:transparent; }
.vitrina__carta.al-medio{
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 0 34px rgba(51,146,208,.5), 0 22px 50px rgba(0,0,0,.65);
}
@keyframes giro-borde{ to{ --giro:360deg; } }

@media (prefers-reduced-motion:reduce){
  .vitrina__carta{ animation:none; transition:opacity .2s ease; }
}

/* titulo de seccion en un solo renglon (el de "Nuestros clientes"); en
   pantallas muy angostas se deja partir para que no desborde */
.cabecera-seccion__titulo-corto{ white-space:nowrap; }
@media (max-width:480px){
  .cabecera-seccion__titulo-corto{ white-space:normal; }
}

/* ============================================= la ficha inmersiva
   La foto es la pantalla entera. El texto flota arriba a la izquierda en un
   panel de vidrio esmerilado, el boton abajo a la derecha, las flechas a los
   costados, y el abanico usa todo lo que queda en el medio: la del medio
   apaisada (4:3) y enorme, las laterales asomando detras como un mazo. El
   script mide el panel y el pie y acomoda la tira entre los dos. */
.vitrina__lamina{ grid-template-rows:auto 1fr auto; }
.vitrina__foto{ grid-area:1 / 1 / 4 / 2; height:100%; min-height:0; }

.vitrina__texto{
  grid-area:1 / 1 / 2 / 2;
  position:relative;
  z-index:4;
  justify-self:start;
  margin:clamp(1rem,2.5vh,1.5rem) clamp(1rem,3vw,2.5rem) 0;
  max-width:min(58ch, 100% - 2 * clamp(1rem,3vw,2.5rem));
  padding:.95rem 1.25rem 1rem;
  gap:.4rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(8,11,12,.58);
  -webkit-backdrop-filter:blur(16px);
          backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.vitrina__texto h3{ font-size:clamp(1.3rem,1.05rem + 1.1vw,2rem); line-height:1.05; }
.vitrina__texto p{ font-size:.92rem; line-height:1.5; }
.vitrina__marca{ font-size:.7rem; letter-spacing:.16em; color:var(--azul-claro); }
.vitrina__marca::before{
  content:"";
  display:inline-block;
  width:6px; height:6px;
  margin-right:.55rem;
  border-radius:50%;
  background:var(--azul);
  vertical-align:middle;
  box-shadow:0 0 8px rgba(51,146,208,.7);
}

.vitrina__pie{
  grid-area:3 / 1 / 4 / 2;
  position:relative;
  z-index:4;
  justify-content:flex-end;
  padding:0 clamp(1rem,3vw,2.5rem) clamp(1rem,2.5vh,1.5rem);
  pointer-events:none;
}
.vitrina__pie > *{ pointer-events:auto; }

/* las flechas van a los costados, a media altura, y no ocupan alto */
.vitrina__foto > .vitrina__mando{
  inset:0;
  height:auto;
  justify-content:space-between;
  padding:0 clamp(.6rem,1.5vw,1.25rem);
  background:none;
  pointer-events:none;
}
.vitrina__flecha{ pointer-events:auto; }

/* la carta ya no es cuadrada: el script pasa ancho y alto por separado */
.vitrina__carta{
  width:var(--carta-ancho, var(--carta));
  height:var(--carta-alto, var(--carta));
  margin-left:calc(var(--carta-ancho, var(--carta)) / -2);
  margin-top:calc(var(--carta-alto, var(--carta)) / -2);
}

@media (max-width:640px){
  /* el panel deja lugar al boton de cerrar a la derecha */
  .vitrina__texto{ margin:.85rem .85rem 0; max-width:calc(100% - 1.7rem); padding:.85rem 3.2rem .85rem 1rem; }
  .vitrina__texto p{ font-size:.88rem; }
  .vitrina__pie{ padding:0 .85rem .9rem; }
}