:root{
  --navy:#043B64;
  --navy-deep:#032B4A;
  --navy-soft:#0B4E7E;
  --orange:#FF8A18;
  --orange-dark:#E5760A;
  --celeste:#7697A0;
  --celeste-soft:#DCE5E8;
  --paper:#F1F4F6;
  --white:#FFFFFF;
  --text:#132F45;
  --text-soft:#4C6577;
  --alerta:#C6462F;

  --font-display:"Raleway","Gill Sans MT","Gill Sans",Calibri,"Trebuchet MS",sans-serif;
  --font-text:"Source Sans 3","Myriad Pro","Segoe UI",system-ui,-apple-system,sans-serif;

  --step--1:clamp(.8125rem,.78rem + .15vw,.9375rem);
  --step-0:clamp(1rem,.965rem + .17vw,1.125rem);
  --step-1:clamp(1.0625rem,1rem + .32vw,1.375rem);
  --step-2:clamp(1.3125rem,1.16rem + .72vw,1.9375rem);
  --step-3:clamp(1.5rem,1.24rem + 1.28vw,2.75rem);
  --step-4:clamp(1.875rem,1.42rem + 2.28vw,3.75rem);

  --gutter:clamp(1rem,4vw,3rem);
  --maxw:1240px;
  --sec-y:clamp(3rem,7vw,6.5rem);
  --header-h:clamp(58px,7vw,84px);
  --radius:14px;
  --radius-sm:8px;

  --ring:0 0 0 3px rgba(255,138,24,.55);
  --shadow-sm:0 2px 10px rgba(4,59,100,.08);
  --shadow-md:0 18px 40px -22px rgba(4,59,100,.45);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1rem);
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--white);
  color:var(--text);
  font-family:var(--font-text);
  font-size:var(--step-0);
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:where(ul[role="list"],ol[role="list"]){list-style:none;margin:0;padding:0}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy);
  line-height:1.14;
  margin:0 0 .5em;
  font-weight:600;
  letter-spacing:-.005em;
  overflow-wrap:break-word;
}
h1{font-size:var(--step-4);font-weight:700}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
h4{font-size:var(--step-0)}
p{margin:0 0 1em;max-width:66ch}

:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:#fff;padding:.75rem 1.25rem;
  border-radius:0 0 var(--radius-sm) 0;text-decoration:none;
}
.skip-link:focus{left:0}

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:max(var(--gutter),env(safe-area-inset-left),env(safe-area-inset-right));
}

.btn{
  --btn-bg:var(--navy);--btn-fg:#fff;--btn-bd:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.7rem 1.4rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1.5px solid var(--btn-bd);border-radius:999px;
  font-family:var(--font-display);font-weight:600;font-size:var(--step--1);
  letter-spacing:.01em;text-decoration:none;text-align:center;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn--lg{min-height:54px;padding:.85rem 1.9rem;font-size:var(--step-0)}
.btn--accent{--btn-bg:var(--orange);--btn-fg:#28190A;--btn-bd:var(--orange)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy);--btn-bd:rgba(4,59,100,.35)}
.btn--light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.5)}
.btn:active{transform:translateY(0)}

@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn--accent:hover{--btn-bg:var(--orange-dark);--btn-bd:var(--orange-dark)}
  .btn--ghost:hover{--btn-bd:var(--navy);background:rgba(4,59,100,.06)}
  .btn--light:hover{background:rgba(255,255,255,.14);--btn-bd:#fff}
  .btn:not(.btn--accent):not(.btn--ghost):not(.btn--light):hover{--btn-bg:var(--navy-soft);--btn-bd:var(--navy-soft)}
}

.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--white);
  border-bottom:1px solid rgba(4,59,100,.1);
  transition:box-shadow .2s ease;
}
.site-header.is-scrolled{box-shadow:0 6px 24px -18px rgba(4,59,100,.7)}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:var(--header-h);
}
.header__logo{display:flex;align-items:center;flex:none}
.header__logo img{width:clamp(120px,16vw,180px);height:auto}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.2rem)}
.nav__list{display:flex;align-items:center;gap:clamp(.85rem,1.8vw,1.75rem)}
.nav__list a{
  position:relative;text-decoration:none;color:var(--navy);
  font-family:var(--font-display);font-weight:500;font-size:var(--step--1);
  padding:.4rem 0;display:inline-block;white-space:nowrap;
}
.nav__list a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--orange);transition:right .22s ease;
}
.nav__list a:hover::after,.nav__list a.is-active::after{right:0}
.nav__cta{flex:none}

.nav-toggle{
  display:none;width:46px;height:46px;flex:none;
  border:1px solid rgba(4,59,100,.22);background:transparent;
  border-radius:10px;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle__bar{
  display:block;width:20px;height:2px;background:var(--navy);
  transition:transform .25s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-backdrop{
  position:fixed;inset:0;z-index:99;
  background:rgba(3,43,74,.5);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}

@media (max-width:1023px){
  .nav-toggle{display:flex}
  .nav{
    position:fixed;inset:0 0 0 auto;z-index:101;
    width:min(86vw,340px);max-width:100%;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;background:var(--navy);color:#fff;
    padding:calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
    padding-right:max(var(--gutter),env(safe-area-inset-right));
    overflow-y:auto;overscroll-behavior:contain;
    box-shadow:-20px 0 40px -30px #000;
    visibility:hidden;transform:translateX(100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s;
  }
  .nav.is-open{visibility:visible;transform:translateX(0);transition-delay:0s}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__list li + li{border-top:1px solid rgba(255,255,255,.14)}
  .nav__list a{color:#fff;font-size:var(--step-1);padding:.95rem 0;width:100%}
  .nav__cta{margin-top:1.75rem}
  .nav-backdrop.is-visible{opacity:1;pointer-events:auto}
  html.nav-open{overflow:hidden}
  body.nav-open .floats{opacity:0;pointer-events:none}
}

.hero{
  position:relative;
  padding-block:clamp(2.25rem,5.5vw,5rem) clamp(2rem,5vw,3.5rem);
  background:linear-gradient(180deg,rgba(241,244,246,.95),rgba(255,255,255,0) 72%);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../img/patron-a.png") right -50px top -30px/265px repeat;
  opacity:.45;
  -webkit-mask-image:linear-gradient(to left,#000 6%,transparent 58%);
  mask-image:linear-gradient(to left,#000 6%,transparent 58%);
}
.hero > .container{position:relative;z-index:1}
.hero__inner{
  display:grid;gap:clamp(2rem,4.5vw,3.5rem);
  grid-template-columns:1fr;align-items:center;
}
.hero__texto{min-width:0}
.hero__eyebrow{
  font-family:var(--font-display);font-weight:500;font-style:italic;
  color:var(--celeste);margin:0 0 .9rem;font-size:var(--step-0);
}
.hero__title{margin-bottom:.55em;text-wrap:balance}
.hero__lead{font-size:var(--step-1);color:var(--text-soft);max-width:36ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.75rem 0 2.25rem}
.hero__facts{
  display:grid;gap:1rem 1.75rem;margin:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  border-top:1px solid rgba(4,59,100,.14);padding-top:1.5rem;
}
.hero__facts > div{min-width:0}
.hero__facts dt{
  font-family:var(--font-display);font-weight:700;color:var(--navy);
  font-size:var(--step-0);margin-bottom:.15rem;
}
.hero__facts dd{margin:0;font-size:var(--step--1);color:var(--text-soft);line-height:1.45}

.hero__plan{
  margin:0;position:relative;width:100%;max-width:640px;margin-inline:auto;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(4,59,100,.12);
  border-radius:var(--radius);
  padding:clamp(1rem,2.4vw,1.9rem);
  box-shadow:var(--shadow-md);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.hero__plan figcaption{
  margin-top:.85rem;font-size:var(--step--1);color:var(--text-soft);
  text-align:center;font-style:italic;
}
/* --- Modelo 3D del carrito (CSS puro, sin librerias) -----------------
   Las medidas del mueble estan en "em": el font-size de .escena hace de
   escala, asi el modelo se achica solo en pantallas chicas sin tocar
   ninguna coordenada. Cada .caja lleva su posicion (--x,--y,--z) y su
   tamano (--w,--h,--d) en el atributo style, como si fuera el plano.
   -------------------------------------------------------------------- */
.escena{
  position:relative;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  font-size:clamp(5.2px,1.55vw,10px);
  width:100%;height:36em;
  perspective:130em;
  perspective-origin:50% 45%;
  touch-action:pan-y;
  cursor:grab;
  outline-offset:6px;
  --veta:repeating-linear-gradient(90deg,
    rgba(92,60,32,.16) 0 .1em,rgba(92,60,32,0) .1em .55em,
    rgba(92,60,32,.09) .55em .68em,rgba(92,60,32,0) .68em 1.7em);
}
.escena.esta-girando{cursor:grabbing}
/* Una vez que lo giro, la pista ya no hace falta */
.escena.ya-girado .escena__pista{opacity:0}

.escena__pista{
  position:absolute;right:.25rem;top:0;margin:0;
  user-select:none;-webkit-user-select:none;
  transition:opacity .45s ease;
  font-family:var(--font-display);font-size:.75rem;font-weight:500;
  letter-spacing:.03em;color:var(--text-soft);opacity:.7;pointer-events:none;
}

.modelo{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;
  transform:translateY(1em) rotateX(-13deg) rotateY(-26deg);
  will-change:transform;
}

.caja,.rueda,.piso{
  position:absolute;left:0;top:0;transform-origin:0 0 0;
  width:calc(var(--w)*1em);height:calc(var(--h)*1em);
}
.caja{
  transform-style:preserve-3d;
  transform:translate3d(calc(var(--x)*1em),calc(var(--y)*1em),calc(var(--z)*1em))
            rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
}

/* Las seis caras de una caja, armadas desde su esquina frontal
   superior izquierda; la profundidad crece hacia atras (-Z). */
.cara{
  position:absolute;left:0;top:0;transform-origin:0 0 0;
  width:calc(var(--w)*1em);height:calc(var(--h)*1em);
}
.cara--atras{transform:translate3d(0,0,calc(var(--d)*-1em))}
.cara--izq{width:calc(var(--d)*1em);transform:rotateY(90deg)}
.cara--der{width:calc(var(--d)*1em);transform:translate3d(calc(var(--w)*1em),0,0) rotateY(90deg)}
.cara--arriba{height:calc(var(--d)*1em);transform:rotateX(-90deg)}
.cara--abajo{height:calc(var(--d)*1em);transform:translate3d(0,calc(var(--h)*1em),0) rotateX(-90deg)}

/* Materiales: el tono cambia por cara para simular la luz
   (arriba mas clara, costados y fondo mas oscuros). */
.m-madera .cara{background-image:var(--veta);background-color:#B98456}
.m-madera .cara--arriba{background-color:#CFA073}
.m-madera .cara--izq,.m-madera .cara--der{background-color:#96663E}
.m-madera .cara--atras{background-color:#9C6C43}
.m-madera .cara--abajo{background-color:#6F4926}

.m-clara .cara{background-image:var(--veta);background-color:#D3A878}
.m-clara .cara--arriba{background-color:#E6C094}
.m-clara .cara--izq,.m-clara .cara--der{background-color:#B4854F}
.m-clara .cara--atras{background-color:#BE9160}
.m-clara .cara--abajo{background-color:#7A5430}

.m-oscura .cara{background-image:var(--veta);background-color:#7B5433}
.m-oscura .cara--arriba{background-color:#8E6440}
.m-oscura .cara--izq,.m-oscura .cara--der{background-color:#63422A}
.m-oscura .cara--atras{background-color:#6B4830}
.m-oscura .cara--abajo{background-color:#4E3320}

/* Toldo: franjas naranjas de la marca, mas vivas arriba que abajo */
.m-lona .cara{background-color:#E9DCCB;background-image:none}
.m-lona .cara--arriba{background-image:repeating-linear-gradient(90deg,#FF9A33 0 2.6em,#FFFCF6 2.6em 5.2em)}
.m-lona .cara--abajo{background-image:repeating-linear-gradient(90deg,#E5760A 0 2.6em,#E7D9C6 2.6em 5.2em)}
.m-lona .cara--frente,.m-lona .cara--atras{background-color:#F3E7D8}

/* Puertas del cuerpo, con su perno naranja de tirador */
.cara--puertas{display:flex;gap:.7em;padding:1.2em;box-sizing:border-box}
.puerta{
  position:relative;flex:1;
  border:.16em solid rgba(72,46,24,.55);border-radius:.35em;
  background:linear-gradient(160deg,rgba(255,240,220,.22),rgba(72,46,24,.16));
}
.puerta::after{
  content:"";position:absolute;top:50%;width:.62em;height:.62em;margin-top:-.31em;
  border-radius:50%;background:var(--orange);box-shadow:0 0 0 .1em rgba(72,46,24,.45);
}
.puerta:first-child::after{right:.7em}
.puerta:last-child::after{left:.7em}

/* Perno naranja en la cabeza de cada poste */
.poste .cara--frente::after{
  content:"";position:absolute;left:50%;top:.55em;
  width:.44em;height:.44em;margin-left:-.22em;
  border-radius:50%;background:var(--orange);
}

.rueda{
  height:calc(var(--w)*1em);border-radius:50%;
  transform:translate3d(calc(var(--x)*1em),calc(var(--y)*1em),calc(var(--z)*1em));
  background:radial-gradient(circle at 50% 50%,
    #C9A472 0 20%,#5B3D22 20% 27%,#8B6038 27% 74%,#4A3120 74% 100%);
  box-shadow:0 0 0 .1em rgba(48,30,16,.5);
}

/* Sombra en el piso: un ovalo acostado bajo el carrito */
.piso{
  transform:translate3d(calc(var(--x)*1em),calc(var(--y)*1em),calc(var(--z)*1em)) rotateX(-90deg);
  background:radial-gradient(closest-side ellipse at 50% 50%,
    rgba(4,59,100,.26),rgba(4,59,100,.10) 55%,rgba(4,59,100,0) 78%);
}

.rubros{
  display:flex;flex-wrap:wrap;gap:.55rem;
  margin:clamp(2rem,5vw,3.25rem) 0 0;
}
.rubros li{
  border:1px solid rgba(4,59,100,.2);border-radius:999px;
  padding:.42rem 1rem;font-size:var(--step--1);color:var(--navy);
  background:rgba(255,255,255,.7);
}

.section{padding-block:var(--sec-y)}
.section--paper{background:var(--paper)}
.section--navy{
  background:var(--navy);color:rgba(255,255,255,.86);
  background-image:linear-gradient(180deg,rgba(4,59,100,.74),rgba(4,59,100,.88)),url("../img/patron-a-blanco.png");
  background-size:auto,340px;
}
.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}

.section__head{margin-bottom:clamp(2rem,4vw,3rem);max-width:62ch}
.section__head h2{position:relative;padding-bottom:.5rem;margin-bottom:.7rem}
.section__head h2::after{
  content:"";position:absolute;left:0;bottom:0;width:64px;height:2px;background:var(--navy);
}
.section__head--light h2::after{background:var(--orange)}
.section__intro{color:var(--text-soft);font-size:var(--step-1);margin:0}
.section--navy .section__intro{color:rgba(255,255,255,.75)}

.cards{display:grid;gap:clamp(1rem,2.2vw,1.6rem);grid-template-columns:1fr}
.card{
  background:var(--white);border:1px solid rgba(4,59,100,.14);
  border-radius:var(--radius);padding:clamp(1.35rem,2.5vw,2rem);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.card__icon{
  width:44px;height:44px;margin-bottom:1.1rem;
  fill:none;stroke:var(--orange);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.card h3{margin-bottom:.35em}
.card p{margin:0;font-size:var(--step--1);color:var(--text-soft);line-height:1.6}

@media (hover:hover){
  .card:hover{border-color:var(--celeste);box-shadow:var(--shadow-md);transform:translateY(-3px)}
}

.split{display:grid;gap:clamp(2.2rem,5vw,4rem);grid-template-columns:1fr}
.split__main{min-width:0}
.mision{
  font-family:var(--font-display);font-size:var(--step-2);color:#fff;
  line-height:1.34;max-width:26ch;font-weight:400;
}
.vision{color:rgba(255,255,255,.75);max-width:46ch;margin-bottom:2.5rem}
.vision strong{color:#fff;font-family:var(--font-display);font-weight:600}

.bloque__titulo{font-size:var(--step-1);margin-bottom:1.25rem}
.valores{display:grid;gap:1.4rem 2rem;grid-template-columns:1fr}
.valores h4{font-size:var(--step-0);margin-bottom:.25em;font-weight:700}
.valores p{margin:0;font-size:var(--step--1);color:rgba(255,255,255,.72);line-height:1.55}

.split__aside{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.25rem);
}
.publico li + li{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.16)}
.publico h4{font-size:var(--step-0);margin-bottom:.2em;color:var(--orange)}
.publico p{margin:0;font-size:var(--step--1);color:rgba(255,255,255,.75)}

.proceso{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1.4rem,3vw,2rem);grid-template-columns:1fr;
}
.proceso li{position:relative;padding-top:1.5rem;border-top:2px solid rgba(4,59,100,.14)}
.proceso li::before{content:"";position:absolute;top:-2px;left:0;width:38%;height:2px;background:var(--orange)}
.proceso__num{
  display:block;font-family:var(--font-display);font-weight:300;font-size:2rem;
  color:var(--celeste);line-height:1;margin-bottom:.55rem;
}
.proceso h3{font-size:var(--step-0);margin-bottom:.35em}
.proceso p{margin:0;font-size:var(--step--1);color:var(--text-soft);line-height:1.6}

.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.filtro{
  border:1px solid rgba(4,59,100,.22);background:transparent;color:var(--navy);
  border-radius:999px;padding:.5rem 1.15rem;min-height:44px;cursor:pointer;
  font-family:var(--font-display);font-weight:500;font-size:var(--step--1);
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.filtro.is-active{background:var(--navy);border-color:var(--navy);color:#fff}

@media (hover:hover){
  .filtro:not(.is-active):hover{border-color:var(--navy);background:rgba(4,59,100,.06)}
}

.galeria{display:grid;gap:clamp(1rem,2.2vw,1.75rem);grid-template-columns:1fr}
.proyecto{margin:0;min-width:0}
.proyecto[hidden]{display:none}
.proyecto__img{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--celeste-soft);aspect-ratio:4/3;
}
.proyecto__img > img:first-child{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.proyecto__img--pendiente{
  display:grid;place-content:center;justify-items:center;gap:clamp(.7rem,2vw,1rem);
  padding:1.25rem;text-align:center;
  background-image:linear-gradient(180deg,rgba(241,244,246,.9),rgba(220,229,232,.94)),url("../img/patron-a.png");
  background-size:auto,170px;
}
.proyecto__img--pendiente::after{
  content:"";position:absolute;inset:10px;pointer-events:none;
  border:1.5px dashed rgba(4,59,100,.18);
  border-radius:calc(var(--radius) - 6px);
}
.proyecto__icono{
  width:clamp(52px,24%,76px);height:auto;
  fill:none;stroke:var(--celeste);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.proyecto__pernos{fill:var(--orange);stroke:none}
.proyecto__etiqueta{
  font-family:var(--font-display);font-weight:600;font-size:var(--step--1);
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  background:rgba(255,255,255,.85);border:1px solid rgba(4,59,100,.12);
  border-radius:999px;padding:.35rem 1.05rem;
}
.marca-agua{
  position:absolute;right:4.5%;bottom:5.5%;
  width:clamp(70px,22%,120px);height:auto;opacity:.6;pointer-events:none;
  filter:drop-shadow(0 1px 3px rgba(3,43,74,.45));
}
.proyecto figcaption{padding-top:1rem}
.proyecto h3{font-size:var(--step-0);margin-bottom:.25em}
.proyecto p{margin:0;font-size:var(--step--1);color:var(--text-soft)}
.galeria__nota{margin-top:2rem;color:var(--text-soft)}
.galeria__nota a{color:var(--navy);text-decoration:none;border-bottom:1.5px solid var(--orange);padding-bottom:1px}
.galeria__nota a:hover{color:var(--orange)}

@media (hover:hover){
  .proyecto:hover .proyecto__img > img:first-child{transform:scale(1.04)}
}

.cta{
  background:var(--navy-deep);color:#fff;
  padding-block:clamp(3rem,7vw,5rem);
  background-image:linear-gradient(120deg,rgba(4,59,100,.9),rgba(3,43,74,.96)),url("../img/patron-a-blanco.png");
  background-size:auto,320px;
}
.cta__inner{text-align:center;display:grid;justify-items:center}
.cta h2{color:#fff;max-width:22ch;text-wrap:balance}
.cta p{color:rgba(255,255,255,.78);max-width:52ch}
.cta__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.5rem}

.contacto{display:grid;gap:clamp(2.2rem,5vw,3.5rem);grid-template-columns:1fr}
.form__row{display:grid;gap:1rem;grid-template-columns:1fr}
.field{display:block;margin-bottom:1rem;min-width:0}
.field > span{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:var(--step--1);color:var(--navy);margin-bottom:.35rem;
}
.field input,.field select,.field textarea{
  width:100%;min-height:50px;padding:.7rem .9rem;
  background:var(--white);border:1.5px solid rgba(4,59,100,.22);
  border-radius:var(--radius-sm);
  font-family:var(--font-text);font-size:max(16px,var(--step-0));
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field textarea{min-height:auto;resize:vertical;line-height:1.6}
.field select{
  appearance:none;-webkit-appearance:none;padding-right:2.75rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% - 2px),calc(100% - 14px) calc(50% - 2px);
  background-size:6px 6px;background-repeat:no-repeat;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,138,24,.18);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:var(--alerta);box-shadow:0 0 0 3px rgba(198,70,47,.14);
}
.form__error{color:var(--alerta);font-size:var(--step--1);margin:.25rem 0 0}
.form__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}
.form__nota{font-size:var(--step--1);color:var(--text-soft);margin-top:.9rem}
.form__ok{
  border-left:3px solid var(--orange);background:var(--paper);
  padding:1.25rem 1.4rem;border-radius:var(--radius-sm);margin-top:1.5rem;
}
.form__ok h3{font-size:var(--step-0);margin-bottom:.3em}
.form__ok p{margin:0;font-size:var(--step--1);color:var(--text-soft)}

.contacto__datos{
  background:var(--paper);border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2.25rem);min-width:0;
}
.contacto__datos h3{font-size:var(--step-1)}
.datos{margin-bottom:2rem}
.datos li + li{margin-top:1.1rem}
.datos span{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:var(--step--1);color:var(--celeste);margin-bottom:.1rem;
}
.datos a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(4,59,100,.25);overflow-wrap:anywhere}
.datos a:hover{border-color:var(--orange)}
.datos p{margin:0;font-size:var(--step--1);color:var(--text-soft)}
.datos__redes-titulo{margin-top:clamp(1.5rem,4vw,2rem);margin-bottom:.9rem}

.redes{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr))}
.redes a{
  display:flex;align-items:center;gap:.6rem;min-height:46px;
  padding:.55rem .85rem;background:var(--white);
  border:1px solid rgba(4,59,100,.14);border-radius:999px;
  text-decoration:none;color:var(--navy);font-size:var(--step--1);
  transition:border-color .18s ease,transform .18s ease;
}
.redes svg{
  width:21px;height:21px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}

@media (hover:hover){
  .redes a:hover{border-color:var(--orange);transform:translateY(-2px)}
}

.site-footer{background:var(--navy);color:rgba(255,255,255,.75);padding-top:clamp(2.5rem,6vw,4rem)}
.footer__inner{
  display:grid;gap:2.25rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  padding-bottom:2.5rem;
}
.footer__col{min-width:0}
.footer__brand img{width:112px;height:auto}
.footer__brand p{margin:1rem 0 0;font-style:italic;font-size:var(--step--1);color:rgba(255,255,255,.65)}
.site-footer h3{color:#fff;font-size:var(--step-0);margin-bottom:.9rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.site-footer a{text-decoration:none;font-size:var(--step--1);color:rgba(255,255,255,.78);overflow-wrap:anywhere}
.site-footer a:hover{color:var(--orange)}
.footer__legal{
  border-top:1px solid rgba(255,255,255,.16);
  padding-block:1.25rem calc(1.25rem + env(safe-area-inset-bottom));
}
.footer__legal p{margin:0;font-size:var(--step--1);color:rgba(255,255,255,.55)}

.floats{
  position:fixed;z-index:90;
  right:max(1rem,env(safe-area-inset-right));
  bottom:calc(1rem + env(safe-area-inset-bottom));
  display:grid;gap:.6rem;justify-items:end;
  transition:opacity .25s ease;
}
.float{
  display:flex;align-items:center;gap:0;
  width:54px;height:54px;padding:0;overflow:hidden;
  background:var(--navy);color:#fff;border-radius:999px;text-decoration:none;
  box-shadow:0 12px 26px -12px rgba(3,43,74,.9);
  transition:width .28s cubic-bezier(.4,0,.2,1),background-color .2s ease;
}
.float svg{
  width:26px;height:26px;margin:0 14px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.float span{
  font-family:var(--font-display);font-weight:600;font-size:.92rem;
  white-space:nowrap;opacity:0;transition:opacity .2s ease;padding-right:18px;
}
.float--wa{background:var(--orange);color:#28190A}
.float:focus-visible{width:172px}
.float:focus-visible span{opacity:1}

@media (hover:hover){
  .float:hover{width:172px}
  .float:hover span{opacity:1}
  .float--wa:hover{background:var(--orange-dark)}
}

.reveal{opacity:0;transform:translateY(18px)}
.reveal.is-visible{
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);
}

@media (max-width:399px){
  .hero__actions .btn,.cta__actions .btn,.form__actions .btn,.nav__cta{width:100%}
  .rubros li{font-size:.8rem;padding:.35rem .8rem}
  .float{width:50px;height:50px}
  .float svg{width:24px;height:24px;margin:0 13px}
  .proceso__num{font-size:1.75rem}
}

@media (min-width:520px){
  .proceso{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:560px){
  .valores{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:600px){
  .cards,.galeria{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:640px){
  .form__row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:820px){
  .proceso{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:960px){
  .hero__inner{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}
  .split,.contacto{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
  .contacto{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .bloque__titulo{margin-top:2.75rem}
  .split__aside .bloque__titulo{margin-top:0}
}

@media (min-width:1000px){
  .cards,.galeria{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:1024px){
  .nav-backdrop{display:none}
  .site-header{
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  }
}

@media (min-width:1120px){
  .proceso{grid-template-columns:repeat(5,minmax(0,1fr))}
}

@media (min-width:1500px){
  :root{--maxw:1340px}
  .valores{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:1900px){
  :root{--maxw:1440px;--gutter:clamp(2rem,3vw,4rem)}
}

@media (max-width:760px){
  .hero::before{
    opacity:.3;
    -webkit-mask-image:radial-gradient(125% 52% at 100% 0%,#000 0%,transparent 72%);
    mask-image:radial-gradient(125% 52% at 100% 0%,#000 0%,transparent 72%);
  }
}

@media (max-width:600px){
  .footer__legal{padding-bottom:calc(5rem + env(safe-area-inset-bottom))}
}

@media (orientation:landscape) and (max-height:520px){
  .hero{padding-block:2rem}
  .floats{gap:.45rem}
  .float{width:46px;height:46px}
  .float svg{width:22px;height:22px;margin:0 12px}
  .nav{padding-top:calc(var(--header-h) + .75rem)}
  .nav__list a{padding:.7rem 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.is-visible{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover,.redes a:hover{transform:none}
  .proyecto:hover .proyecto__img > img:first-child{transform:none}
}

@media print{
  .site-header,.floats,.nav-backdrop,.cta__actions,.form__actions,.filtros{display:none}
  body{color:#000;background:#fff}
  .section--navy,.cta{background:#fff;color:#000}
  .section--navy h2,.section--navy h3,.section--navy h4,.mision,.cta h2,.cta p{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}


/* ============================================================
   CAPA DE COLOR  ·  agregada 2026-09-07
   Todo lo de abajo usa la paleta del manual (navy, naranja,
   celeste) y va al final a proposito: son solo ajustes de
   color sobre lo ya construido, se pueden borrar en bloque.
   ============================================================ */

:root{
  --celeste-dark:#4E7481;
  --arena:#FFF6EC;
  --arena-2:#FFE9D2;
}

/* Linea de marca en el borde superior del header (no toca el
   fondo, asi el blur del escritorio sigue funcionando) */
.site-header{
  background-image:linear-gradient(90deg,var(--orange),#F5B25A 30%,var(--celeste) 64%,var(--navy-soft));
  background-repeat:no-repeat;
  background-size:100% 3px;
  background-position:top left;
}

/* --- Hero: luz naranja arriba a la derecha, celeste abajo --- */
.hero{
  background:
    radial-gradient(58% 54% at 88% 6%,rgba(255,138,24,.18),transparent 64%),
    radial-gradient(50% 48% at 4% 94%,rgba(118,151,160,.24),transparent 68%),
    linear-gradient(180deg,rgba(241,244,246,.95),rgba(255,255,255,0) 72%);
}

/* El eyebrow deja de ser texto suelto y pasa a ser pildora */
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  background:linear-gradient(135deg,rgba(255,138,24,.16),rgba(255,138,24,.06));
  border:1px solid rgba(255,138,24,.32);
  color:var(--orange-dark);
  font-style:normal;font-weight:600;font-size:var(--step--1);
  letter-spacing:.02em;
  padding:.4rem 1rem;border-radius:999px;
}
.hero__eyebrow::before{
  content:"";width:8px;height:8px;flex:none;
  background:var(--orange);border-radius:2px;transform:rotate(45deg);
}

/* Cada dato del hero con su propio acento */
.hero__facts dt{display:flex;align-items:center;gap:.5rem}
.hero__facts dt::before{
  content:"";width:9px;height:9px;flex:none;
  border-radius:2px;transform:rotate(45deg);background:var(--orange);
}
.hero__facts > div:nth-child(2) dt::before{background:var(--celeste)}
.hero__facts > div:nth-child(3) dt::before{background:var(--navy-soft)}

.hero__plan{box-shadow:var(--shadow-md),0 0 0 6px rgba(255,138,24,.06)}

/* Rubros: pildoras con tinte rotativo en vez de todas blancas */
.rubros li:nth-child(3n+1){background:rgba(255,138,24,.09);border-color:rgba(255,138,24,.3)}
.rubros li:nth-child(3n+2){background:rgba(118,151,160,.14);border-color:rgba(118,151,160,.4)}
.rubros li:nth-child(3n){background:rgba(4,59,100,.07);border-color:rgba(4,59,100,.24)}

/* Subrayado de titulo de seccion: barra degradada, no linea gris */
.section__head h2::after{
  width:76px;height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--orange),var(--celeste));
}
.section__head--light h2::after{background:linear-gradient(90deg,var(--orange),rgba(255,255,255,.7))}

/* --- Tarjetas de servicios: icono con chip de color y barra
       superior que se completa al pasar el mouse --- */
.card{position:relative;overflow:hidden}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--orange);
  transform:scaleX(.24);transform-origin:left center;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.card__icon{
  box-sizing:content-box;
  width:1.625rem;height:1.625rem;padding:.6875rem;
  border-radius:.8125rem;
  background:rgba(255,138,24,.13);
  stroke:var(--orange-dark);
}
.cards .card:nth-child(3n+2)::before{background:var(--celeste)}
.cards .card:nth-child(3n+2) .card__icon{background:rgba(118,151,160,.18);stroke:var(--celeste-dark)}
.cards .card:nth-child(3n)::before{background:var(--navy-soft)}
.cards .card:nth-child(3n) .card__icon{background:rgba(4,59,100,.1);stroke:var(--navy)}

@media (hover:hover){
  .card:hover::before{transform:scaleX(1)}
}

/* --- Proceso: fondo calido y numeros dentro de un chip --- */
#proceso{background:linear-gradient(180deg,var(--arena),#FFFDFB 65%,var(--white))}
.proceso li::before{
  background:linear-gradient(90deg,var(--orange),rgba(255,138,24,0));
  transition:width .35s ease;
}
.proceso__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:.8125rem;
  font-size:1.2rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  box-shadow:0 10px 20px -14px rgba(229,118,10,.95);
}
.proceso li:nth-child(3n+2)::before{background:linear-gradient(90deg,var(--celeste),rgba(118,151,160,0))}
.proceso li:nth-child(3n+2) .proceso__num{background:linear-gradient(135deg,#6E93A0,var(--celeste-dark));box-shadow:0 10px 20px -14px rgba(78,116,129,.95)}
.proceso li:nth-child(3n)::before{background:linear-gradient(90deg,var(--navy-soft),rgba(11,78,126,0))}
.proceso li:nth-child(3n) .proceso__num{background:linear-gradient(135deg,var(--navy-soft),var(--navy));box-shadow:0 10px 20px -14px rgba(4,59,100,.95)}

@media (hover:hover){
  .proceso li:hover::before{width:100%}
}

/* --- Galeria: los placeholders dejan de ser todos grises --- */
.galeria .proyecto:nth-child(3n+1) .proyecto__img--pendiente{
  background-image:linear-gradient(180deg,rgba(255,246,236,.92),rgba(255,233,210,.94)),url("../img/patron-a.png");
}
.galeria .proyecto:nth-child(3n+1) .proyecto__icono{stroke:#D98B33}
.galeria .proyecto:nth-child(3n+2) .proyecto__img--pendiente{
  background-image:linear-gradient(180deg,rgba(236,243,245,.92),rgba(206,223,229,.94)),url("../img/patron-a.png");
}
.galeria .proyecto:nth-child(3n+2) .proyecto__icono{stroke:var(--celeste-dark)}
.galeria .proyecto:nth-child(3n) .proyecto__img--pendiente{
  background-image:linear-gradient(180deg,rgba(233,239,244,.92),rgba(206,219,231,.94)),url("../img/patron-a.png");
}
.galeria .proyecto:nth-child(3n) .proyecto__icono{stroke:var(--navy-soft)}
.proyecto__etiqueta{
  background:rgba(255,255,255,.92);
  border-color:rgba(255,138,24,.35);
  color:var(--orange-dark);
}

/* --- CTA con brillo naranja --- */
.cta{
  background-image:
    radial-gradient(62% 78% at 84% 12%,rgba(255,138,24,.3),transparent 62%),
    linear-gradient(120deg,rgba(4,59,100,.9),rgba(3,43,74,.96)),
    url("../img/patron-a-blanco.png");
  background-size:auto,auto,320px;
}

/* --- Boton naranja con volumen --- */
.btn--accent{
  background-image:linear-gradient(135deg,#FF9C32,#F07A05);
  border-color:#F07A05;
  box-shadow:0 12px 24px -16px rgba(240,122,5,.95);
}

@media (hover:hover){
  .btn--accent:hover{background-image:linear-gradient(135deg,#F58B14,#D96A00)}
}

/* --- Bloque de datos de contacto: calido, no gris --- */
.contacto__datos{
  background:linear-gradient(160deg,var(--arena),#F4F8F9 70%);
  border:1px solid rgba(255,138,24,.16);
}
.datos span{color:var(--orange-dark)}

/* --- Footer con la misma linea de marca arriba --- */
.site-footer{
  background-image:linear-gradient(90deg,var(--orange),#F5B25A 30%,var(--celeste) 64%,var(--navy-soft));
  background-repeat:no-repeat;
  background-size:100% 4px;
  background-position:top left;
}

@media (prefers-reduced-motion:reduce){
  .card::before{transform:scaleX(1);transition:none}
  .proceso li::before,.proceso li:hover::before{transition:none}
}

@media print{
  .site-header,.site-footer,.cta,#proceso{background-image:none}
  .card::before,.proceso li::before{display:none}
}

/* Credito de autoria en el pie */
.footer__legal{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:.5rem 1.5rem;
}
.footer__credito{
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
  margin:0;font-size:var(--step--1);color:rgba(255,255,255,.55);
}
.footer__gs{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:600;color:rgba(255,255,255,.9);
}
.footer__gs img{width:auto;height:1.625rem;flex:none;opacity:.95}

@media (max-width:600px){
  .footer__legal{justify-content:flex-start}
}


/* ============================================================
   RESPONSIVE FINO  ·  2026-09-16
   Ajustes para los extremos: celulares de 280 a 400 px,
   celulares acostados y monitores 2K / 4K. Va al final para
   ganarle a las reglas generales.
   ============================================================ */

/* Modelo 3D: se escala con el ancho de SU tarjeta (no con el de la
   pantalla) y con la altura de la ventana, asi no se sale de la
   tarjeta ni se come un celular acostado. Los navegadores viejos que
   no entienden "cqi" se quedan con la regla anterior. */
.hero__plan{container-type:inline-size;max-width:40rem}
.escena{
  height:40em;
  margin-top:1.15rem;
  font-size:min(clamp(4px,2.15cqi,.8125rem),2vh);
}
.modelo{transform:translateY(-.3em) rotateX(-13deg) rotateY(-26deg)}

/* La pista va arriba de la escena, fuera del area del modelo, para que
   nunca quede encima del toldo cuando el carrito se agranda. */
.escena__pista{top:-1.15rem;right:0}

/* --- Celulares chicos --- */
@media (max-width:400px){
  .hero__title{font-size:clamp(1.55rem,7.6vw,1.875rem)}
  .hero__eyebrow{
    font-size:.75rem;letter-spacing:.01em;line-height:1.35;
    padding:.4rem .85rem;border-radius:.9rem;
  }
}
@media (max-width:300px){
  .hero__eyebrow{font-size:.6875rem;gap:.4rem;padding-inline:.7rem}
}

/* Filtros de proyectos: en celular pasan a ser una fila deslizable
   (como en las apps) en vez de apilarse en tres renglones. */
@media (max-width:520px){
  .filtros{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    margin-inline:calc(var(--gutter) * -1);
    padding:.25rem var(--gutter) .45rem;
    scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - 2.5rem),transparent);
            mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - 2.5rem),transparent);
  }
  .filtros::-webkit-scrollbar{display:none}
  .filtro{flex:none;scroll-snap-align:start}
}

/* --- Monitores grandes (2K, ultrawide, 4K a escala 100 %) ---
   Todo el sitio esta medido en rem, asi que subir la letra base
   agranda textos, botones y espacios en proporcion, y el ancho
   maximo crece para no dejar una franja angosta en el medio. */
@media (min-width:2200px){
  html{font-size:112.5%}
  :root{--maxw:1640px;--header-h:5.25rem}
  .header__logo img{width:12rem}
}
@media (min-width:2800px){
  html{font-size:131.25%}
  :root{--maxw:1920px}
}
@media (min-width:3400px){
  html{font-size:150%}
  :root{--maxw:2200px}
}


/* ============================================================
   FOTOS DEL TALLER  ·  2026-09-21
   Fotos reales en: pasos del proceso, galeria "Desde el taller",
   aside de Nosotros y fondo del CTA. Cada <img> puede traer
   --foco en su style para elegir que parte de la foto se ve
   cuando el recuadro la recorta.
   ============================================================ */

.proceso__foto img,.taller__foto img,.aside__foto img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:var(--foco,50% 50%);
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
[data-visor]{cursor:zoom-in}

@media (hover:hover){
  .proceso__foto:hover img,.taller__foto:hover img,.aside__foto a:hover img{transform:scale(1.045)}
}

/* --- Pasos del proceso: foto arriba, numero montado sobre la foto --- */
.proceso li{padding-top:0;border-top:0}
.proceso li::before{display:none}
.proceso__foto{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:4/5;border-radius:var(--radius);
  background:var(--celeste-soft);box-shadow:var(--shadow-sm);
}
.proceso__num{
  display:flex;position:relative;z-index:1;
  margin:-1.25rem 0 .8rem .9rem;
  outline:.3rem solid #FFF8F0;
}

/* --- Galeria "Desde el taller": mosaico de 2 columnas en celular
       y de 4 en escritorio. Las fotos verticales ocupan dos filas. --- */
.taller__grilla{
  display:grid;gap:clamp(.6rem,1.4vw,1rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(5,clamp(8.5rem,38vw,17rem)) auto;
  grid-template-areas:
    "madera madera"
    "diseno tablon"
    "diseno tablon"
    "tornillos taladro"
    "sketch sketch"
    "nota nota";
}
.t-madera{grid-area:madera}
.t-diseno{grid-area:diseno}
.t-tablon{grid-area:tablon}
.t-tornillos{grid-area:tornillos}
.t-taladro{grid-area:taladro}
.t-sketch{grid-area:sketch}
.t-nota{grid-area:nota}

@media (min-width:900px){
  .taller__grilla{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(3,clamp(11rem,17vw,17.5rem));
    grid-template-areas:
      "madera madera diseno tablon"
      "tornillos taladro diseno tablon"
      "nota nota sketch sketch";
  }
}

.taller__foto{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  border-radius:var(--radius);background:var(--celeste-soft);
}
.taller__foto::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:50%;
  background:linear-gradient(to top,rgba(3,43,74,.6),rgba(3,43,74,0));
  pointer-events:none;
}
.taller__etiqueta{
  position:absolute;left:.85rem;bottom:.7rem;z-index:1;
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-display);font-weight:600;font-size:var(--step--1);
  letter-spacing:.02em;color:#fff;
  text-shadow:0 1px 8px rgba(3,43,74,.5);
}
.taller__etiqueta::before{
  content:"";width:.45rem;height:.45rem;flex:none;
  border-radius:2px;background:var(--orange);transform:rotate(45deg);
}

.taller__nota{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.6rem;
  padding:clamp(1.25rem,2.6vw,2rem);border-radius:var(--radius);
  color:rgba(255,255,255,.8);background-color:var(--navy);
  background-image:
    radial-gradient(70% 90% at 100% 0%,rgba(255,138,24,.3),transparent 62%),
    linear-gradient(135deg,rgba(4,59,100,.9),rgba(3,43,74,.97)),
    url("../img/patron-a-blanco.png");
  background-size:auto,auto,260px;
}
.taller__nota h3{margin:0;color:#fff;font-size:var(--step-2);text-wrap:balance}
.taller__nota p{margin:0;font-size:var(--step--1);max-width:40ch}
.taller__nota .btn{margin-top:.35rem}

/* --- Nosotros: la foto ocupa el borde superior del recuadro --- */
.aside__foto{
  --pad:clamp(1.4rem,3vw,2.25rem);
  position:relative;
  margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 1.6rem;
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  overflow:hidden;
}
.aside__foto a{display:block;aspect-ratio:5/4;overflow:hidden}
.aside__foto figcaption{
  position:absolute;left:.9rem;bottom:.85rem;pointer-events:none;
  font-family:var(--font-display);font-weight:600;font-size:var(--step--1);color:#fff;
  padding:.35rem .9rem;border-radius:999px;
  background:rgba(3,43,74,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* --- CTA con la foto de fondo: en escritorio el texto va a la
       izquierda y la persona se ve a la derecha; en celular la foto
       vertical queda arriba y el texto abajo. --- */
.cta--foto{
  position:relative;overflow:hidden;isolation:isolate;
  background-color:var(--navy-deep);background-image:none;
  padding-block:clamp(3.5rem,8vw,6.5rem);
}
.cta__foto,.cta__foto img{position:absolute;inset:0;width:100%;height:100%}
.cta__foto{z-index:-2}
/* La foto (pieza lijada + lijadora) no cubre todo el fondo: en escritorio
   es un panel en la mitad derecha que se funde con el azul donde va el
   texto; en celular y tablet es una franja arriba del texto. En los dos
   casos se ven completas la tabla y la lijadora. */
.cta__foto img{object-fit:cover;object-position:50% 40%}
.cta--foto .cta__inner{text-align:left;justify-items:start}
.cta--foto h2{max-width:16ch}
.cta--foto p{max-width:34ch}
.cta--foto .cta__actions{justify-content:flex-start}

@media (min-width:960px){
  .cta__foto{left:auto;right:0;width:56%}
  .cta--foto::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(90deg,
      rgba(3,43,74,1) 0%,rgba(3,43,74,1) 42%,rgba(3,43,74,.5) 48%,rgba(3,43,74,.12) 56%,rgba(3,43,74,0) 64%);
  }
}

@media (max-width:959px){
  .cta--foto{--franja:clamp(14rem,60vw,24rem);padding-top:calc(var(--franja) - 1.5rem)}
  .cta__foto{bottom:auto;height:var(--franja)}
  .cta--foto::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,
      rgba(3,43,74,0) 0%,rgba(3,43,74,.08) calc(var(--franja) * .45),rgba(3,43,74,1) var(--franja));
  }
}

@media (max-width:519px){
  .proceso__foto{aspect-ratio:16/10}
}

/* --- Visor de fotos (se abre al tocar cualquier foto) --- */
.visor{
  width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgba(2,24,42,.94);color:#fff;
  touch-action:pinch-zoom;
}
.visor::backdrop{background:rgba(2,24,42,.6)}
.visor[open]{display:grid;place-items:center}
html:has(.visor[open]){overflow:hidden}
.visor__marco{
  margin:0;display:grid;justify-items:center;gap:.9rem;
  padding:clamp(3.5rem,6vw,4.5rem) clamp(.75rem,6vw,5.5rem) clamp(1rem,3vw,2rem);
  max-width:100%;max-height:100%;
}
.visor__img{
  max-width:100%;max-height:calc(100svh - 11rem);width:auto;height:auto;
  border-radius:var(--radius-sm);box-shadow:0 30px 60px -30px #000;
  animation:visorEntra .35s ease;
}
.visor__pie{
  max-width:60ch;text-align:center;margin:0;
  font-size:var(--step--1);color:rgba(255,255,255,.82);
}
.visor__cuenta{
  position:absolute;top:1.1rem;left:1.25rem;margin:0;
  font-family:var(--font-display);font-size:var(--step--1);color:rgba(255,255,255,.6);
}
.visor__btn{
  position:absolute;display:grid;place-items:center;
  width:3rem;height:3rem;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;
  font-size:1.6rem;line-height:1;
  transition:background-color .18s ease,border-color .18s ease;
}
.visor__btn:hover{background:var(--orange);border-color:var(--orange);color:#28190A}
.visor__cerrar{top:.75rem;right:.75rem}
.visor__ant,.visor__sig{top:50%;margin-top:-1.5rem}
.visor__ant{left:clamp(.5rem,2vw,1.5rem)}
.visor__sig{right:clamp(.5rem,2vw,1.5rem)}
.visor.es-unica .visor__ant,.visor.es-unica .visor__sig{display:none}

@media (max-width:600px){
  /* En celular las flechas bajan al pie para no tapar la foto */
  .visor__ant,.visor__sig{top:auto;bottom:1rem;margin-top:0}
  .visor__marco{padding-bottom:5rem}
  .visor__img{max-height:calc(100svh - 14rem)}
}

@keyframes visorEntra{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .visor__img{animation:none}
  .proceso__foto img,.taller__foto img,.aside__foto img{transition:none}
}

@media print{
  .cta__foto,.visor{display:none}
  .taller__grilla{display:block}
  .taller__foto{display:inline-block;width:32%;margin:0 1% 1% 0;aspect-ratio:1}
}


/* ============================================================
   PROYECTOS REALES  ·  2026-09-22
   Cada proyecto muestra su modelo 3D (video sin sonido, en bucle,
   con barra para adelantar y atrasar) y las fotos del mueble
   terminado.
   ============================================================ */

/* --- Proyectos: modelo 3D a un lado, informacion y fotos al otro --- */
.casos{display:grid;gap:clamp(3rem,7vw,5.5rem)}
.caso{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.caso__modelo,.caso__info{min-width:0}

@media (min-width:900px){
  .caso{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .caso:nth-child(even) .caso__modelo{order:2}
}

.video3d{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid rgba(4,59,100,.1);
  border-radius:var(--radius);box-shadow:var(--shadow-md);
}
.video3d video{
  display:block;width:100%;height:auto;
  max-height:min(76vh,38rem);object-fit:contain;background:#fff;
}
.video3d__sello{
  position:absolute;top:.85rem;left:.85rem;
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-display);font-weight:700;font-size:.75rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--navy);
  background:rgba(255,255,255,.92);border:1px solid rgba(4,59,100,.14);
  border-radius:999px;padding:.3rem .75rem;pointer-events:none;
}
.video3d__sello::before{
  content:"";width:.5rem;height:.5rem;border-radius:2px;
  background:var(--orange);transform:rotate(45deg);
}

.video3d__controles{
  display:flex;align-items:center;gap:.8rem;
  padding:.65rem .9rem;background:#F7F9FA;
  border-top:1px solid rgba(4,59,100,.08);
}
.video3d__boton{
  flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;
  border:0;border-radius:999px;background:var(--navy);color:#fff;cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
.video3d__boton:hover{background:var(--orange);color:#28190A}
.video3d__boton svg{width:1.1rem;height:1.1rem;fill:currentColor}
.video3d__icono-pausa{display:none}
.video3d.esta-reproduciendo .video3d__icono-pausa{display:block}
.video3d.esta-reproduciendo .video3d__icono-play{display:none}
.video3d__tiempo{
  flex:none;min-width:4.2ch;text-align:right;
  font-family:var(--font-display);font-size:var(--step--1);
  font-variant-numeric:tabular-nums;color:var(--text-soft);
}

/* Barra de avance: la parte recorrida va en naranja */
.video3d__barra{
  --avance:0%;
  flex:1;min-width:0;height:1.75rem;margin:0;
  background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.video3d__barra::-webkit-slider-runnable-track{
  height:.4rem;border-radius:999px;
  background:linear-gradient(to right,var(--orange) var(--avance),rgba(4,59,100,.16) var(--avance));
}
.video3d__barra::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:1.1rem;height:1.1rem;margin-top:-.35rem;border-radius:50%;
  background:#fff;border:3px solid var(--orange);
  box-shadow:0 2px 6px rgba(4,59,100,.25);
}
.video3d__barra::-moz-range-track{height:.4rem;border-radius:999px;background:rgba(4,59,100,.16)}
.video3d__barra::-moz-range-progress{height:.4rem;border-radius:999px;background:var(--orange)}
.video3d__barra::-moz-range-thumb{
  width:.85rem;height:.85rem;border-radius:50%;
  background:#fff;border:3px solid var(--orange);
}
.video3d__barra:focus-visible{outline:none;box-shadow:var(--ring);border-radius:999px}

.caso__rubro{
  margin:0 0 .55rem;font-family:var(--font-display);font-weight:700;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dark);
}
.caso__info h3{font-size:var(--step-3);margin-bottom:.45em}
.caso__info > p:not([class]){color:var(--text-soft)}

/* El primer rasgo (desarmable / con ruedas) va destacado: es la marca */
.caso__rasgos{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.1rem 0 1.6rem}
.caso__rasgos li{
  border:1px solid rgba(4,59,100,.18);background:#fff;border-radius:999px;
  padding:.35rem .9rem;font-size:var(--step--1);color:var(--navy);
}
.caso__rasgos li:first-child{background:var(--orange);border-color:var(--orange);color:#28190A;font-weight:600}

.caso__subtitulo{
  display:flex;align-items:center;gap:.7rem;margin:0 0 .75rem;
  font-family:var(--font-display);font-weight:600;color:var(--navy);
}
.caso__subtitulo::after{content:"";flex:1;height:1px;background:rgba(4,59,100,.14)}

.caso__fotos{display:grid;gap:.6rem;grid-template-columns:repeat(4,minmax(0,1fr))}
.caso__fotos--una{grid-template-columns:1fr}
.caso__foto{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  aspect-ratio:1;border-radius:var(--radius-sm);background:var(--celeste-soft);
}
.caso__fotos--una .caso__foto{aspect-ratio:16/9}
.caso__foto img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:var(--foco,50% 50%);
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.caso__foto::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:55%;
  background:linear-gradient(to top,rgba(3,43,74,.65),rgba(3,43,74,0));pointer-events:none;
}
.caso__foto span{
  position:absolute;left:.55rem;bottom:.4rem;z-index:1;
  font-family:var(--font-display);font-weight:600;font-size:.75rem;
  letter-spacing:.02em;color:#fff;
}

@media (hover:hover){
  .caso__foto:hover img{transform:scale(1.06)}
}

@media (max-width:520px){
  .caso__fotos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caso__fotos--una{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .caso__foto img{transition:none}
}

@media print{
  .video3d__controles{display:none}
}


/* ============================================================
   SIN PARPADEO AL CARGAR  ·  2026-09-24
   El script de la cabecera marca la pagina antes del primer dibujo.
   Asi las secciones ya nacen ocultas (y no aparecen para esconderse
   enseguida, que era lo que se veia como un parpadeo).
   Cada regla lleva :not(.is-visible) para que deje de aplicar apenas
   el elemento se revela: sin eso, ".proceso li" pesaba mas que
   ".is-visible" y los pasos del proceso quedaban invisibles.
   ============================================================ */

.con-animacion .section__head:not(.is-visible),
.con-animacion .card:not(.is-visible),
.con-animacion .proceso li:not(.is-visible),
.con-animacion .taller__grilla > :not(.is-visible),
.con-animacion .caso:not(.is-visible),
.con-animacion .split__aside:not(.is-visible),
.con-animacion .contacto__datos:not(.is-visible),
.con-animacion .hero__facts:not(.is-visible){opacity:0;transform:translateY(18px)}

.con-animacion .is-visible{
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);
}


/* ============================================================
   FOTOS QUE CARGAN RAPIDO  ·  2026-10-05
   Cada foto viene en WebP (con JPEG de respaldo) y trae en su style
   una version diminuta y difuminada (--lqip) que se ve al instante
   mientras llega la foto nitida, que se dibuja encima.
   ============================================================ */

.proceso__foto img,.taller__foto img,.aside__foto img,.caso__foto img,.cta__foto img{
  background-image:var(--lqip,none);
  background-size:cover;background-repeat:no-repeat;
  background-position:var(--foco,50% 50%);
}

/* El visor muestra la miniatura ya cargada mientras baja la grande */
.visor__img{
  background-color:rgba(255,255,255,.06);
  background-size:100% 100%;background-repeat:no-repeat;
}


/* ============================================================
   PROCESO SIN PASOS DESCOLGADOS  ·  2026-10-07
   Con 5 pasos, la ultima fila de la cuadricula queda incompleta en
   2 y en 3 columnas. Se arma la grilla al doble de columnas para
   poder centrar esa ultima fila en vez de dejarla pegada a la izquierda.
   ============================================================ */
@media (min-width:520px) and (max-width:819px){
  .proceso{grid-template-columns:repeat(4,minmax(0,1fr))}
  .proceso li{grid-column:span 2}
  .proceso li:nth-child(5){grid-column:2 / span 2}
}
@media (min-width:820px) and (max-width:1119px){
  .proceso{grid-template-columns:repeat(6,minmax(0,1fr))}
  .proceso li{grid-column:span 2}
  .proceso li:nth-child(4){grid-column:2 / span 2}
}

/* Atributos del inicio: siempre en filas parejas (2 x 2 o 4 en fila), nunca 3 + 1 */
.hero__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:680px) and (max-width:959px){
  .hero__facts{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:2400px){
  .hero__facts{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:299px){
  .hero__facts{grid-template-columns:1fr}
}

/* ============================================================
   MENU MOVIL  ·  2026-10-07
   El panel arranca debajo de la cabecera: el logo y la X de cerrar
   quedan siempre a la vista. El scroll se bloquea en <html> (no en
   <body>), porque en <body> rompia la cabecera fija y, si la pagina
   estaba bajada, la cabecera desaparecia al abrir el menu.
   ============================================================ */
@media (max-width:1023px){
  .nav{top:var(--header-h);padding-top:1.5rem}
}
@media (max-width:1023px) and (orientation:landscape) and (max-height:520px){
  .nav{padding-top:.75rem}
}