/* ==========================================================================
   ReCordis — sistema visual
   Color sacado de las fotos del lugar: el verde del parque manda, el rojo es
   el del mantel sobre el que pasan todas las actividades.
   ========================================================================== */

:root{
  /* superficies */
  --papel:        #F2F0EC;   /* cremita: el revoque de la casa */
  --papel-hondo:  #E8E4DC;   /* banda hundida */
  --papel-alto:   #FBF9F6;   /* tarjeta elevada */
  /* tinta */
  --tinta:        #1B1917;   /* negro calido, del color de las vigas */
  --humo:         #666055;   /* texto secundario; 4.9 sobre la banda hundida */
  --linea:        #DDD8D0;
  /* acentos */
  --mantel:       #A62B21;   /* el rojo del mantel = el rojo de marca, asentado */
  --mantel-vivo:  #C4342A;
  --sobre-mantel: #FCF7F5;
  --mantel-claro: #E0715C;   /* rojo para texto chico sobre fondo oscuro */
  --sobre-tinta:  #E0715C;   /* acento sobre la banda .cierre, que usa --tinta de fondo:
                                en oscuro --tinta se aclara, y el rojo tiene que oscurecerse
                                con el, o la cejilla queda en 2,6 de contraste */
  --parque:       #47543C;   /* el cesped en sombra */
  --noche:        #1A1713;   /* banda del recorrido */
  --sobre-noche:  #F2EFE8;

  /* tipografia */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --texto:   "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* escala
     Toda subio un 6% en 2026-09: la letra chica costaba a quien mira el sitio,
     que suele ser un hijo de 55 o la propia persona mayor. En los clamp() se
     corrieron el minimo, el maximo y la parte fija del preferido; el vw queda
     igual, asi la pendiente entre pantalla chica y grande es la de siempre.
     La medida de 60ch se agranda sola con la letra, y esta bien. */
  --t-micro: .8125rem;
  --t-chico: 1rem;
  --t-base:  1.125rem;
  --t-guia:  clamp(1.124rem, 1.06rem + .38vw, 1.357rem);
  --t-h3:    clamp(1.251rem, 1.113rem + .5vw, 1.537rem);
  --t-h2:    clamp(1.823rem, 1.166rem + 2.3vw, 3.18rem);
  --t-h1:    clamp(2.226rem, 1.272rem + 3.6vw, 4.399rem);
  --t-lema:  clamp(1.961rem, 1.06rem + 3.3vw, 3.922rem);

  /* ritmo */
  --paso:    clamp(56px, 7vw, 106px);
  --canal:   clamp(20px, 5vw, 64px);
  --ancho:   1320px;
  --medida:  62ch;

  --curva:   cubic-bezier(.2,.7,.3,1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papel:#16140F; --papel-hondo:#1E1B15; --papel-alto:#232019;
    --tinta:#EFEBE2; --humo:#A0988B; --linea:#2F2A23;
    --mantel:#E0715C; --mantel-vivo:#EE8571; --sobre-mantel:#14160F; --sobre-tinta:#A62B21;
    --parque:#9DB596;
    --noche:#100E0A; --sobre-noche:#F2EFE8;
  }
}
:root[data-theme="dark"]{
  --papel:#16140F; --papel-hondo:#1E1B15; --papel-alto:#232019;
  --tinta:#EFEBE2; --humo:#A0988B; --linea:#2F2A23;
  --mantel:#E0715C; --mantel-vivo:#EE8571; --sobre-mantel:#14160F; --sobre-tinta:#A62B21;
  --parque:#9DB596;
  --noche:#100E0A; --sobre-noche:#F2EFE8;
}

/* --------------------------------------------------------------- base --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:var(--t-base);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
p{margin:0}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:500;
            line-height:1.1; letter-spacing:-.014em; text-wrap:balance}
h2{font-size:var(--t-h2); max-width:18ch}
/* en las internas el titulo de la seccion es el h1 de la pagina */
.tramo h1{font-size:var(--t-h2); max-width:18ch}
a{color:inherit}
:focus-visible{outline:3px solid var(--mantel); outline-offset:3px; border-radius:2px}

.env{max-width:var(--ancho); margin-inline:auto; padding-inline:var(--canal)}
.medida{max-width:var(--medida)}
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
               overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------ piezas --- */
.cejilla{display:block; font-size:var(--t-micro); font-weight:600;
         letter-spacing:.19em; text-transform:uppercase; color:var(--mantel);
         margin:0 0 18px}
.guia{font-size:var(--t-guia); color:var(--humo)}
.pie{margin-top:11px; font-size:var(--t-chico); color:var(--humo)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
     min-height:48px; padding:13px 26px;
     font-family:var(--texto); font-size:var(--t-chico); font-weight:600;
     text-decoration:none; cursor:pointer; border:0;
     background:var(--mantel); color:var(--sobre-mantel);
     transition:background .18s var(--curva), transform .18s var(--curva)}
.btn:hover{background:var(--mantel-vivo); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--linea{background:transparent; color:var(--tinta);
            box-shadow:inset 0 0 0 1.5px var(--linea)}
.btn--linea:hover{background:transparent; color:var(--mantel);
                  box-shadow:inset 0 0 0 1.5px var(--mantel)}
.botones{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}

/* ------------------------------------------------------------- barra --- */
.barra{position:sticky; top:0; z-index:50;
       background:color-mix(in srgb, var(--papel) 90%, transparent);
       backdrop-filter:blur(14px);
       border-bottom:1px solid var(--linea)}
.barra__fila{display:flex; align-items:center; gap:26px; min-height:72px}
/* el logo es el enlace a la home, y en el telefono era el unico que habia:
   flex con min-height para que el blanco tactil llegue a 48 px */
.marca{display:flex; flex-direction:column; justify-content:center; min-height:48px;
       margin-right:auto; text-decoration:none; line-height:1.05}
.marca__nombre{display:block; font-family:var(--display); font-size:1.5rem;
               font-weight:600; letter-spacing:-.022em}
.marca__nombre em{font-style:normal; color:var(--mantel)}
.marca__lema{display:block; font-family:var(--display); font-style:italic;
             font-size:.78rem; color:var(--humo); letter-spacing:.005em}
.barra nav{display:flex; gap:26px}
.barra nav a{display:inline-flex; align-items:center; min-height:44px;
             font-size:var(--t-chico); text-decoration:none; color:var(--humo);
             border-bottom:1.5px solid transparent;
             transition:color .18s var(--curva), border-color .18s var(--curva)}
.barra nav a:hover{color:var(--tinta); border-bottom-color:var(--mantel)}
.barra nav a[aria-current]{color:var(--tinta); border-bottom-color:var(--mantel)}

/* El menu de mano. Hasta septiembre de 2026 abajo de 900 px la barra escondia
   el nav y no ponia nada en su lugar: desde un telefono las cuatro paginas
   internas eran literalmente inalcanzables. */
.barra__boton{display:none; align-items:center; gap:10px;
              min-height:48px; min-width:48px; padding:12px 10px;
              font-family:var(--texto); font-size:var(--t-chico); font-weight:600;
              color:var(--tinta); background:transparent; border:0; cursor:pointer}
.barra__rayas{position:relative; display:block; width:20px; height:2px;
              background:currentColor}
.barra__rayas::before,.barra__rayas::after{content:""; position:absolute; left:0;
              width:20px; height:2px; background:currentColor;
              transition:transform .22s var(--curva)}
.barra__rayas::before{top:-6px}
.barra__rayas::after{top:6px}
.barra__boton[aria-expanded="true"] .barra__rayas{background:transparent}
.barra__boton[aria-expanded="true"] .barra__rayas::before{transform:translateY(6px) rotate(45deg)}
.barra__boton[aria-expanded="true"] .barra__rayas::after{transform:translateY(-6px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){
  .barra__rayas::before,.barra__rayas::after{transition:none}
}

@media (max-width:900px){
  .barra nav{display:none}
  .marca__lema{display:none}
  .barra__boton{display:inline-flex}
  .barra nav.abierto{display:grid; position:absolute; left:0; right:0; top:100%;
                     padding:4px var(--canal) 16px; gap:0;
                     background:var(--papel);
                     border-bottom:1px solid var(--linea);
                     box-shadow:0 16px 26px -20px rgb(20 18 15 / .55)}
  .barra nav.abierto a{min-height:54px; font-size:var(--t-base);
                       color:var(--tinta); border-bottom:1px solid var(--linea)}
  .barra nav.abierto a:last-child{border-bottom:0}
}
@media (max-width:520px){
  /* el logo, el menu y "Escribinos" no entran juntos: el WhatsApp ya esta
     fijo abajo a la derecha y repetido en la cinta de arriba */
  .barra__fila > .btn{display:none}
}

/* ------------------------------------------------------------ pórtico --- */
.portico{padding-block:clamp(48px,6vw,92px) clamp(60px,8vw,112px)}
.portico__reja{display:grid; gap:clamp(32px,5vw,72px); align-items:center;
               grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
.portico h1{font-size:var(--t-h1); max-width:14ch}
.portico h1 span{display:block; font-size:.44em; font-weight:400;
                 color:var(--humo); letter-spacing:-.005em; margin-top:.62em;
                 line-height:1.3}
.portico .guia{margin-top:26px; max-width:46ch}
.portico__foto{position:relative}
/* El portico ya no lleva una foto suelta sino el pase, que trae su propio
   encuadre por imagen. Una regla aca le ganaba en especificidad y anulaba el
   foco de cada foto. */
@media (min-width:901px){
  /* La foto respira dentro del contenedor. Pegada al borde del viewport se
     veia como un error de maqueta, no como una decision. */
  .portico__reja{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
}
@media (max-width:900px){
  .portico__reja{grid-template-columns:1fr}
  .portico__foto{margin-inline:calc(var(--canal) * -1)}
}

/* -------------------------------------------------------------- lema --- */
.lema{background:var(--papel-hondo)}
.lema__reja{display:grid; gap:clamp(30px,5vw,76px); align-items:center;
            grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
            padding-block:var(--paso)}
.lema__frase{font-family:var(--display); font-style:italic; font-weight:400;
             font-size:var(--t-lema); line-height:1.14; letter-spacing:-.018em;
             max-width:15ch}
.lema__frase b{font-style:normal; font-weight:500; color:var(--mantel)}
.lema__nota{margin-top:26px; max-width:42ch; color:var(--humo)}
.lema img{width:100%; aspect-ratio:1.23; object-fit:cover}
@media (max-width:880px){ .lema__reja{grid-template-columns:1fr} }

/* --------------------------------------------------------- secciones --- */
.tramo{padding-block:var(--paso)}
.tramo--hondo{background:var(--papel-hondo)}
/* el tamaño vive en el elemento: cualquier seccion lo hereda, con .tramo o sin el */
.tramo__intro{margin-top:22px}

/* --------------------------------------------------------- el mosaico --- */
/* Composición editorial, no una grilla de tarjetas iguales. */
.mosaico{display:grid; gap:14px; margin-top:clamp(34px,5vw,60px);
         grid-template-columns:repeat(6,1fr)}
.mosaico figure{margin:0; position:relative; overflow:hidden}
.mosaico img{width:100%; height:100%; object-fit:cover;
             transition:transform .5s var(--curva)}
.mosaico figure:hover img{transform:scale(1.028)}
.mosaico figcaption{position:absolute; left:0; right:0; bottom:0;
                    padding:34px 20px 16px; font-size:var(--t-chico);
                    font-weight:600; color:#fff;
                    background:linear-gradient(to top, rgba(14,16,10,.82), transparent)}
/* El material es vertical: la grilla se arma con retratos 2:3, y el primero
   pesa el doble para que haya jerarquia y no una parrilla plana. */
.mosaico figure{aspect-ratio:2/3}
.m--alto  {grid-column:span 3; grid-row:span 2; aspect-ratio:auto}
.m--ancho {grid-column:span 3}
.m--tercio{grid-column:span 3}
@media (min-width:901px){
  .mosaico{grid-template-columns:repeat(12,1fr)}
  .m--alto  {grid-column:span 6; grid-row:span 2; aspect-ratio:auto}
  .m--ancho {grid-column:span 3}
  .m--tercio{grid-column:span 3}
}
@media (max-width:900px){
  .mosaico{grid-template-columns:repeat(2,1fr)}
  .m--alto{grid-column:span 2; grid-row:auto; aspect-ratio:4/5}
  .m--ancho,.m--tercio{grid-column:span 1}
}
@media (max-width:460px){
  .mosaico{grid-template-columns:1fr}
  .m--alto,.m--ancho,.m--tercio{grid-column:span 1}
  .m--alto{aspect-ratio:2/3}
}

/* ------------------------------------------------------------- dupla --- */
.dupla{display:grid; gap:clamp(30px,4vw,58px); align-items:center;
       grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
.dupla--vuelta{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
.dupla--vuelta .dupla__foto{order:-1}
/* las duplas son un bloque con ritmo propio: el gap manda, no los margenes
   sueltos de cada una */
.duplas{display:grid; gap:clamp(46px,6vw,86px); margin-top:clamp(38px,5vw,60px)}
.dupla h3{font-size:clamp(1.42rem, 1rem + 1.5vw, 2rem); max-width:16ch}
.dupla .tramo__intro{margin-top:18px}
.dupla .nota{margin-top:16px}
.dupla__foto{margin:0}
.dupla__foto img{width:100%; aspect-ratio:5/4; object-fit:cover;
                 object-position:center var(--foco, 45%)}
@media (max-width:880px){
  .dupla,.dupla--vuelta{grid-template-columns:1fr}
  .dupla--vuelta .dupla__foto{order:0}
}

/* -------------------------------------------------------------- cita --- */
.cita{border-left:2px solid var(--mantel); padding-left:22px; margin-top:28px}
.cita p{font-size:1.02rem}
.cita cite{display:block; margin-top:9px; font-style:normal;
           font-size:var(--t-micro); letter-spacing:.11em;
           text-transform:uppercase; color:var(--humo)}

/* ---------------------------------------------------------- servicios --- */
.servicios{display:grid; gap:1px; background:var(--linea);
           margin-top:clamp(36px,5vw,58px);
           grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.servicio{background:var(--papel); padding:36px 30px 32px;
          display:flex; flex-direction:column; gap:14px}
.tramo--hondo .servicio{background:var(--papel-hondo)}
.servicio h3{font-size:var(--t-h3)}
.servicio p{font-size:var(--t-chico); color:var(--humo); flex:1}
.servicio a{align-self:flex-start; margin-top:6px; min-height:44px;
            display:inline-flex; align-items:center;
            font-size:var(--t-chico); font-weight:600; color:var(--mantel);
            text-decoration:none; border-bottom:1.5px solid currentColor}
.servicio a:hover{color:var(--mantel-vivo)}

/* ------------------------------------------------------------ señales --- */
.senales{display:grid; gap:1px; background:var(--linea);
         margin-top:clamp(36px,5vw,58px)}
.senal{background:var(--papel); padding:26px 0;
       display:grid; gap:6px 34px; align-items:baseline;
       grid-template-columns:minmax(0,25ch) minmax(0,1fr)}
.tramo--hondo .senal{background:var(--papel-hondo)}
.senal h3{font-family:var(--texto); font-size:1.06rem; font-weight:600;
          letter-spacing:0; line-height:1.4}
.senal p{font-size:var(--t-chico); color:var(--humo)}
.senal p b{color:var(--tinta); font-weight:600}
.senal--vos{background:var(--mantel); color:var(--sobre-mantel);
            padding:32px clamp(20px,3vw,32px);
            margin-inline:calc(clamp(20px,3vw,32px) * -1)}
.tramo--hondo .senal--vos{background:var(--mantel)}
.senal--vos h3{font-family:var(--display); font-weight:500; font-size:1.42rem;
               letter-spacing:-.012em; line-height:1.16}
.senal--vos p{color:var(--sobre-mantel); opacity:.92}
.senal--vos p b{color:var(--sobre-mantel)}
@media (max-width:760px){ .senal{grid-template-columns:1fr} }

/* ------------------------------------------------------------- cierre --- */
.cierre{background:var(--tinta); color:var(--papel)}
.cierre h2{color:var(--papel); max-width:16ch}
.cierre .guia{color:color-mix(in srgb, var(--papel) 66%, transparent)}
.cierre .cejilla{color:var(--sobre-tinta)}
.cierre .btn--linea{color:var(--papel);
                    box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--papel) 32%, transparent)}
.cierre .btn--linea:hover{color:var(--papel); box-shadow:inset 0 0 0 1.5px var(--papel)}

.pieDePagina{padding-block:36px 60px; border-top:1px solid var(--linea);
             font-size:var(--t-chico); color:var(--humo)}
.pieDePagina__fila{display:flex; flex-wrap:wrap; gap:12px 32px; align-items:baseline}
/* Las cuatro internas, tambien abajo: quien llega al pie buscando el telefono
   encuentra ahi el resto del sitio. */
.pieDePagina__nav{display:flex; flex-wrap:wrap; gap:0 28px; width:100%;
                  margin-bottom:6px; padding-bottom:10px;
                  border-bottom:1px solid var(--linea)}
.pieDePagina__nav a{font-weight:600; color:var(--tinta); min-width:44px; justify-content:center}
.pieDePagina__nav a[aria-current]{color:var(--mantel)}
/* las redes: la misma fila que las paginas, en el color secundario */
.pieDePagina__redes{display:flex; flex-wrap:wrap; gap:0 28px; width:100%}
.pieDePagina__redes a{color:var(--humo); min-width:44px; justify-content:center}
.pieDePagina a{display:inline-flex; align-items:center; min-height:44px;
               color:var(--humo); text-decoration:none;
               border-bottom:1px solid transparent}
.pieDePagina a:hover{color:var(--tinta); border-bottom-color:var(--linea)}

/* ------------------------------------------------------- el recorrido --- */
/* Apartado a todo el ancho, sobre banda oscura: el recorrido es la pieza,
   no un accesorio dentro de una seccion mas. */
.recorrido{background:var(--noche); color:var(--sobre-noche); padding-block:var(--paso)}
.recorrido h2{color:var(--sobre-noche)}
.recorrido .guia{color:color-mix(in srgb, var(--sobre-noche) 62%, transparent)}
.recorrido .cejilla{color:var(--mantel-claro)}
.recorrido__cabeza{display:grid; gap:clamp(20px,3vw,54px); align-items:end;
                   grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.recorrido__dato{font-size:var(--t-chico);
                 color:color-mix(in srgb, var(--sobre-noche) 52%, transparent)}
.recorrido__dato b{display:block; font-family:var(--display); font-weight:500;
                   font-size:2.1rem; line-height:1; color:var(--sobre-noche);
                   margin-bottom:5px; font-variant-numeric:tabular-nums}
@media (max-width:820px){ .recorrido__cabeza{grid-template-columns:1fr} }

.escenario{margin-top:clamp(28px,4vw,48px);
           border:1px solid color-mix(in srgb, var(--sobre-noche) 15%, transparent)}
.escenario__vista{position:relative; width:100%; aspect-ratio:16/9;
                  min-height:230px; overflow:hidden; cursor:grab;
                  touch-action:pan-y; user-select:none;
                  background:color-mix(in srgb, var(--noche) 70%, #000)}
.escenario__vista.agarrando{cursor:grabbing}
.escenario__vista img{position:absolute; top:0; left:0; max-width:none;
                      transform-origin:0 0; pointer-events:none; opacity:0;
                      transition:opacity 1.2s var(--curva)}
.escenario__vista img.puesta{opacity:1}
/* el cartel de ayuda va arriba a la izquierda, donde antes iba el nombre del
   lugar (que repetia el boton rojo de abajo) */
.escenario__pista{position:absolute; left:14px; top:14px; z-index:3;
                  padding:9px 14px; max-width:calc(100% - 28px);
                  font-size:var(--t-chico); color:#fff; white-space:nowrap;
                  background:rgba(8,9,6,.7); backdrop-filter:blur(8px);
                  pointer-events:none; transition:opacity .45s var(--curva)}
.escenario__pista.ida{opacity:0}
/* el mando: flechas para pasar de vista (y de lugar, al llegar al borde) con la
   cuenta en el medio. Los puntos de antes eran chicos y, adentro del escenario,
   ni recibian el toque: la vista captura el puntero (casona.js los exceptua). */
.escenario__mando{position:absolute; left:50%; bottom:14px; z-index:3;
                  transform:translateX(-50%); display:flex; align-items:center;
                  gap:2px; padding:3px; border-radius:2px;
                  background:rgba(8,9,6,.66); backdrop-filter:blur(8px)}
.escenario__flecha{width:44px; height:44px; padding:0; border:0; cursor:pointer;
                   display:grid; place-items:center; color:#fff;
                   background:transparent; transition:background .18s var(--curva)}
.escenario__flecha svg{width:22px; height:22px; fill:none; stroke:currentColor;
                       stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.escenario__flecha:hover{background:rgba(255,255,255,.14)}
.escenario__cuenta{min-width:54px; text-align:center; color:#fff;
                   font-size:var(--t-chico); font-variant-numeric:tabular-nums}
.escenario__cuenta[hidden]{display:none}

.escenario__paradas{display:flex; overflow-x:auto; scrollbar-width:thin;
                    border-top:1px solid color-mix(in srgb, var(--sobre-noche) 15%, transparent)}
.escenario__paradas button{flex:0 0 auto; min-height:52px; padding:15px 22px;
                           font-family:var(--texto); font-size:var(--t-chico);
                           font-weight:600; white-space:nowrap; cursor:pointer;
                           border:0; background:transparent;
                           border-right:1px solid color-mix(in srgb, var(--sobre-noche) 12%, transparent);
                           color:color-mix(in srgb, var(--sobre-noche) 58%, transparent);
                           transition:color .18s var(--curva), background .18s var(--curva)}
.escenario__paradas button:last-child{border-right:0}
.escenario__paradas button:hover{color:var(--sobre-noche);
                                 background:color-mix(in srgb, var(--sobre-noche) 7%, transparent)}
.escenario__paradas button[aria-current="true"]{background:var(--mantel);
                                                color:var(--sobre-mantel)}
.recorrido :focus-visible{outline-color:var(--mantel-vivo)}

/* ---------------------------------------------------- puertas abiertas --- */
/* El diferencial que estaba enterrado en la pregunta 11 del FAQ. */
.puertas{padding-block:var(--paso)}
.puertas__reja{display:grid; gap:clamp(24px,4vw,64px);
               grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
               align-items:start}
.puertas h2{font-family:var(--display); font-size:var(--t-h2); max-width:15ch}
.puertas h2 em{font-style:italic; color:var(--mantel)}
.puertas__lista{display:grid; gap:0; margin:0; padding:0; list-style:none}
.puertas__lista li{display:grid; gap:3px; padding:16px 0;
                   border-top:1px solid var(--linea)}
.puertas__lista li:last-child{border-bottom:1px solid var(--linea)}
.puertas__lista b{font-size:var(--t-chico); font-weight:600}
.puertas__lista span{font-size:var(--t-chico); color:var(--humo)}
@media (max-width:820px){ .puertas__reja{grid-template-columns:1fr} }

/* -------------------------------------------------------------- voces --- */
.voces{display:grid; gap:1px; background:var(--linea);
       margin-top:clamp(34px,5vw,56px);
       grid-template-columns:repeat(auto-fit,minmax(322px,1fr))}
.voz{background:var(--papel); padding:32px 28px; display:flex;
     flex-direction:column; gap:16px}
.tramo--hondo .voz{background:var(--papel-hondo)}
.voz blockquote{margin:0; font-family:var(--display); font-size:1.16rem;
                line-height:1.42; flex:1; text-wrap:pretty}
.voz figcaption{font-size:var(--t-micro); color:var(--humo); line-height:1.5}
.voz figcaption b{display:block; font-size:var(--t-chico); font-weight:600;
                  color:var(--tinta); letter-spacing:0}

/* --------------------------------------------------------- preguntas --- */
.preguntas{margin-top:clamp(34px,5vw,56px); border-top:1px solid var(--linea)}
.pregunta{border-bottom:1px solid var(--linea)}
.pregunta summary{display:flex; align-items:flex-start; gap:18px;
                  padding:22px 0; cursor:pointer; list-style:none;
                  font-size:1.04rem; font-weight:600; line-height:1.5}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{content:"+"; margin-left:auto; flex:0 0 auto;
                         font-family:var(--display); font-size:1.5rem;
                         font-weight:400; line-height:1; color:var(--mantel);
                         transition:transform .22s var(--curva)}
.pregunta[open] summary::after{transform:rotate(45deg)}
.pregunta summary:hover{color:var(--mantel)}
.pregunta__marca{flex:0 0 auto; font-size:var(--t-micro); font-weight:600;
                 letter-spacing:.1em; text-transform:uppercase;
                 color:var(--humo); padding-top:.32em; min-width:9.5ch}
.pregunta__cuerpo{padding:0 0 24px; max-width:70ch; color:var(--humo);
                  font-size:var(--t-chico)}
.pregunta__cuerpo p + p{margin-top:11px}
@media (max-width:640px){
  .pregunta summary{flex-wrap:wrap; gap:6px 12px}
  .pregunta__marca{min-width:0}
}

/* --------------------------------------------------------- contacto --- */
.datos{display:grid; gap:1px; background:color-mix(in srgb, var(--papel) 20%, transparent);
       margin-top:clamp(34px,5vw,52px);
       grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.dato{background:var(--noche); color:var(--sobre-noche);
      padding:28px 26px; display:grid; gap:7px; align-content:start}
.dato dt{font-size:var(--t-micro); font-weight:600; letter-spacing:.15em;
         text-transform:uppercase;
         color:color-mix(in srgb, var(--sobre-noche) 52%, transparent)}
.dato dd{margin:0; font-size:1.04rem; line-height:1.5}
.dato a{display:inline-flex; align-items:center; min-height:44px;
        text-decoration:none; border-bottom:1px solid
        color-mix(in srgb, var(--sobre-noche) 32%, transparent)}
.dato a:hover{border-bottom-color:var(--mantel-vivo); color:var(--mantel-vivo)}
.dato small{display:block; font-size:var(--t-micro);
            color:color-mix(in srgb, var(--sobre-noche) 56%, transparent)}

/* ------------------------------------------------------- aparicion --- */
/* La pieza sube al entrar en pantalla. El escalonado entre hermanos lo pone
   js/pagina.js con la variable --demora. */
.entra{opacity:0; transform:translateY(22px);
       transition:opacity .74s var(--curva) var(--demora, 0ms),
                  transform .74s var(--curva) var(--demora, 0ms);
       will-change:opacity, transform}
.entra.dentro{opacity:1; transform:none; will-change:auto}
@media (prefers-reduced-motion:reduce){
  .entra{opacity:1; transform:none; transition:none}
  .escenario__vista img{transition:none}
  .mosaico img{transition:none}
  .mosaico figure:hover img{transform:none}
  .pregunta summary::after{transition:none}
}

/* -------------------------------------------------------------- reels --- */
/* Tira horizontal de reels. Las miniaturas viven en nuestro dominio: no se
   carga ningun script de Meta, asi la pagina no delata a quien la lee. */
.reels{display:flex; gap:14px; margin-top:clamp(32px,4.5vw,52px);
       padding-bottom:10px; overflow-x:auto; scroll-snap-type:x mandatory;
       scrollbar-width:thin; overscroll-behavior-x:contain}
.reels::-webkit-scrollbar{height:8px}
.reels::-webkit-scrollbar-thumb{background:var(--linea); border-radius:4px}
.reel{flex:0 0 clamp(208px,23vw,268px); scroll-snap-align:start;
      display:flex; flex-direction:column; gap:12px;
      text-decoration:none; color:inherit}
.reel__marco{position:relative; aspect-ratio:9/16; overflow:hidden;
             background:var(--papel-hondo)}
.reel__marco img{width:100%; height:100%; object-fit:cover;
                 transition:transform .5s var(--curva)}
.reel:hover .reel__marco img{transform:scale(1.04)}
.reel__play{position:absolute; inset:0; display:grid; place-items:center;
            pointer-events:none}
.reel__play::before{content:""; width:52px; height:52px; border-radius:50%;
                    background:rgba(10,12,7,.5); backdrop-filter:blur(6px);
                    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.62);
                    transition:background .22s var(--curva)}
.reel__play::after{content:""; position:absolute; width:0; height:0;
                   margin-left:4px; border-left:15px solid #fff;
                   border-top:9px solid transparent;
                   border-bottom:9px solid transparent}
.reel:hover .reel__play::before{background:rgba(166,43,33,.82)}
.reel__fecha{position:absolute; left:10px; bottom:10px; padding:5px 10px;
             font-size:.68rem; font-weight:600; letter-spacing:.07em;
             color:#fff; background:rgba(10,12,7,.62);
             backdrop-filter:blur(6px); font-variant-numeric:tabular-nums}
.reel__texto{font-size:var(--t-chico); line-height:1.5; text-wrap:pretty}
.reel:hover .reel__texto{color:var(--mantel)}

.reels__pie{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:baseline;
            margin-top:26px}
.reels__pie a{font-size:var(--t-chico); font-weight:600; color:var(--mantel);
              text-decoration:none; border-bottom:1.5px solid currentColor;
              padding-bottom:2px; min-height:44px; display:inline-flex;
              align-items:center}
.reels__pie small{font-size:var(--t-micro); color:var(--humo)}
@media (prefers-reduced-motion:reduce){
  .reel__marco img{transition:none}
  .reel:hover .reel__marco img{transform:none}
}

/* --------------------------------------------------------- la marca --- */
/* Dos archivos del mismo logo: el texto negro para fondo claro, el texto
   claro para fondo oscuro. El corazon es rojo en los dos. */
.marca__logo{display:block; width:auto; height:clamp(30px,3.4vw,38px)}
.marca__logo--oscuro{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .marca__logo--claro{display:none}
  :root:not([data-theme="light"]) .marca__logo--oscuro{display:block}
}
:root[data-theme="dark"] .marca__logo--claro{display:none}
:root[data-theme="dark"] .marca__logo--oscuro{display:block}
/* align-content: sin el lema (abajo de 900 px) la grilla mide 48 px y el
   logo de 30 quedaba pegado arriba, 9 px sobre el centro de la barra */
.marca{display:grid; gap:5px; justify-items:start; align-content:center}

/* ------------------------------------------------------ perfil social --- */
.perfil{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
        margin-top:clamp(26px,3.5vw,38px); padding-bottom:clamp(22px,3vw,30px);
        border-bottom:1px solid var(--linea)}
.perfil__avatar{flex:0 0 auto; width:64px; height:64px; border-radius:50%;
                overflow:hidden; background:var(--papel-alto);
                box-shadow:0 0 0 1.5px var(--linea)}
.perfil__avatar img{width:100%; height:100%; object-fit:cover}
.perfil__avatar--oscuro{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .perfil__avatar--claro{display:none}
  :root:not([data-theme="light"]) .perfil__avatar--oscuro{display:block}
}
:root[data-theme="dark"] .perfil__avatar--claro{display:none}
:root[data-theme="dark"] .perfil__avatar--oscuro{display:block}
.perfil__quien{display:grid; gap:2px; margin-right:auto}
.perfil__arroba{display:flex; align-items:center; gap:7px;
                font-size:1.12rem; font-weight:600; letter-spacing:-.01em}
.perfil__tilde{flex:0 0 auto; width:17px; height:17px; color:#3B93F7}
.perfil__que{font-size:var(--t-chico); color:var(--humo)}
.perfil .btn{min-height:44px; padding:11px 22px}
@media (max-width:520px){
  .perfil__quien{margin-right:0}
  .perfil .btn{width:100%; justify-content:center}
}

/* --------------------------------------------------------- la marca --- */

/* ------------------------------------------------------ perfil social --- */
.perfil{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
        margin-top:clamp(26px,3.5vw,38px); padding-bottom:clamp(22px,3vw,30px);
        border-bottom:1px solid var(--linea)}
.perfil__avatar{flex:0 0 auto; width:64px; height:64px; border-radius:50%;
                overflow:hidden; background:var(--papel-alto);
                box-shadow:0 0 0 1.5px var(--linea)}
.perfil__avatar img{width:100%; height:100%; object-fit:cover}
.perfil__avatar--oscuro{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .perfil__avatar--claro{display:none}
  :root:not([data-theme="light"]) .perfil__avatar--oscuro{display:block}
}
:root[data-theme="dark"] .perfil__avatar--claro{display:none}
:root[data-theme="dark"] .perfil__avatar--oscuro{display:block}
.perfil__quien{display:grid; gap:2px; margin-right:auto}
.perfil__arroba{display:flex; align-items:center; gap:7px;
                font-size:1.12rem; font-weight:600; letter-spacing:-.01em}
.perfil__tilde{flex:0 0 auto; width:17px; height:17px; color:#3B93F7}
.perfil__que{font-size:var(--t-chico); color:var(--humo)}
.perfil .btn{min-height:44px; padding:11px 22px}
@media (max-width:520px){
  .perfil__quien{margin-right:0}
  .perfil .btn{width:100%; justify-content:center}
}

/* --------------------------------------------------------- la cinta --- */
/* Franja de videos con altura pareja y ancho segun el formato de cada uno:
   los verticales quedan angostos y los apaisados anchos, como un rollo de
   pelicula. Nada se reproduce solo: el visitante decide. */
.cinta{display:flex; gap:14px; margin-top:clamp(32px,4.5vw,52px);
       padding-bottom:12px; overflow-x:auto; scroll-snap-type:x proximity;
       scrollbar-width:thin; overscroll-behavior-x:contain}
.cinta::-webkit-scrollbar{height:8px}
.cinta::-webkit-scrollbar-thumb{background:var(--linea); border-radius:4px}
.clip{position:relative; flex:0 0 auto; scroll-snap-align:start;
      height:clamp(292px,40vh,438px); background:var(--papel-hondo);
      border:0; padding:0; cursor:pointer; overflow:hidden; display:block}
.clip--alto{aspect-ratio:9/16}
.clip--ancho{aspect-ratio:16/9}
.clip img,.clip video{width:100%; height:100%; object-fit:cover; display:block}
.clip img{transition:transform .5s var(--curva)}
.clip:hover img{transform:scale(1.035)}
.clip__play{position:absolute; inset:0; display:grid; place-items:center;
            pointer-events:none}
.clip__play::before{content:""; width:56px; height:56px; border-radius:50%;
                    background:rgba(12,10,8,.5); backdrop-filter:blur(6px);
                    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);
                    transition:background .22s var(--curva)}
.clip__play::after{content:""; position:absolute; width:0; height:0;
                   margin-left:5px; border-left:16px solid #fff;
                   border-top:10px solid transparent;
                   border-bottom:10px solid transparent}
.clip:hover .clip__play::before{background:rgba(166,43,33,.85)}
.clip__pie{position:absolute; left:0; right:0; bottom:0; padding:30px 14px 12px;
           text-align:left; font-size:var(--t-chico); font-weight:600; color:#fff;
           background:linear-gradient(to top, rgba(12,10,8,.82), transparent);
           pointer-events:none}
.clip__pie span{display:block; font-weight:400; font-size:.72rem; opacity:.78;
                font-variant-numeric:tabular-nums}
.clip.sonando .clip__play,.clip.sonando .clip__pie{display:none}
@media (prefers-reduced-motion:reduce){
  .clip img{transition:none}
  .clip:hover img{transform:none}
}

/* ----------------------------------------------------------- el pase --- */
/* Pase de fotos del portico. Solo se descarga la que se ve y la siguiente:
   entrar a la pagina no baja 18 fotos. Se frena solo al pasar el mouse, al
   enfocar con teclado, y si el sistema pide menos movimiento no arranca. */
.pase{position:relative; width:100%; aspect-ratio:3/4; overflow:hidden;
      background:var(--papel-hondo);
      /* techo por altura de ventana: si no, en escritorio el pase empuja los
         botones y la barra de posicion abajo del pliegue */
      max-height:min(72vh, 760px)}
.pase__pieza{position:absolute; inset:0; width:100%; height:100%;
             object-fit:cover;
             /* cada pieza trae su propio foco: las de exterior estan encuadradas
                con mucho cielo y con un valor parejo la gente queda afuera */
             object-position:center var(--foco, 40%);
             opacity:0; transform:scale(1);
             /* fundido de 1,2 s entre piezas y, mientras la foto esta puesta, un
                acercamiento lento del 4,5 %: la foto respira en vez de estar clavada */
             transition:opacity 1.2s var(--curva), transform 6s linear}
.pase__pieza.puesta{opacity:1; transform:scale(1.045)}
/* Los videos entran enteros, sobre un fondo hecho con su propio cuadro
   desenfocado. Con recorte se perdia medio cuadro; con barras negras quedaba
   un hueco muerto. Asi el marco se llena sin cortar nada. */
.pase__marco{position:absolute; inset:0; opacity:0;
             transition:opacity 1.2s var(--curva); overflow:hidden}
.pase__marco.pase__pieza{transform:none}       /* los videos no se acercan */
.pase__marco.puesta{opacity:1}
.pase__fondo{position:absolute; inset:0; width:100%; height:100%;
             object-fit:cover; filter:blur(26px) saturate(1.15) brightness(.62);
             transform:scale(1.18)}
.pase__vid{position:absolute; inset:0; width:100%; height:100%;
           object-fit:contain}

.pase__barra{position:absolute; left:0; right:0; bottom:0; z-index:2;
             display:flex; gap:3px; padding:16px 14px;
             background:linear-gradient(to top, rgba(14,11,8,.5), transparent)}
.pase__paso{flex:1 1 0; min-width:0; height:44px; padding:0 0 11px; border:0;
            background:transparent; cursor:pointer; display:grid; align-items:end}
            /* 44 px de alto para el dedo; la raya de 3 px queda donde estaba (a 11 px del borde) */
.pase__paso::after{content:""; display:block; height:3px; width:100%;
                   background:rgba(255,255,255,.34);
                   transition:background .25s var(--curva)}
.pase__paso:hover::after{background:rgba(255,255,255,.7)}
.pase__paso[aria-current="true"]::after{background:#fff}
.pase__cuenta{position:absolute; top:14px; right:14px; z-index:2;
              padding:6px 11px; font-size:.7rem; font-weight:600;
              letter-spacing:.09em; color:#fff; background:rgba(14,11,8,.55);
              backdrop-filter:blur(6px); font-variant-numeric:tabular-nums;
              pointer-events:none}
@media (max-width:900px){ .pase{aspect-ratio:4/5; max-height:none} }
@media (prefers-reduced-motion:reduce){
  .pase__pieza,.pase__marco{transition:none; transform:none}
  .pase__pieza.puesta{transform:none}
}

/* ------------------------------------------------------ contacto fijo --- */
/* Una franja con telefono y mail siempre a la vista, y un boton flotante de
   WhatsApp. Es lo que tiene la competencia y nos faltaba: en una decision como
   esta, la gente quiere el telefono sin tener que buscarlo. */
.cinta-contacto{background:var(--tinta); color:var(--papel)}
.cinta-contacto .env{display:flex; flex-wrap:wrap; gap:6px 26px;
                     align-items:center; justify-content:flex-end;
                     min-height:44px; padding-block:2px}
.cinta-contacto a{display:inline-flex; align-items:center; gap:7px;
                  min-height:44px; font-size:var(--t-micro); font-weight:600;
                  letter-spacing:.04em; color:var(--papel); text-decoration:none;
                  opacity:.82; transition:opacity .18s var(--curva)}
.cinta-contacto a:hover{opacity:1}
.cinta-contacto svg{width:13px; height:13px; flex:0 0 auto}
@media (max-width:620px){ .cinta-contacto .env{justify-content:center} }

.flota{position:fixed; right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px);
       z-index:60; display:inline-flex; align-items:center; gap:10px;
       min-height:54px; padding:14px 20px 14px 17px;
       font-size:var(--t-chico); font-weight:600; text-decoration:none;
       color:#fff; background:#16833F;
       box-shadow:0 6px 22px rgba(12,10,8,.24);
       transition:transform .2s var(--curva), box-shadow .2s var(--curva)}
.flota:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(12,10,8,.3)}
.flota svg{width:21px; height:21px; flex:0 0 auto}
.flota span{display:none}
@media (min-width:760px){ .flota span{display:inline} }
@media (prefers-reduced-motion:reduce){ .flota{transition:none} }

/* ------------------------------------------------------------- marco --- */
/* Un paspartu: la imagen queda como una lamina apoyada sobre el papel, con
   filete fino, margen interior y una sombra que casi no se ve. Va igual en el
   pase, el mosaico, las duplas y la foto del lema, para que las cuatro se lean
   como piezas de la misma serie.

   Nada de rojo aca: el rojo es del foco de teclado y de los botones. El anillo
   de foco sale POR FUERA del marco (outline-offset), para que se distinga del
   filete y no se confunda con el.

   El recorte (overflow) baja al <picture> y al propio pase, asi el hover del
   mosaico escala dentro de la ventana y nunca invade el margen del paspartu. */
:root{ --paspartu:clamp(6px, .6vw, 10px) }

.portico__foto,
.lema figure,
.mosaico figure,
.dupla__foto,
.lamina{
  background:var(--papel-alto);
  padding:var(--paspartu);
  border:1px solid var(--linea);
  border-radius:2px;
  box-shadow:0 1px 1px rgb(20 18 15 / .05), 0 10px 24px -14px rgb(20 18 15 / .22);
}
.pase,
.lema figure > picture,
.mosaico figure > picture,
.dupla__foto > picture{
  display:block; width:100%; height:100%;
  overflow:hidden; border-radius:1px;
}
/* el pase trae su propio fondo mientras carga; dentro del marco va sin el */
.pase{background:var(--papel-hondo)}
.pase:focus-visible{outline-offset:calc(var(--paspartu) + 2px)}

@media (max-width:900px){
  /* Con marco, la foto del portico ya no sale a sangre: una lamina cortada por
     el borde de la pantalla se lee como error, no como decision. */
  .portico__foto{margin-inline:0}
}

/* --------------------------------------------------- la ampliación --- */
/* El proyecto del estudio Gelain Datta Gelain: seis habitaciones más, tres
   baños con giro de silla y un comedor nuevo.

   Va sobre --papel y nunca sobre --noche, y jamás dentro del pase ni del
   recorrido. Las vistas del recorrido están retocadas con luz de atardecer y
   los renders tienen esa misma luz: puestos cerca, una familia no puede saber
   qué existe y qué no. El aviso y el marbete son la diferencia, y por eso son
   piezas de diseño y no una nota al pie. */
.ampliacion{padding-block:var(--paso)}
.ampliacion__reja{display:grid; gap:clamp(28px,4vw,64px); align-items:center;
                  grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
.ampliacion__aviso{margin-top:22px; max-width:46ch;
                   padding-left:16px; border-left:3px solid var(--mantel);
                   font-size:var(--t-chico); font-weight:600; color:var(--tinta)}
.ampliacion__aviso--grande{margin-top:26px; max-width:52ch;
                           font-size:var(--t-guia); font-weight:500; line-height:1.5}
.ampliacion .pie{margin-top:20px}
.ampliacion .pie b{color:var(--tinta)}
.ampliacion__lista{margin-top:clamp(30px,4vw,44px); max-width:60ch}
.ampliacion__credito{margin-top:clamp(20px,3vw,30px); max-width:60ch}
@media (max-width:880px){ .ampliacion__reja{grid-template-columns:1fr} }

/* Las láminas: papel de arquitecto apoyado sobre el papel del sitio. Llevan el
   mismo paspartú que las fotos, y abajo el rótulo. */
.laminas{display:grid; gap:clamp(18px,2.4vw,30px); margin-top:clamp(32px,4vw,52px);
         grid-template-columns:repeat(2,minmax(0,1fr))}
.lamina{margin:0}
.lamina--ancha{grid-column:1 / -1; max-width:78ch}
.lamina img{width:100%; height:auto}
.lamina__marbete{display:flex; align-items:baseline; gap:10px;
                 margin-top:var(--paspartu); padding-top:10px;
                 border-top:1px solid var(--linea);
                 font-size:var(--t-micro); font-weight:600; letter-spacing:.1em;
                 line-height:1.4; text-transform:uppercase; color:var(--humo)}
.lamina__marbete::before{content:""; flex:0 0 auto; width:16px; height:3px;
                         transform:translateY(-.28em);
                         background:var(--mantel)}
@media (max-width:760px){ .laminas{grid-template-columns:1fr} }