/* Speciale · terminación alta costura
   Una última capa de precisión óptica, ritmo y tactilidad. */

:root{
  --couture-ink:#11110f;
  --couture-paper:#f7f6f1;
  --couture-line:rgba(17,17,15,.18);
  --couture-gold:#9b7b43;
  --couture-ease:cubic-bezier(.22,1,.36,1);
}

html{background:var(--couture-paper)}
body{
  color:var(--couture-ink);
  background:var(--couture-paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{color:#fff;background:#292620}

/* Una sola firma de movimiento: el filo dorado revela el nombre sin que las
   letras compitan con una segunda coreografía. */
.portada.portadaTipografica .portadaNombre,
.portada.portadaTipografica .portadaNombre>span{
  animation:none!important;
}
.portada.portadaTipografica .portadaNombre>span{
  opacity:1!important;
  transform:none!important;
}

/* Los títulos se componen como titulares editoriales, no como bloques web. */
.portadaCategoria strong,
.serviciosIntro h2,
.primerTrazoIntro h2,
.evidencia h2,
.conceptoEditorial h2,
.origenCabecera h2,
.metodoStandalone h2,
.preguntasSpeciale h2,
footer#contacto>h2{
  text-wrap:balance;
  font-kerning:normal;
  font-optical-sizing:auto;
}
.serviciosIntro>span,
.primerTrazoIntro>span,
.evidencia .rotulo,
.conceptoEditorial small,
.origenCabecera>span,
.metodoStandalone>.tiempo{
  color:rgba(17,17,15,.62);
  letter-spacing:.22em!important;
}

/* Cabecera más ligera y precisa: una línea, una marca, ningún ruido. */
.nav{
  border-bottom:1px solid rgba(17,17,15,.10)!important;
  box-shadow:none!important;
}
.nav nav a{
  position:relative;
  transition:color .3s ease,opacity .3s ease!important;
}
.nav nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .42s var(--couture-ease);
}
.nav nav a:hover::after,.nav nav a:focus-visible::after{
  transform:scaleX(1);
  transform-origin:left;
}

/* Ritmo de lectura: filetes finos y espacios ópticamente constantes. */
.serviciosStory,.primerTrazo,.evidencia,.origen,.preguntasSpeciale{
  border-top-color:var(--couture-line)!important;
}
.capacidadesCompactas,.marcasGrid,.preguntasLista{
  border-top-color:rgba(17,17,15,.28)!important;
}
.capacidadesCompactas>a,
.preguntasLista details{
  border-bottom-color:var(--couture-line)!important;
}
.capacidadesCompactas>a{
  transition:background-color .35s ease,padding-left .45s var(--couture-ease)!important;
}
.capacidadesCompactas>a:hover,.capacidadesCompactas>a:focus-visible{
  background:rgba(17,17,15,.025)!important;
  padding-left:clamp(10px,1vw,18px)!important;
}
.capacidadesCompactas>a>em{color:var(--couture-gold)!important}

/* La fotografía gana presencia sin recurrir a efectos ostentosos. */
.marcasGrid article,.conceptoEditorial article{overflow:hidden}
.marcasGrid article img,.conceptoEditorial article img{
  transition:transform 1s var(--couture-ease),filter .8s ease!important;
  transform:scale(1.001);
}
.marcasGrid article:hover img,.conceptoEditorial article:hover img{
  transform:scale(1.025);
  filter:saturate(.88) contrast(1.025);
}
.marcasGrid article h3,.conceptoEditorial article h3{
  text-wrap:balance;
}

/* Controles con tactilidad sobria y foco visible. */
a,button,input,select,textarea,summary{outline-offset:5px}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:1px solid var(--couture-gold)!important;
}
.reunionForm input,.reunionForm select,.reunionForm textarea,
.trazoFormulario input,.trazoFormulario textarea{
  border-radius:0!important;
  transition:border-color .25s ease,background-color .25s ease!important;
}
.reunionForm input:focus,.reunionForm select:focus,.reunionForm textarea:focus,
.trazoFormulario input:focus,.trazoFormulario textarea:focus{
  border-color:rgba(255,255,255,.72)!important;
}
.reunionForm button,.trazoControles button{
  transition:transform .35s var(--couture-ease),background-color .25s ease,color .25s ease!important;
}
.reunionForm button:hover,.trazoControles button:hover{transform:translateY(-2px)}

/* Escritorio: limita las líneas largas y conserva aire de catálogo. */
@media(min-width:901px){
  .serviciosIntro,.primerTrazoIntro,.evidencia>header,.origenCabecera{
    column-gap:clamp(54px,7vw,128px)!important;
  }
  .preguntasSpeciale{grid-template-columns:minmax(280px,4fr) minmax(520px,8fr)!important}
  footer#contacto>p{max-width:46ch!important}
}

/* Tablet: se evita la zona gris entre el gran lienzo y la composición móvil. */
@media(min-width:701px) and (max-width:900px){
  .portada.portadaTipografica .portadaEditorialCentro{
    width:min(460px,calc(100% - 68px))!important;
  }
  .capacidadesCompactas>a{grid-template-columns:72px minmax(210px,.8fr) 1fr!important}
  .preguntasSpeciale{gap:48px!important}
}

/* Móvil: más respiración tipográfica y menos rigidez en la portada. */
@media(max-width:700px){
  .nav{padding-inline:20px!important}
  .portada.portadaTipografica{min-height:150svh!important}
  .portada.portadaTipografica::before,
  .portada.portadaTipografica::after{
    top:80svh!important;
    height:70svh!important;
  }
  .portada.portadaTipografica .portadaNombre{top:10%!important}
  .portada.portadaTipografica .portadaEditorialCentro{
    top:32svh!important;
    padding-inline:clamp(22px,7vw,30px)!important;
  }
  .portadaEditorialCentro strong{
    max-width:14ch!important;
    font-size:clamp(30px,8.45vw,39px)!important;
    line-height:1.01!important;
  }
  .portadaEditorialCentro>p.portadaPromesa{
    max-width:32ch!important;
    font-size:10.5px!important;
    letter-spacing:.07em!important;
  }
  .portadaEditorialCentro>a.ctaPrincipal{
    min-height:44px!important;
    font-size:10px!important;
  }
  .portada.portadaTipografica .portadaEditorialCentro::before{
    top:48svh!important;
  }
  .portada.portadaTipografica .portadaEditorialCentro::after{display:none!important}
  .portada.portadaTipografica .portadaEditorialCentro>p.portadaPromesa{
    top:68svh!important;
    max-width:13ch!important;
    font-size:clamp(34px,10vw,42px)!important;
    line-height:.98!important;
    letter-spacing:-.025em!important;
  }
  .serviciosStory,.primerTrazo,.evidencia,.origen,
  .principiosPropios,.metodoStandalone,.preguntasSpeciale,footer#contacto{
    padding-left:clamp(22px,6.5vw,28px)!important;
    padding-right:clamp(22px,6.5vw,28px)!important;
  }
  .serviciosIntro h2,.primerTrazoIntro h2,.evidencia h2,
  .origenCabecera h2,.metodoStandalone h2,.preguntasSpeciale h2,
  footer#contacto>h2{
    font-size:clamp(34px,9.5vw,42px)!important;
    line-height:1.02!important;
    letter-spacing:-.032em!important;
  }
  .capacidadesCompactas>a:hover,.capacidadesCompactas>a:focus-visible{padding-left:8px!important}
  .marcasGrid article h3{font-size:clamp(24px,6.8vw,30px)!important}
  .preguntasLista summary{font-size:clamp(22px,6.4vw,28px)!important;line-height:1.12!important}
  footer#contacto .footerSocial>a{min-height:96px!important}
}

/* Los teléfonos estrechos necesitan una portada y un archivo de casos propios. */
@media(max-width:380px){
  .portada.portadaTipografica{min-height:154svh!important}
  .portada.portadaTipografica::before,
  .portada.portadaTipografica::after{height:74svh!important}
  .portada.portadaTipografica .portadaNombre{
    max-width:calc(100vw - 28px)!important;
    font-size:clamp(48px,16.4vw,62px)!important;
  }
  .portada.portadaTipografica .portadaEditorialCentro{padding-inline:20px!important}
  .portadaEditorialCentro strong{font-size:clamp(29px,8.6vw,34px)!important}
  .marcasGrid{grid-template-columns:1fr!important;gap:40px!important}
  .evidencia .marcasGrid article img{aspect-ratio:4/3!important}
  .marcasGrid article h3{font-size:30px!important}
  .marcasGrid article p{font-size:14px!important;line-height:1.55!important}
}

@media(prefers-reduced-motion:reduce){
  .marcasGrid article img,.conceptoEditorial article img,
  .capacidadesCompactas>a,.nav nav a::after,.reunionForm button,.trazoControles button{
    transition:none!important;
  }
}