:root {
   --site: 1400px;
   --rojo: #B0141F;
   --rojo-osc: #8E0F18;
}

* {
   box-sizing: border-box
}

html,
body {
   margin: 0;
   padding: 0;
   background: #fff;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility
}

h1,
h2,
h3,
h4,
h5,
p {
   margin: 0
}

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

svg {
   display: block
}

img {
   max-width: 100%
}


/* =============================================================================
   Sitio — suizo / bloques sólidos
   ============================================================================= */

.dirB {
   --ink: #111111;
   --mut: #5C5C5C;
   --line: #D8D8D8;
   --acc: var(--rojo);
   background: #fff;
   color: var(--ink);
   font-family: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
   font-size: 17px;
   line-height: 1.55;
}

.dirB .wrap {
   max-width: var(--site);
   margin: 0 auto;
   /* La canaleta iguala la de .top .in y .search .in, que ya usaban 44px: sin
      esto el contenido de las secciones quedaba desalineado con las barras. */
   padding: 0 44px;

   &:has(.nav) {
      max-width: 100%;
      padding: 0;
   }
}
.dirB{
   .wp-block-image.alignright {
    float: right;
   }
}
.dirB .kicker {
   font-size: 15px;
   font-weight: 700;
   letter-spacing: .2em;
   text-transform: uppercase
}

.dirB .top {
   background: var(--ink);
   color: #B9B9B9;
   font-size: 15px;
   font-weight: 500
}

.dirB .top .in {
   max-width: var(--site);
   margin: 0 auto;
   padding: 12px 44px;
   display: flex;
   justify-content: space-between;
   align-items: center
}

.dirB .top ul {
   display: flex;
   gap: 30px;
   list-style: none;
   margin: 0;
   padding: 0;
   align-items: center;
   font-size: clamp(0.85, 4vw, 1em);
}

.dirB .top li {
   display: flex;
   gap: 9px;
   align-items: center
}

.dirB .top svg {
   width: 22px;
   height: 22px;
}

.dirB .top .soc {
   gap: 18px
}

.dirB .top ul a {
   display: flex;
   gap: 9px;
   align-items: center;
   transition: color .15s
}

.dirB .top ul svg {
   width: 18px;
   height: 18px;
   color: inherit;
   shape-rendering: geometricPrecision
}

.dirB .top ul a:hover {
   color: #fff
}

.dirB .top .uf {
   letter-spacing: .14em;
   text-transform: uppercase;
   color: #fff
}

.dirB .nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 32px;
   border-bottom: 3px solid var(--ink)
}

.dirB .nav img.logo {
   height: 52px;
   width: auto;
   display: block
}

.dirB .nav .marcas {
   display: flex;
   align-items: center;
   gap: 24px;
   flex: 0 0 auto
}

.dirB .nav .marca-curauma {
   display: block;
   flex: 0 0 auto
}

.dirB .nav .marca-curauma img {
   height: 60px;
   width: auto;
   display: block
}

.dirB .nav .marca-curauma:focus-visible {
   outline: 3px solid var(--acc);
   outline-offset: 2px
}

.dirB .nav ul {
   display: flex;
   gap: 32px;
   list-style: none;
   margin: 0;
   padding: 0;
   font-size: 15px;
   font-weight: 600;
   letter-spacing: .13em;
   text-transform: uppercase
}

.dirB .nav li.on {
   color: var(--acc)
}

.dirB .nav li a {
   transition: color .15s
}

.dirB .nav li a:hover {
   color: var(--acc)
}

.dirB .nav .cta {
   background: var(--acc);
   color: #fff;
   font-size: 15px;
   font-weight: 800;
   letter-spacing: .13em;
   text-transform: uppercase;
   padding: 16px 26px
}

.dirB .nav .cta:hover {
   background: var(--ink)
}

/* Botón de menú y CTA dentro del panel: solo existen bajo el punto de quiebre
   de la navegación. En escritorio manda .cta-desk. */
.dirB .navtoggle {
   display: none;
   align-items: center;
   gap: 10px;
   background: none;
   border: 0;
   padding: 10px 0 10px 10px;
   color: var(--ink);
   font-family: inherit;
   font-size: 15px;
   font-weight: 800;
   letter-spacing: .13em;
   text-transform: uppercase;
   cursor: pointer
}

.dirB .navtoggle svg {
   width: 26px;
   height: 26px
}

.dirB .navtoggle .bar-top,
.dirB .navtoggle .bar-mid,
.dirB .navtoggle .bar-bot {
   transition: transform .2s, opacity .2s;
   transform-origin: center
}

/* Las tres barras se pliegan en una cruz: el icono informa el mismo estado que
   aria-expanded, para quien lo ve y para quien lo escucha. */
.dirB .nav .navtoggle[aria-expanded="true"] .bar-top {
   transform: translateY(5px) rotate(45deg)
}

.dirB .nav .navtoggle[aria-expanded="true"] .bar-mid {
   opacity: 0
}

.dirB .nav .navtoggle[aria-expanded="true"] .bar-bot {
   transform: translateY(-5px) rotate(-45deg)
}

.dirB .nav .nav-cta {
   display: none
}

.dirB .hero {
   position: relative;
   background: var(--ink)
}

/* Carrusel del hero: las tres fotos se apilan en el mismo hueco y solo cambia
   la opacidad, así el alto del bloque no salta entre transiciones. */
.dirB .hero .slides {
   position: relative;
   height: 700px
}

.dirB .hero .slides img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   opacity: 0;
   transition: opacity .9s ease-in-out
}

.dirB .hero .slides img.is-active {
   opacity: 1
}

.dirB .slidenav {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 5;
   display: flex;
   align-items: center;
   gap: 10px;
   background: var(--ink);
   padding: 14px 18px
}

/* Cuadrados, no círculos: la dirección no usa una sola forma redondeada. */
.dirB .slidenav .dot {
   width: 26px;
   height: 10px;
   padding: 0;
   border: 0;
   background: rgba(255, 255, 255, .38);
   cursor: pointer;
   transition: background .2s
}

.dirB .slidenav .dot:hover {
   background: rgba(255, 255, 255, .7)
}

.dirB .slidenav .dot.is-active {
   background: var(--acc)
}

.dirB .slidenav .slidepause {
   display: flex;
   margin-left: 6px;
   padding: 0;
   border: 0;
   background: none;
   color: #fff;
   cursor: pointer;
   transition: color .15s
}

.dirB .slidenav .slidepause:hover {
   color: var(--acc)
}

.dirB .slidenav .slidepause svg {
   width: 20px;
   height: 20px
}

/* El icono sigue al estado real del carrusel, que vive en data-playing. */
.dirB .slidenav .slidepause .ic-play {
   display: none
}

.dirB .hero[data-playing="false"] .slidepause .ic-pause {
   display: none
}

.dirB .hero[data-playing="false"] .slidepause .ic-play {
   display: block
}

.dirB .slidenav button:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 3px
}

.dirB .hero .panel {
   position: absolute;
   bottom: 0;
   left: 32px;
   width: 660px;
   background: var(--acc);
   color: #fff;
   padding: 32px;
}

.dirB .hero .panel .kicker {
   color: rgba(255, 255, 255, .72);
   margin-bottom: 22px
}

.dirB .hero h1 {
   font-size: clamp(30px, 4.4vw, 50px);
   font-weight: 700;
   line-height: 1;
   letter-spacing: -.035em;
   margin-bottom: 22px
}

.dirB .hero p {
   font-size: 16px;
   line-height: 1.55;
   color: rgba(255, 255, 255, .9);
   max-width: 44ch;
   margin-bottom: 32px
}

.dirB .hero .acts {
   display: flex;
   gap: 0
}

.dirB .btn {
   display: inline-flex;
   align-items: center;
   gap: 11px;
   font-size: 15px;
   font-weight: 800;
   letter-spacing: .13em;
   text-transform: uppercase;
   padding: 18px 30px;
   background: #fff;
   color: var(--acc);
   transition: background .18s, color .18s, box-shadow .18s
}

/* Hover como intercambio de bloque: el par fondo/tinta se invierte. Nada de
   sombras ni elevación, que romperían el lenguaje de la dirección. */
.dirB .btn:hover {
   background: var(--ink);
   color: #fff
}

.dirB .btn svg {
   width: 18px;
   height: 18px
}

.dirB .btn.ghost {
   background: transparent;
   color: #fff;
   box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55)
}

.dirB .btn.ghost:hover {
   background: #fff;
   color: var(--acc);
   box-shadow: inset 0 0 0 2px #fff
}

.dirB .hero .stamp {
   position: absolute;
   top: 0;
   right: 0;
   background: var(--ink);
   color: #fff;
   padding: 20px 28px;
   font-size: 15px;
   font-weight: 700;
   letter-spacing: .2em;
   text-transform: uppercase
}

.dirB .search {
   background: var(--ink);
   color: #fff
}

.dirB .search .in {
   max-width: var(--site);
   margin: 0 auto;
   padding: 0 44px;
   display: grid;
   grid-template-columns: repeat(4, 1fr) 210px
}

.dirB .fld {
   position: relative;
   padding: 24px 26px;
   border-right: 1px solid rgba(255, 255, 255, .18)
}

.dirB .fld:first-child {
   padding-left: 0
}

.dirB .fld label {
   display: block;
   font-size: 15px;
   font-weight: 700;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: #8E8E8E;
   margin-bottom: 9px;
   cursor: pointer
}

/* El select pierde su chrome nativo y se queda con el marcador de la casa.
   La lista abierta la dibuja el sistema, por eso las opciones se repintan
   sobre fondo claro: heredarían el blanco de la barra y quedarían ilegibles. */
.dirB .fld select {
   appearance: none;
   -webkit-appearance: none;
   width: 100%;
   padding: 0 28px 0 0;
   background: transparent;
   border: 0;
   border-radius: 0;
   color: #fff;
   font-family: inherit;
   font-size: 18px;
   font-weight: 500;
   line-height: 1.4;
   cursor: pointer
}

.dirB .fld select:focus-visible {
   outline: 2px solid var(--acc);
   outline-offset: 4px
}

.dirB .fld option {
   background: #fff;
   color: var(--ink)
}

.dirB .fld .chev {
   position: absolute;
   right: 26px;
   bottom: 25px;
   width: 20px;
   height: 20px;
   color: var(--acc);
   pointer-events: none;
   transition: transform .2s
}

.dirB .fld:hover .chev {
   transform: translateY(2px)
}

/* En el diseno estatico este era un enlace decorativo. Ahora envia un
   formulario de verdad, asi que es un <button>: hay que apagarle el borde y la
   tipografia que el navegador le pone y que un <a> nunca trajo. */
.dirB .search .go {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 11px;
   background: var(--acc);
   color: #fff;
   border: 0;
   font-family: inherit;
   font-size: 15px;
   font-weight: 800;
   letter-spacing: .15em;
   text-transform: uppercase;
   cursor: pointer;
   transition: background .18s
}

.dirB .search .go:hover {
   background: var(--rojo-osc)
}

.dirB .search .go svg {
   width: 20px;
   height: 20px
}

.dirB .sec {
   padding: 92px 0
}

.dirB .shead {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 28px;
   align-items: end;
   border-bottom: 3px solid var(--ink);
   padding-bottom: 20px;
   margin-bottom: 46px
}

/* h1 y h3 comparten estilo porque comparten trabajo: es el titulo de la
   seccion. Cual de los dos se usa lo decide la jerarquia del documento --h1 en
   una pagina, que es su titulo real; h3 en la cartera, donde ya hay un h1 mas
   arriba-- y no el tamano que tiene que tener. */
.dirB .shead h1,
.dirB .shead h3 {
   font-size: clamp(28px, 3.8vw, 42px);
   font-weight: 800;
   letter-spacing: -.025em;
   text-transform: uppercase;
   line-height: 1
}

.dirB .shead p {
   font-size: 17px;
   color: var(--mut);
   max-width: 60ch;
   margin-top: 12px
}

.dirB .shead a {
   font-size: 15px;
   font-weight: 800;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: var(--acc);
   display: inline-flex;
   gap: 9px;
   align-items: center;
   transition: color .15s
}

.dirB .shead a:hover {
   color: var(--ink)
}

.dirB .shead a svg {
   width: 18px;
   height: 18px;
   transition: transform .18s
}

.dirB .shead a:hover svg {
   transform: translateX(4px)
}

/* Las lineas de separacion las dibuja cada ficha con su propia sombra, y no un
   fondo gris del contenedor visto a traves de los huecos. Con seis fichas fijas
   daba igual; con contenido real la ultima fila casi nunca viene completa, y un
   fondo pintaria de gris las celdas que faltan. */
.dirB .grid3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2px
}

.dirB .grid3>* {
   box-shadow: 0 0 0 1px var(--line)
}

.dirB .card {
   background: #fff;
   position: relative;
   transition: background .25s
}

.dirB .card:hover {
   background: #F2F0ED
}

/* .pic recorta el zoom: sin este contenedor la foto ampliada se derramaría
   sobre el texto de la ficha, porque transform no reserva espacio. */
.dirB .card .pic {
   overflow: hidden
}

.dirB .card .pic img {
   width: 100%;
   height: 252px;
   object-fit: cover;
   display: block;
   transition: transform .5s cubic-bezier(.22, .61, .36, 1)
}

.dirB .card:hover .pic img {
   transform: scale(1.06)
}

.dirB .card .tag {
   position: absolute;
   top: 0;
   left: 0;
   background: var(--acc);
   color: #fff;
   font-size: 15px;
   font-weight: 800;
   letter-spacing: .15em;
   text-transform: uppercase;
   padding: 10px 16px
}

/* La operación se lee por color: rojo de marca para arriendo (el caso por
   defecto), negro para venta. */
.dirB .card .tag.venta {
   background: var(--ink)
}

.dirB .card .body {
   padding: 26px 26px 24px
}

.dirB .card .op {
   font-size: 15px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--mut);
   margin-bottom: 12px
}

.dirB .card h4 {
   font-size: 23px;
   font-weight: 800;
   letter-spacing: -.02em;
   line-height: 1.2;
   margin-bottom: 10px;
   min-height: 56px
}

/* Enlace estirado: el ancla vive en el título — así el nombre accesible del
   enlace es el de la propiedad y no la ficha entera leída de corrido — y este
   pseudo-elemento transparente extiende el área clicable a toda la card. */
.dirB .card h4 a::after {
   content: "";
   position: absolute;
   inset: 0
}

.dirB .card h4 a {
   transition: color .15s
}

.dirB .card:hover h4 a {
   color: var(--acc)
}

/* El foco de teclado se dibuja sobre la card completa, no sobre el título:
   es el área que el enlace realmente activa. */
.dirB .card:has(h4 a:focus-visible) {
   outline: 3px solid var(--acc);
   outline-offset: -3px
}

.dirB .card h4 a:focus-visible {
   outline: none
}

.dirB .card .loc {
   display: flex;
   gap: 8px;
   align-items: center;
   font-size: 16px;
   color: var(--mut);
   margin-bottom: 20px
}

.dirB .card .loc svg {
   width: 17px;
   height: 17px;
   color: var(--acc)
}

.dirB .card .price {
   font-size: clamp(24px, 2.4vw, 28px);
   font-weight: 800;
   letter-spacing: -.03em;
   margin-bottom: 4px
}

.dirB .card .note {
   font-size: 15px;
   color: var(--mut);
   margin-bottom: 20px
}

.dirB .specs {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 18px 0 0;
   border-top: 1px solid var(--line);
   gap: 16px
}

.dirB .specs li {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 7px;
   font-size: 16px;
   font-weight: 600;
   white-space: nowrap
}

.dirB .specs svg {
   width: 20px;
   height: 20px;
   color: var(--acc)
}

.dirB .svc {
   background: var(--acc);
   color: #fff
}

.dirB .svc .shead {
   border-bottom-color: rgba(255, 255, 255, .5)
}

.dirB .svc .shead p {
   color: rgba(255, 255, 255, .85)
}

.dirB .grid4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0
}

.dirB .svc .it {
   padding: 16px;
   border-right: 1px solid rgba(255, 255, 255, .35)
}

.dirB .svc .it:last-child {
   border-right: none;
   padding-right: 0
}

.dirB .svc .it .ic svg {
   width: 50px;
   height: 50px;
   margin-bottom: 24px
}

.dirB .svc .it h4 {
   font-size: 22px;
   font-weight: 800;
   letter-spacing: -.02em;
   text-transform: uppercase;
   margin-bottom: 12px
}

.dirB .svc .it p {
   font-size: 16px;
   line-height: 1.6;
   color: rgba(255, 255, 255, .88)
}

.dirB .zonas .zgrid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 2px;
   background: var(--ink)
}

.dirB .zonas .z {
   background: #fff;
   padding: 34px 28px 30px
}

.dirB .zonas .z .n {
   font-size: 15px;
   font-weight: 800;
   letter-spacing: .2em;
   color: var(--acc);
   margin-bottom: 26px
}

.dirB .zonas h4 {
   font-size: 34px;
   font-weight: 800;
   letter-spacing: -.025em;
   text-transform: uppercase;
   margin-bottom: 14px
}

.dirB .zonas p {
   font-size: 16px;
   color: var(--mut);
   line-height: 1.55;
   margin-bottom: 24px;
   min-height: 78px
}

.dirB .zonas .cnt {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 15px;
   font-weight: 800;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: var(--ink);
   border-top: 2px solid var(--ink);
   padding-top: 16px
}

.dirB .zonas .cnt svg {
   width: 18px;
   height: 18px;
   color: var(--acc)
}

.dirB .proc {
   color: var(--ink);
}

.dirB .proc .shead {
   border-bottom-color: var(--ink);
}

.dirB .proc .shead p {
   color: #9A9A9A
}

.dirB .proc .it {
   padding: 32px 16px;
   border-right: 1px solid var(--line);
}

.dirB .proc .it:last-child {
   border-right: none;
   padding-right: 0
}

.dirB .proc .n {
   font-size: clamp(52px, 6vw, 74px);
   font-weight: 800;
   line-height: .85;
   letter-spacing: -.035em;
   color: transparent;
   -webkit-text-stroke: 2px var(--acc);
   margin-bottom: 22px
}

.dirB .proc h4 {
   font-size: 20px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: -.01em;
   margin-bottom: 12px
}

.dirB .proc p {
   font-size: 16px;
   line-height: 1.6;
   color: #A5A5A5
}

/* Testimonios de la portada: slider de tarjetas con scroll-snap nativo, igual
   que la galería. 3 por vista en escritorio, 2 hasta 1024px y 1 hasta 760px.
   Las flechas llevan el atributo hidden hasta que testimonios.js las activa. */
.dirB .testi {
   background: #F2F0ED
}

.dirB .testi-carrusel {
   position: relative;
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0
}

.dirB .testi-pista {
   flex: 1 1 auto;
   min-width: 0;
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: calc((100% - 2 * 24px) / 3);
   gap: 24px;
   align-items: stretch;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scrollbar-width: none
}

.dirB .testi-pista::-webkit-scrollbar {
   display: none
}

.dirB .testi-pista:focus-visible,
.dirB .testi-flecha:focus-visible {
   outline: 3px solid var(--acc);
   outline-offset: 2px
}

.dirB .testi-card {
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 18px;
   padding: 32px 28px;
   background: #fff;
   border-bottom: 3px solid var(--acc);
   scroll-snap-align: start
}

.dirB .testi-foto {
   flex: 0 0 auto;
   width: 72px;
   height: 72px;
   border-radius: 50%;
   overflow: hidden;
   background: var(--line);
   display: flex;
   align-items: center;
   justify-content: center
}

.dirB .testi-foto img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

.dirB .testi-inicial {
   font-size: 28px;
   font-weight: 800;
   color: var(--acc);
   line-height: 1
}

.dirB .testi-texto {
   margin: 0;
   flex: 1 1 auto;
   font-size: 16px;
   line-height: 1.6;
   color: var(--ink)
}

.dirB .testi-texto p + p {
   margin-top: 12px
}

.dirB .testi-nombre {
   font-size: 15px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: -.01em
}

.dirB .testi-flecha {
   flex: 0 0 auto;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   border: 1px solid var(--line);
   color: var(--ink);
   cursor: pointer
}

.dirB .testi-flecha[hidden] {
   display: none
}

.dirB .testi-flecha svg {
   width: 18px;
   height: 18px
}

.dirB .testi-flecha-prev svg {
   transform: scaleX(-1)
}

.dirB .testi-flecha:disabled {
   opacity: .35;
   cursor: default
}

.dirB .testi-flecha:not(:disabled):hover {
   border-color: var(--rojo);
   color: var(--rojo)
}

.dirB .testi-puntos {
   display: flex;
   justify-content: center;
   gap: 6px;
   margin-top: 24px
}

.dirB .testi-puntos[hidden] {
   display: none
}

/* El botón es más alto que la barra para que sea fácil de tocar. */
.dirB .testi-punto {
   width: 26px;
   height: 24px;
   padding: 0;
   border: 0;
   background: none;
   display: flex;
   align-items: center;
   cursor: pointer
}

.dirB .testi-punto::before {
   content: "";
   width: 100%;
   height: 10px;
   background: var(--mut);
   opacity: .45;
   transition: background .2s, opacity .2s
}

.dirB .testi-punto:hover::before {
   opacity: .8
}

.dirB .testi-punto.is-active::before {
   background: var(--acc);
   opacity: 1
}

.dirB .testi-punto:focus-visible {
   outline: 3px solid var(--acc);
   outline-offset: 2px
}

.dirB .cta2 {
   background: var(--acc);
   color: #fff
}

.dirB .cta2 .in {
   max-width: var(--site);
   margin: 0 auto;
   padding: 82px 44px;
   display: grid;
   grid-template-columns: 1.2fr auto;
   gap: 60px;
   align-items: center
}

.dirB .cta2 h3 {
   font-size: clamp(28px, 3.8vw, 42px);
   font-weight: 600;
   line-height: .98;
   letter-spacing: -.03em;
   text-transform: uppercase;
   margin-bottom: 18px
}

.dirB .cta2 p {
   font-size: 18px;
   color: rgba(255, 255, 255, .88);
   max-width: 52ch
}

.dirB .cta2 .acts {
   display: flex;
   gap: 2px
}

.dirB .cta2 .btn {
   background: var(--ink);
   color: #fff
}

.dirB .cta2 .btn.ghost {
   background: transparent;
   box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6)
}

.dirB .cta2 .btn:hover,
.dirB .cta2 .btn.ghost:hover {
   background: #fff;
   color: var(--acc);
   box-shadow: inset 0 0 0 2px #fff
}

.dirB .ft {
   background: var(--ink);
   color: #9A9A9A;
   font-size: 16px
}

.dirB .ft .cols {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr;
   gap: 44px;
   padding: 64px 0 48px
}

.dirB .ft .logos {
   display: flex;
   align-items: center;
   gap: 20px;
   margin-bottom: 20px
}

.dirB .ft .logos img {
   display: block;
   height: auto
}

.dirB .ft .about p {
   max-width: 34ch
}

.dirB .ft h5 {
   font-size: 15px;
   font-weight: 800;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: #fff;
   margin-bottom: 18px
}

.dirB .ft ul {
   list-style: none;
   margin: 0;
   padding: 0
}

.dirB .ft li {
   padding: 6px 0
}

.dirB .ft li a {
   transition: color .15s
}

.dirB .ft li a:hover {
   color: #fff
}

.dirB .ft .soc {
   display: flex;
   gap: 6px;
   margin-top: 18px;
   margin-left: -8px;
   color: #fff
}

/* El padding lleva el área clicable a 38px: un glifo de 22px por sí solo queda
   por debajo del mínimo cómodo para el dedo. El margen negativo de arriba
   devuelve el bloque a su alineación con el resto de la columna. */
.dirB .ft .soc a {
   display: flex;
   padding: 8px;
   transition: color .15s
}

.dirB .ft .soc a:hover {
   color: var(--acc)
}

.dirB .ft .soc svg {
   width: 22px;
   height: 22px;
   shape-rendering: geometricPrecision
}

.dirB .ft .bot {
   border-top: 1px solid rgba(255, 255, 255, .18);
   padding: 20px 0;
   display: flex;
   justify-content: space-between;
   font-size: 15px
}


/* =============================================================================
   Cartera: lo que el sitio estatico no necesitaba
   La portada mostraba seis fichas elegidas a mano y siempre completas. El
   archivo de propiedades es contenido real y variable, asi que aparecen tres
   estados que antes no existian: paginar, una ficha sin foto cargada y la
   cartera vacia.
   ============================================================================= */

/* La foto es el bloque mas alto de la ficha: si falta, se reserva su lugar en
   vez de dejar que la grilla se descuadre. Gris de la marca, no un placeholder
   con texto: la ficha no deberia anunciar lo que le falta. */
.dirB .card .pic .sin-foto {
   height: 252px;
   background: var(--line)
}

.dirB .vacio {
   padding: 48px 0;
   font-size: 18px;
   color: var(--mut)
}

.dirB .vacio a {
   color: var(--acc);
   font-weight: 700
}

.dirB .pagination {
   margin-top: 48px
}

.dirB .pagination .nav-links {
   display: flex;
   flex-wrap: wrap;
   gap: 2px
}

/* Cuadrados solidos, del mismo tamano, separados por la misma linea de 2px que
   separa las fichas: la paginacion es parte de la grilla, no un adorno aparte. */
.dirB .pagination .page-numbers {
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 52px;
   height: 52px;
   padding: 0 16px;
   background: #fff;
   border: 1px solid var(--line);
   font-size: 16px;
   font-weight: 700;
   transition: background .2s, color .2s
}

.dirB .pagination a.page-numbers:hover {
   background: #F2F0ED
}

.dirB .pagination .page-numbers.current {
   background: var(--ink);
   border-color: var(--ink);
   color: #fff
}

.dirB .pagination .page-numbers:focus-visible {
   outline: 3px solid var(--acc);
   outline-offset: -3px
}

.dirB .pagination .dots {
   border-color: transparent
}


/* =============================================================================
   Ficha completa de una propiedad
   El diseno aprobado no traia esta pagina: solo la tarjeta de la grilla. Se
   compone con el mismo vocabulario —bloques solidos, lineas de 1px, el rojo
   solo para lo accionable— en vez de inventar un lenguaje aparte.
   ============================================================================= */

.dirB .detalle {
   padding: 48px 0 92px
}

.dirB .migas {
   font-size: 15px;
   font-weight: 600;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: var(--mut);
   margin-bottom: 32px
}

.dirB .migas a:hover {
   color: var(--acc)
}

.dirB .migas span {
   padding: 0 8px
}

/* El encabezado reparte titulo a la izquierda y precio a la derecha, alineados
   abajo: el precio es la segunda cosa que se busca despues del nombre. */
.dirB .detalle-cab {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 40px;
   padding-bottom: 28px;
   border-bottom: 3px solid var(--ink)
}

.dirB .detalle-cab h1 {
   font-size: clamp(24px, 4vw, 44px);
   font-weight: 800;
   letter-spacing: -.03em;
   line-height: 1.08;
   margin: 10px 0
}

.dirB .detalle-cab .loc {
   display: flex;
   gap: 8px;
   align-items: center;
   font-size: 17px;
   color: var(--mut)
}

.dirB .detalle-cab .loc svg {
   width: 18px;
   height: 18px;
   color: var(--acc)
}

.dirB .detalle-cab .loc a:hover {
   color: var(--acc)
}

.dirB .detalle-valor {
   text-align: right;
   flex-shrink: 0
}

/* La etiqueta de operacion se reusa de la tarjeta, pero alli va pegada a la
   esquina de la foto. Aca vuelve al flujo. */
.dirB .detalle-valor .tag {
   position: static;
   display: inline-block;
   background: var(--acc);
   color: #fff;
   font-size: 15px;
   font-weight: 800;
   letter-spacing: .15em;
   text-transform: uppercase;
   padding: 8px 14px;
   margin-bottom: 12px
}

.dirB .detalle-valor .tag.venta {
   background: var(--ink)
}

.dirB .detalle-valor .price {
   font-size: clamp(26px, 3.6vw, 40px);
   font-weight: 800;
   letter-spacing: -.03em;
   line-height: 1
}

.dirB .detalle-valor .note {
   font-size: 15px;
   color: var(--mut);
   margin-top: 6px
}

.dirB .detalle-foto {
   margin: 0;
   overflow: hidden
}

.dirB .detalle-foto img {
   width: 100%;
   height: clamp(320px, 46vw, 560px);
   object-fit: cover;
   display: block
}

.dirB .detalle-foto .sin-foto {
   height: clamp(320px, 46vw, 560px);
   background: var(--line)
}

/* La galería completa, portada incluida: un carrusel de miniaturas que
   muestra 6 por vista en escritorio. La pista es una grilla de scroll
   horizontal con scroll-snap, así que el swipe táctil funciona nativo, sin
   una librería. Cada miniatura sigue siendo un <a href> real al original: si
   galeria.js no carga, la foto igual se abre en la pestaña. */
.dirB .galeria-carrusel {
   position: relative;
   display: flex;
   align-items: center;
   gap: 8px
}

.dirB .galeria-pista {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: calc((100% - 5 * 6px) / 6);
   gap: 6px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scrollbar-width: none
}

.dirB .galeria-pista::-webkit-scrollbar {
   display: none
}

.dirB .galeria-item {
   display: block;
   scroll-snap-align: start;
   aspect-ratio: 1 / 1;
   overflow: hidden;
   background: var(--line)
}

.dirB .galeria-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .2s
}

.dirB .galeria-item:hover img {
   transform: scale(1.04)
}

.dirB .galeria-flecha {
   flex: 0 0 auto;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   border: 1px solid var(--line);
   cursor: pointer
}

.dirB .galeria-flecha svg {
   width: 18px;
   height: 18px
}

.dirB .galeria-flecha-prev svg {
   transform: scaleX(-1)
}

.dirB .galeria-flecha:disabled {
   opacity: .35;
   cursor: default
}

.dirB .galeria-flecha:not(:disabled):hover {
   border-color: var(--rojo);
   color: var(--rojo)
}

/* El lightbox: overlay oscuro, imagen grande, navegación y contador. Se abre
   con JS sobre las mismas miniaturas; sin JS, cada una sigue abriendo su
   original en una pestaña nueva. */
.dirB .galeria-lightbox {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   max-width: none;
   max-height: none;
   margin: 0;
   padding: 0;
   border: 0;
   background: rgba(10, 10, 10, .94);
   color: #fff
}

.dirB .galeria-lightbox::backdrop {
   background: transparent
}

.dirB .galeria-lightbox[open] {
   display: flex;
   align-items: center;
   justify-content: center
}

.dirB .galeria-lb-figura {
   margin: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   max-width: min(92vw, 1200px)
}

.dirB .galeria-lb-figura img {
   max-width: 100%;
   max-height: 85vh;
   object-fit: contain;
   display: block
}

.dirB .galeria-lb-figura figcaption {
   font-size: 13px;
   letter-spacing: .04em;
   color: rgba(255, 255, 255, .75)
}

.dirB .galeria-lb-cerrar {
   position: absolute;
   top: 20px;
   right: 20px;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: 1px solid rgba(255, 255, 255, .4);
   color: #fff;
   cursor: pointer
}

.dirB .galeria-lb-cerrar svg {
   width: 20px;
   height: 20px
}

.dirB .galeria-lb-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: 1px solid rgba(255, 255, 255, .4);
   color: #fff;
   cursor: pointer
}

.dirB .galeria-lb-nav svg {
   width: 20px;
   height: 20px
}

.dirB .galeria-lb-nav:disabled {
   opacity: .3;
   cursor: default
}

.dirB .galeria-lb-prev {
   left: 20px
}

.dirB .galeria-lb-prev svg {
   transform: scaleX(-1)
}

.dirB .galeria-lb-next {
   right: 20px
}

.dirB .detalle-cuerpo {
   display: grid;
   grid-template-columns: 1fr 380px;
   gap: 2px;
   background: var(--line)
}

.dirB .detalle-texto,
.dirB .detalle-aside {
   background: #fff;
   padding: 32px;
}

/* Las especificaciones vuelven a aparecer, ahora sin el borde superior que
   las separaba del precio en la tarjeta: aca ya vienen despues de la foto. */
.dirB .detalle-texto .specs {
   border-top: 0;
   padding-top: 0;
   padding-bottom: 32px;
   border-bottom: 1px solid var(--line);
   margin-bottom: 32px
}

/* De aca abajo, lo que sale del editor. Valen para la descripcion de una
   propiedad y para el cuerpo de una pagina: los dos son contenido escrito por
   el cliente y no hay razon para que un parrafo respire distinto segun donde
   este. Un bloque nuevo del editor que haga falta estilar se agrega a estas
   mismas reglas, no a una copia. */
.dirB .detalle-texto p,
.dirB .pagina-texto p {
   margin-bottom: 18px
}

.dirB .detalle-texto h2,
.dirB .detalle-texto h3,
.dirB .pagina-texto h2,
.dirB .pagina-texto h3 {
   font-size: 24px;
   font-weight: 800;
   letter-spacing: -.02em;
   margin: 32px 0 12px
}

.dirB .detalle-texto ul,
.dirB .detalle-texto ol,
.dirB .pagina-texto ul,
.dirB .pagina-texto ol {
   margin: 0 0 18px;
   padding-left: 22px
}

/* Terreno, pisos, orientación, gastos: los datos que no entran en las
   cuatro ranuras de specs de arriba. */
.dirB .detalle-tabla {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 14px 24px;
   margin: 0 0 32px;
   padding: 24px 0;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line)
}

.dirB .detalle-tabla dt {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--mut);
   margin-bottom: 2px
}

.dirB .detalle-tabla dd {
   margin: 0;
   font-size: 16px;
   font-weight: 700
}

/* Las características importadas, en lista con tilde: son datos sueltos del
   corredor, no vocabulario de una taxonomía. */
.dirB .detalle-caract {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px 20px;
   margin: 0 0 32px;
   padding: 0
}

.dirB .detalle-caract li {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 15px
}

.dirB .detalle-caract svg {
   width: 18px;
   height: 18px;
   color: var(--acc);
   flex-shrink: 0
}

.dirB .detalle-video,
.dirB .detalle-mapa {
   margin: 0 0 32px;
   aspect-ratio: 16 / 9;
   background: var(--line)
}

.dirB .detalle-video iframe,
.dirB .detalle-mapa iframe {
   width: 100%;
   height: 100%;
   border: 0;
   display: block
}

.dirB .detalle-aside h5 {
   font-size: 15px;
   font-weight: 800;
   letter-spacing: .16em;
   text-transform: uppercase;
   margin-bottom: 14px
}

.dirB .detalle-aside p {
   font-size: 16px;
   color: var(--mut);
   margin-bottom: 22px
}

/* El boton base es blanco sobre fondo oscuro; en la columna clara se invierte
   para que siga siendo lo unico rojo y solido de la seccion. */
.dirB .detalle-aside .btn {
   background: var(--acc);
   color: #fff;
   width: 100%;
   justify-content: center
}

.dirB .detalle-aside .btn:hover {
   background: var(--ink)
}

.dirB .detalle-aside .btn svg {
   width: 20px;
   height: 20px
}

.dirB .detalle-datos {
   list-style: none;
   margin: 26px 0 0;
   padding: 26px 0 0;
   border-top: 1px solid var(--line);
   font-size: 16px
}

.dirB .detalle-datos li {
   display: flex;
   gap: 10px;
   align-items: center;
   margin-bottom: 12px
}

.dirB .detalle-datos svg {
   width: 18px;
   height: 18px;
   color: var(--acc);
   flex-shrink: 0
}

.dirB .detalle-datos a:hover {
   color: var(--acc)
}

/* Filtros de vuelta a la cartera: son enlaces a los archivos por termino, que
   en la tarjeta no podian existir porque el enlace estirado se los comia. */
.dirB .detalle-filtros {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 26px;
   padding-top: 26px;
   border-top: 1px solid var(--line)
}

.dirB .detalle-filtros a {
   border: 1px solid var(--line);
   padding: 8px 14px;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
   transition: border-color .15s, color .15s
}

.dirB .detalle-filtros a:hover {
   border-color: var(--acc);
   color: var(--acc)
}


/* =============================================================================
   Paginas
   ============================================================================= */

/* El cuerpo de una pagina es una sola columna de texto, sin la caja blanca ni
   la reticula de la ficha: ahi el recuadro separa el texto del aside, y aca no
   hay aside del que separarlo. La separacion con el titulo ya la pone el
   margen inferior de .shead.

   Lo unico que necesita es medida. A todo el ancho del sitio un parrafo pasaria
   de 150 caracteres por linea y el ojo pierde el renglon al volver; 68ch lo
   deja en el rango en que se lee de corrido.

   Esto alcanza tambien a las imagenes y tablas que el editor ponga adentro. El
   tema no declara align-wide, asi que hoy no hay forma de que un bloque se
   salga de esta columna. Si alguna pagina lo pide, se agrega ese soporte y una
   regla para .alignwide; mientras tanto, una medida pareja es mejor que un
   ancho suelto. */
.dirB .pagina-texto {
   max-width: 100%;
   overflow: hidden;
}


/* =============================================================================
   Lightbox de las fotos
   ============================================================================= */

/* El fondo de la foto ampliada. El core lo pinta blanco: saca el color de
   wp_get_global_styles(['color']['background']) y lo escribe como estilo en
   linea sobre el .scrim, con #fff de respaldo. Cambiarlo desde theme.json
   pintaria de negro el fondo del sitio entero, porque es el mismo valor.

   El !important es la unica forma de ganarle a un estilo en linea. */
 .wp-lightbox-overlay.zoom.active .scrim {
   background-color: hsl(0deg 0% 0% / 80%) !important;

   /* El core deja el scrim en opacity .9, y encima la animacion de apertura lo
      lleva a 1. Con las dos capas el 80% del color se multiplicaba por .9 y
      quedaba en 72% cuando la animacion no corre. Fijarlo en 1 deja el alfa del
      color como unico responsable de la transparencia.

      Sin !important a proposito: una animacion le gana a una declaracion normal
      pero no a una !important, asi que el fundido de entrada sigue corriendo. */
   opacity: 1
}

.wrap form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style){
    background-color: #B0141F!important;
    font-weight: 600;
    padding: 8px 48px;
    &:hover{
        background-color: #8E0F18!important;
    }
}   
/* =============================================================================
   Responsive
   Tres puntos de quiebre elegidos por el contenido, no por nombres de aparato:
   1024 la navegacion deja de entrar en una linea, 760 las grillas de varias
   columnas dejan de tener sentido, 520 todo pasa a una sola columna.
   ============================================================================= */

/* ---------- 1025-1249px: barra completa con menos aire para los dos logos ---------- */
@media (min-width: 1025px) and (max-width: 1249px) {
   .dirB .nav {
      gap: 16px
   }

   .dirB .nav .marcas {
      gap: 14px
   }

   .dirB .nav img.logo {
      height: 42px
   }

   .dirB .nav .marca-curauma img {
      height: 48px
   }

   .dirB .nav ul {
      gap: 20px;
      font-size: 14px;
      letter-spacing: .08em;
      white-space: nowrap
   }

   .dirB .nav .cta {
      white-space: nowrap
   }
}

/* ---------- ≤1024px: la navegacion pasa a panel ---------- */
@media (max-width: 1024px) {

   .dirB .testi-pista {
      grid-auto-columns: calc((100% - 24px) / 2)
   }

   .dirB .wrap {
      padding: 0 28px
   }

   .dirB .top .in,
   .dirB .search .in,
   .dirB .cta2 .in {
      padding-left: 28px;
      padding-right: 28px
   }

   .dirB .nav {
      flex-wrap: wrap;
      padding: 16px 28px;
      position: relative
   }

   .dirB .navtoggle {
      display: flex
   }

   .dirB .nav .cta-desk {
      display: none
   }

   /* El panel ocupa todo el ancho bajo la barra. Sale del flujo para no empujar
      el hero al abrirse. */
   .dirB .nav ul {
      display: none;
      position: absolute;
      top: calc(100% + 3px);
      left: 0;
      right: 0;
      z-index: 20;
      flex-direction: column;
      gap: 0;
      background: var(--ink);
      padding: 8px 28px 20px
   }

   .dirB .nav.is-open ul {
      display: flex
   }

   .dirB .nav ul li {
      border-top: 1px solid rgba(255, 255, 255, .14)
   }

   .dirB .nav ul li a {
      display: block;
      padding: 16px 0;
      color: #fff
   }

   .dirB .nav ul li a:hover {
      color: var(--acc)
   }

   .dirB .nav .nav-cta {
      display: block;
      border-top: 0;
      margin-top: 16px
   }

   .dirB .nav .nav-cta .cta {
      display: block;
      padding: 16px 20px;
      text-align: center
   }

   .dirB .nav .nav-cta .cta:hover {
      background: #fff;
      color: var(--acc)
   }

   /* Grillas de cuatro: a dos. Tres: aguantan hasta el siguiente quiebre. */
   .dirB .grid4 {
      grid-template-columns: repeat(2, 1fr)
   }

   .dirB .svc .it:nth-child(2n),
   .dirB .proc .it:nth-child(2n) {
      border-right: none;
      padding-right: 0
   }

   .dirB .hero .slides {
      height: 520px
   }

   .dirB .hero .panel {
      left: 28px;
      right: 28px;
      width: auto
   }

   .dirB .search .in {
      grid-template-columns: repeat(2, 1fr)
   }

   .dirB .fld {
      padding: 20px;
      border-bottom: 1px solid rgba(255, 255, 255, .18)
   }

   .dirB .fld:first-child {
      padding-left: 20px
   }

   .dirB .fld:nth-child(2n) {
      border-right: none
   }

   .dirB .fld .chev {
      right: 20px;
      bottom: 21px
   }

   .dirB .search .go {
      grid-column: 1 / -1;
      padding: 20px
   }

   .dirB .ft .cols {
      grid-template-columns: repeat(2, 1fr);
      gap: 36px
   }
   .dirB .top ul {
      flex-wrap: wrap;
      gap: 8px 20px
   }
}

/* ---------- ≤760px: las grillas de varias columnas se rinden ---------- */
@media (max-width: 760px) {

   .dirB .testi-pista {
      grid-auto-columns: 100%
   }

   .dirB .sec {
      padding: 60px 0
   }

   .dirB .grid3,
   .dirB .grid4 {
      grid-template-columns: 1fr
   }

   /* Los separadores verticales pierden sentido en una columna: pasan a
      horizontales para seguir marcando la division. */
   .dirB .svc .it,
   .dirB .proc .it {
      border-right: none;
      padding-right: 0;
      padding-left: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .35)
   }

   .dirB .proc .it {
      border-bottom-color: var(--line)
   }

   .dirB .svc .it:last-child,
   .dirB .proc .it:last-child {
      border-bottom: none
   }

   /* El titulo de las fichas ya no compite con dos vecinos: sin altura minima
      no deja un hueco bajo los nombres cortos. */
   .dirB .card h4 {
      min-height: 0
   }

   .dirB .shead {
      grid-template-columns: 1fr;
      align-items: start;
      gap: 18px
   }

   /* El hero deja de ser fondo: el panel baja al flujo y el texto respira. */
   .dirB .hero .slides {
      height: 380px
   }

   .dirB .hero .panel {
      position: static;
      width: auto;
      padding: 28px
   }

   .dirB .hero .acts {
      flex-direction: column
   }

   .dirB .btn {
      justify-content: center
   }

   .dirB .cta2 .in {
      grid-template-columns: 1fr;
      gap: 32px;
      padding-top: 56px;
      padding-bottom: 56px
   }

   .dirB .cta2 .acts {
      flex-direction: column
   }

   .dirB .ft .cols {
      grid-template-columns: 1fr;
      padding: 48px 0 32px
   }

   .dirB .ft .bot {
      flex-direction: column;
      gap: 8px
   }

   /* El precio deja de caber al lado del titulo y baja, pero antes que la foto:
      sigue siendo lo segundo que se lee. */
   .dirB .detalle-cab {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px
   }

   .dirB .detalle-valor {
      text-align: left
   }

   .dirB .detalle-cuerpo {
      grid-template-columns: 1fr
   }

   .dirB .detalle-texto,
   .dirB .detalle-aside {
      padding: 32px 24px
   }

   /* 4 miniaturas visibles por vista del carrusel. */
   .dirB .galeria-pista {
      grid-auto-columns: calc((100% - 3 * 6px) / 4)
   }

   .dirB .detalle-caract {
      grid-template-columns: 1fr
   }
}

/* ---------- ≤520px: una sola columna en todo ---------- */
@media (max-width: 520px) {

   .dirB .testi-carrusel {
      gap: 6px
   }

   .dirB .testi-flecha {
      width: 32px;
      height: 32px
   }

   .dirB .testi-card {
      padding: 24px 18px
   }

   .dirB .wrap {
      padding: 0 20px
   }

   .dirB .top .in,
   .dirB .search .in,
   .dirB .cta2 .in {
      padding-left: 20px;
      padding-right: 20px
   }

   /* La barra superior apila sus dos listas y los datos de contacto se
      envuelven en vez de desbordar. */
   .dirB .top .in {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px
   }

   

   .dirB .top .soc {
      gap: 8px 20px
   }

   .dirB .nav {
      padding: 14px 20px
   }

   .dirB .nav ul {
      padding: 8px 20px 20px
   }

   /* Escala con la pantalla: en 320px los dos logos y el menú apenas caben. */
   .dirB .nav img.logo {
      height: clamp(34px, 10.5vw, 42px)
   }

   .dirB .nav .marcas {
      gap: 10px;
      flex: 0 1 auto
   }

   .dirB .nav .marca-curauma img {
      height: 42px
   }

   .dirB .navtoggle .navtoggle-label {
      display: none
   }

   .dirB .search .in {
      grid-template-columns: 1fr
   }

   .dirB .fld,
   .dirB .fld:first-child {
      padding: 18px 0;
      border-right: none
   }

   .dirB .fld .chev {
      right: 0;
      bottom: 19px
   }

   .dirB .search .go {
      padding: 18px
   }

   .dirB .hero .slides {
      height: 300px
   }

   .dirB .hero .panel {
      padding: 24px 20px
   }

   .dirB .card .pic img {
      height: 210px
   }

   /* Las especificaciones no entran en una linea a este ancho. */
   .dirB .specs {
      flex-wrap: wrap;
      gap: 14px 20px
   }

   .dirB .specs li {
      flex: 0 0 auto
   }

   /* 3 miniaturas visibles por vista del carrusel. */
   .dirB .galeria-pista {
      grid-auto-columns: calc((100% - 2 * 6px) / 3)
   }

   .dirB .detalle-tabla {
      grid-template-columns: 1fr
   }
}

/* =============================================================================
   Movimiento reducido
   ============================================================================= */

/* Los cambios de color se conservan: comunican estado. Lo que se apaga es el
   desplazamiento, que es lo que molesta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {

   .dirB .card:hover .pic img,
   .dirB .fld:hover .chev,
   .dirB .shead a:hover svg {
      transform: none
   }

   .dirB *,
   .dirB *::before,
   .dirB *::after {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important
   }
}