/* =====================================================================

   PLANTILLAS PHP DE PROPIEDAD — ficha y listado

   Access Home · 10/09/2026



   Esto NO es CSS de widget. Son dos plantillas del child theme

   (`single-propiedad.php` y `archive-propiedad.php`) que llevan el

   MARCADO DEL PROTOTIPO, asi que su hoja tambien es la del prototipo:

   `prototipo/ficha.html` y `prototipo/listado.html`, valor por valor.



   Sergio, 10/09/2026: «la ficha y la parrilla puedes montarla como

   template». En una plantilla PHP no hay Style tab que respetar, asi

   que aqui SI van los espaciados: es la unica forma de que el diseno

   sea identico POR CONSTRUCCION en vez de persiguiendolo.



   Lo que NO esta aqui, a proposito:

     · cabecera, menu movil y pie  -> son de Elementor (Theme Builder)

     · el visor, el pop-up de video y el bucle de la galeria -> ah-motion

   De la galeria, aqui solo va el ASPECTO (banda negra, medida de la

   foto, flechas de filete y «Ver las N fotos»); el MECANISMO sigue

   siendo de motion.js, por eso el marcado conserva sus clases `ah-*`.



   Todo cuelga de `.ah-p` para no tocar ni un pixel de la cabecera, del

   pie ni de ninguna pagina montada en Elementor.

   ===================================================================== */



.ah-p{

  /* Los colores salen del kit de Elementor. Los alias locales existen

     para que las reglas se lean igual que en el prototipo. */

  /* ⚠️ MEDIDO el 10/09: el «accent» del kit resuelve a BLANCO PURO, no al

     lino de marca, y con `var()` la tarjeta de datos, «¿Te ves aqui?» y la

     puerta del vendedor salian en blanco. La norma principal es que sea

     identico al prototipo, asi que van los valores literales del pack de

     marca. Si algun dia el kit los recoge bien, se vuelve a `var()`. */

  --negro:#0A0A0A;

  --lino:#F4F4ED;

  --blanco:#FFFFFF;

  --dur-entrada:1s; --dur-inter:.5s; --dur-salida:.3s;

  --sale-suave:cubic-bezier(.25,1,.5,1);

  --barrido:cubic-bezier(.76,0,.24,1);

  /* la sangria lateral, medida en la referencia a 1904 px: 110 px por

     lado, o sea 5,8 %. La ficha y el listado NO llevan el tope de 1320

     de la home: ocupan el 88 % de la pantalla, como Domus Nova. */

  --sangria:clamp(20px,5.8vw,120px);

  --regla:rgba(10,10,10,.14);

  --cabecera-alto:clamp(58px,7vh,74px);



  background:var(--blanco); color:#0A0A0A;

  font:400 14px/1.5 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;

  -webkit-font-smoothing:antialiased;

  /* `body{padding-top:var(--cabecera-alto)}` del prototipo: la cabecera de

     Elementor es FIJA y no ocupa sitio en el flujo, asi que sin esto la ficha

     y el listado arrancan 63 px MAS ARRIBA que la referencia. No se nota

     porque la banda negra cae sobre una galeria negra, pero la geometria no

     coincide y el dia que ese bloque deje de ser negro, aparece.

     Mismo remedio que en `.ah-b`/`.ah-a`: va aqui y no en el `body`, para no

     tocar ni una pagina montada en Elementor. */

  padding-top:var(--cabecera-alto);

}

.ah-p *{box-sizing:border-box}

.ah-p img{display:block; max-width:100%}

.ah-p h1,.ah-p h2,.ah-p h3{font-weight:400; margin:0}

/* el kit de Elementor da color a los parrafos; en estas plantillas manda el negro

   de la casa. Los bloques oscuros (.teves) lo vuelven a poner en lino al final. */

.ah-p p{color:#0A0A0A}

.ah-p a{color:inherit}



/* ---------- los botones de la casa: a escuadra, sin sombra ---------- */

.ah-p .boton{

  display:inline-flex; align-items:center; justify-content:center; gap:12px;

  background:#0A0A0A; color:var(--lino); text-decoration:none; border:1px solid #0A0A0A;

  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;

  padding:17px clamp(24px,2.6vw,40px); position:relative; overflow:hidden; cursor:pointer;

  font-family:inherit; -webkit-appearance:none; appearance:none; border-radius:0;

}

.ah-p .boton span{position:relative; z-index:2}

/* el hover barre de izquierda a derecha e invierte: el motivo 2 de la casa */

.ah-p .boton::before{content:''; position:absolute; inset:0; background:var(--lino);

               transform:scaleX(0); transform-origin:left;

               transition:transform var(--dur-inter) var(--sale-suave)}

.ah-p .boton:hover::before{transform:scaleX(1)}

.ah-p .boton:hover{color:#0A0A0A}

/* la version hueca sobre foto (ficha) */

.ah-p .boton--hueco{background:transparent; color:var(--lino); border-color:rgba(244,244,237,.5)}

.ah-p .boton--hueco::before{background:var(--lino)}

.ah-p .boton--hueco:hover{color:#0A0A0A}

/* la version hueca sobre blanco (listado): filete negro que se rellena */

.ah-p .boton--negro{background:transparent; color:#0A0A0A}

.ah-p .boton--negro::before{background:#0A0A0A}

.ah-p .boton--negro:hover{color:var(--lino)}



/* enlace de texto con subrayado que crece: el motivo 1 */

.ah-p .enlace{

  color:inherit; line-height:1.5; text-decoration:none; font-size:11px; letter-spacing:.16em;

  text-transform:uppercase; display:inline-flex; align-items:center; gap:10px;

  padding-bottom:4px; position:relative; white-space:nowrap;

}

.ah-p .enlace::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px;

               background:currentColor; transform:scaleX(0); transform-origin:left;

               transition:transform var(--dur-inter) var(--sale-suave)}

.ah-p .enlace:hover::after{transform:scaleX(1)}

.ah-p .enlace svg{width:16px; height:10px; display:block}

/* en el listado el enlace lleva vineta cuadrada y hueco de 12 */

.ah-p .enlace--vineta{gap:12px}

.ah-p .enlace--vineta::before{content:''; width:7px; height:7px; background:currentColor}



.ah-p .caja{margin:0 auto; padding:0 var(--sangria)}



/* =====================================================================

   1 · LA GALERIA / LAS DESTACADAS — la unica banda negra de la pagina

   30 px de aire arriba y abajo (Sergio). El bucle lo hace motion.js

   sobre `.ah-galeria-pista`; aqui solo va el aspecto.

   ===================================================================== */

.ah-p .ah-galeria{background:#0A0A0A; color:var(--lino); padding:30px 0}

/* medido en la referencia a 1904 de ventana: foto de 1107 (58 %),

   hueco de 68 y proporcion 1,7:1 */

.ah-p .ah-galeria-pista{gap:clamp(14px,3.6vw,68px)}

.ah-p .ah-galeria-foto{width:min(58vw,1107px); aspect-ratio:17/10; background:#151515}

.ah-p .ah-galeria-foto img{filter:saturate(.9) contrast(1.02); cursor:zoom-in}



/* Las flechas del prototipo: FILETE FINO, sin fondo y sin marco, en el

   hueco entre la foto activa y la vecina. motion.css las pinta como

   cuadrados oscuros con borde; esta hoja se encola despues y con la

   misma especificidad mas `.ah-p`, asi que gana sin `!important`. */

.ah-p .ah-galeria__f{

  width:56px; height:56px; background:transparent; border:0; padding:0;

  color:var(--lino); opacity:.85; display:grid; place-items:center;

  transition:opacity var(--dur-inter) var(--sale-suave);

}

.ah-p .ah-galeria__f:hover{background:transparent; opacity:1}

.ah-p .ah-galeria__f::before{

  content:''; width:13px; height:13px; border:0;

  border-top:1.2px solid var(--lino); border-left:1.2px solid var(--lino);

}

.ah-p .ah-galeria__f--ant{left:calc((100vw - 58vw) / 2 - 56px)}

.ah-p .ah-galeria__f--sig{right:calc((100vw - 58vw) / 2 - 56px)}



/* «Ver las N fotos»: pequeno, ARRIBA A LA DERECHA de la foto activa,

   como el «View all images» de la referencia. */

.ah-p .ah-galeria-todas{

  position:absolute; z-index:3; top:18px; right:calc((100vw - 58vw) / 2 + 18px);

  color:var(--lino); text-decoration:none; font-size:10px; letter-spacing:.16em;

  text-transform:uppercase; padding:9px 12px; border:0; cursor:pointer;

  font-family:inherit; line-height:1.5; font-weight:400; text-align:start; color:#F4F4ED;

  background:rgba(10,10,10,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);

  transition:background var(--dur-inter) var(--sale-suave), color var(--dur-inter) var(--sale-suave);

}

.ah-p .ah-galeria-todas:hover{background:var(--lino); color:#0A0A0A}



/* entre 761 y 860 el prototipo sigue a 58vw: motion.css baja a 82vw a

   860 y aqui se le devuelve su valor. */

@media(min-width:761px) and (max-width:860px){

  .ah-p .ah-galeria-foto{width:min(58vw,1107px)}

}

@media(max-width:760px){

  .ah-p .ah-galeria-foto{width:84vw}

  .ah-p .ah-galeria-pista{gap:10px}

  .ah-p .ah-galeria__f{display:none}

  .ah-p .ah-galeria-todas{right:calc(8vw + 10px); top:10px}

}



/* la leyenda de la destacada activa (listado): nombre a la izquierda,

   precio y descripcion a la derecha */

.ah-p .dest__pie{width:58vw; margin:22px auto 0; display:flex;

             justify-content:space-between; align-items:flex-start; gap:32px}

.ah-p .dest__eti{margin:0 0 10px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; opacity:.5}

.ah-p .dest__dir{font:400 clamp(20px,1.7vw,26px)/1.15 "Instrument Serif",Georgia,serif;

             letter-spacing:-.01em; text-decoration:none; color:inherit}

.ah-p .dest__pob{margin:6px 0 0; font-size:13px; opacity:.6}

.ah-p .dest__datos{text-align:right; max-width:36ch; font-size:13px; line-height:1.6; opacity:.72; margin:1em 0}

.ah-p .dest__datos b{display:block; font-weight:600; font-size:14px; opacity:1; margin-bottom:4px}

@media(max-width:760px){

  .ah-p .dest__pie{width:84vw; flex-direction:column; gap:12px}

  .ah-p .dest__datos{text-align:left; max-width:none}

}



/* =====================================================================

   2 · EL TITULO DE LA FICHA

   A la IZQUIERDA, con poblacion y referencia debajo; «Volver a

   propiedades» a la derecha y la regla que cruza por debajo.

   ===================================================================== */

.ah-p .titulo{padding:clamp(28px,3.6vw,44px) 0 clamp(22px,2.6vw,30px);

          border-bottom:1px solid var(--regla);

          display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}

.ah-p .titulo h1{font:400 clamp(28px,3vw,40px)/1.1 "Instrument Serif",Georgia,serif; letter-spacing:-.01em}

.ah-p .titulo__pob{margin:8px 0 0; font-size:13px; opacity:.6}

.ah-p .titulo__volver{opacity:.75}

.ah-p .titulo__volver svg{transform:scaleX(-1)}



/* =====================================================================

   3 · DATOS + TEXTO

   La tarjeta de datos va en LINO y se queda pegada al hacer scroll.

   ===================================================================== */

.ah-p .cuerpo{

  display:grid; grid-template-columns:minmax(280px,27%) minmax(0,1fr);

  gap:clamp(36px,6.2vw,120px); align-items:start;

  padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,96px);

}

.ah-p .datos{

  background:var(--lino); padding:clamp(24px,2.4vw,34px);

  position:sticky; top:calc(clamp(58px,7vh,74px) + 24px);

  --regla:rgba(10,10,10,.12);

}

.ah-p .datos__precio{font:400 clamp(30px,2.8vw,38px)/1 "Instrument Serif",Georgia,serif; letter-spacing:-.01em; margin:1em 0}

.ah-p .datos__op{margin:10px 0 0; font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.55}

.ah-p .datos__bloque{padding:18px 0; border-top:1px solid var(--regla)}

.ah-p .datos__bloque:first-of-type{margin-top:22px}

.ah-p .datos__eti{margin:0 0 7px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.45}

.ah-p .datos__val{margin:0; font-size:14px; line-height:1.55}

.ah-p .datos__val + .datos__val{margin-top:2px}

.ah-p .datos__compartir{display:flex; gap:18px; flex-wrap:wrap}

.ah-p .datos__compartir a,.ah-p .datos__compartir button{

  font:inherit; font-size:12px; color:inherit; background:none; border:0; padding:0; cursor:pointer;

  text-decoration:none; opacity:.7; letter-spacing:.02em;

}

.ah-p .datos__compartir a:hover,.ah-p .datos__compartir button:hover{opacity:1; text-decoration:underline; text-underline-offset:3px}

.ah-p .datos .boton{width:100%; margin-top:22px}



.ah-p .texto__intro{font:400 clamp(22px,2.2vw,32px)/1.3 "Instrument Serif",Georgia,serif;

              letter-spacing:-.01em; margin:0 0 clamp(22px,2.4vw,32px)}

.ah-p .texto p{font-size:15px; line-height:1.72; opacity:.78; margin:0 0 18px; max-width:88ch}



/* 4 · caracteristicas: dos columnas y NADA de iconos. La vineta es un

   aro de 6 px, que es lo mas cerca de un icono que llega esta web. */

.ah-p .caract{margin-top:clamp(36px,4vw,56px); padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--regla)}

.ah-p .caract h3{font:400 clamp(22px,2vw,28px)/1.2 "Instrument Serif",Georgia,serif; margin:0 0 22px}

.ah-p .caract ul{list-style:none; margin:0; padding:0;

           display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 32px}

.ah-p .caract li{font-size:14px; display:flex; align-items:baseline; gap:12px; opacity:.85}

.ah-p .caract li::before{content:''; flex:0 0 6px; width:6px; height:6px; border:1px solid currentColor;

                   border-radius:50%; opacity:.5; transform:translateY(-1px); margin:0 0 0 -15px}

@media(max-width:900px){

  .ah-p .cuerpo{grid-template-columns:1fr; gap:36px}

  .ah-p .datos{position:static}

}

@media(max-width:560px){ .ah-p .caract ul{grid-template-columns:1fr} }



/* =====================================================================

   5 · LA FOTO ANCHA con el video

   ===================================================================== */

.ah-p .ancha{position:relative; overflow:hidden; background:#151515}

.ah-p .ancha img{width:100%; height:clamp(320px,62vh,720px); object-fit:cover; filter:saturate(.9)}

.ah-p .ancha__video{

  position:absolute; inset:0; margin:auto; width:132px; height:132px; border-radius:50%;

  border:1px solid rgba(244,244,237,.7); background:rgba(10,10,10,.18);

  color:var(--lino); display:grid; place-items:center; text-decoration:none;

  font-size:11px; letter-spacing:.16em; text-transform:uppercase; text-align:center;

  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); cursor:pointer;

  font-family:inherit; line-height:1.5;

  transition:background var(--dur-inter) var(--sale-suave), color var(--dur-inter) var(--sale-suave);

}

.ah-p .ancha__video:hover{background:var(--lino); color:#0A0A0A}

/* el unico redondeado de la pagina: es la forma del logo, la unica curva

   del sistema (guion-movimiento.md §2) */



/* 6 · la cita entresacada */

.ah-p .cita{max-width:900px; margin:0 auto; padding:clamp(56px,7vw,110px) var(--sangria)}

.ah-p .cita p{margin:0; padding-left:clamp(20px,2.4vw,32px); border-left:1px solid #0A0A0A;

          font:400 clamp(20px,2.1vw,30px)/1.35 "Instrument Serif",Georgia,serif; letter-spacing:-.01em}



/* 7 · dos fotos desalineadas: la pequena arriba y a la izquierda, la

   grande abajo y a la derecha. El desnivel es lo que las hace editoriales */

.ah-p .dos--ficha{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px);

             align-items:start; padding:0 0 clamp(56px,7vw,110px)}

.ah-p .dos--ficha figure{margin:0; overflow:hidden; background:#151515}

.ah-p .dos--ficha figure img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; filter:saturate(.9)}

.ah-p .dos--ficha figure:nth-child(1){width:min(100%,360px); justify-self:end; margin-top:clamp(40px,7vw,120px)}

.ah-p .dos--ficha figure:nth-child(2){width:min(100%,520px)}

@media(max-width:700px){

  .ah-p .dos--ficha{grid-template-columns:1fr; gap:28px}

  .ah-p .dos--ficha figure:nth-child(1){width:100%; margin-top:0; justify-self:stretch} /* 17/09: en móvil las dos enteras */

  .ah-p .dos--ficha figure:nth-child(2){width:100%; justify-self:end}

}



/* =====================================================================

   8 · «¿TE VES AQUI?» — sobre FOTO A SANGRE oscurecida

   ===================================================================== */

.ah-p .teves{position:relative; color:var(--lino); text-align:center; overflow:hidden;

         padding:clamp(72px,10vw,150px) var(--sangria)}

.ah-p .teves > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.8)}

.ah-p .teves::before{content:''; position:absolute; inset:0; background:rgba(10,10,10,.66); z-index:1}

.ah-p .teves__caja{position:relative; z-index:2; max-width:640px; margin:0 auto}

.ah-p .teves h2{font:400 clamp(30px,3.6vw,52px)/1.08 "Instrument Serif",Georgia,serif; letter-spacing:-.01em}

.ah-p .teves p{margin:18px auto 30px; font-size:14px; line-height:1.7; opacity:.82; max-width:52ch}



/* =====================================================================

   9 · LA ZONA — texto a la izquierda, foto-mapa a la derecha.

   Sustituye al mapa de la propiedad: la casa NUNCA sale marcada.

   ===================================================================== */

.ah-p .ubi{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,80px);

       align-items:center; padding:clamp(56px,7vw,110px) 0}

.ah-p .ubi h3{font:400 clamp(22px,2vw,28px)/1.2 "Instrument Serif",Georgia,serif; margin:0 0 18px}

.ah-p .ubi p{font-size:14px; line-height:1.72; opacity:.78; margin:0 0 18px; max-width:52ch}

.ah-p .ubi p.ubi__nota{font-size:12px; opacity:.5; margin:16px 0 0}

.ah-p .ubi__mapa{aspect-ratio:4/3; background:var(--lino); position:relative; overflow:hidden}

.ah-p .ubi__mapa img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

@media(max-width:860px){ .ah-p .ubi{grid-template-columns:1fr; gap:32px} }



/* =====================================================================

   10 · LA REJILLA Y LA TARJETA

   Tres por fila en el listado, cuatro en las similares de la ficha.

   ===================================================================== */

.ah-p .similares{padding:clamp(56px,7vw,100px) 0; border-top:1px solid var(--regla)}

.ah-p .similares__cab{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;

                flex-wrap:wrap; margin:0 0 clamp(28px,3.4vw,44px)}

.ah-p .similares h3{font:400 clamp(24px,2.6vw,36px)/1.1 "Instrument Serif",Georgia,serif; letter-spacing:-.01em}



.ah-p .rejilla{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));

           gap:clamp(20px,2.6vw,40px) clamp(20px,2.6vw,38px)}

.ah-p .rejilla--4{grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.2vw,32px)}

.ah-p .ficha{text-decoration:none; color:inherit; display:block}

.ah-p .ficha__foto{position:relative; overflow:hidden; aspect-ratio:4/5; background:#151515}

.ah-p .ficha__foto img{width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.02);

                 transition:transform 1.2s var(--sale-suave)}

.ah-p .ficha:hover .ficha__foto img{transform:scale(1.03)}

.ah-p .ficha__estado{position:absolute; top:14px; left:14px; z-index:2; color:var(--lino);

               background:rgba(10,10,10,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);

               padding:7px 11px; font-size:9px; letter-spacing:.2em; text-transform:uppercase}

.ah-p .ficha__etiqueta{position:absolute; top:14px; left:14px; z-index:2; color:var(--lino);

               background:rgba(10,10,10,.62); padding:6px 10px; pointer-events:none;

               font:400 10px/1 "Inter",-apple-system,"Segoe UI",sans-serif;

               letter-spacing:.16em; text-transform:uppercase}

/* La chapa de operacion ya ocupa esa esquina: la etiqueta baja una fila. */

.ah-p .ficha__estado ~ .ficha__etiqueta{top:46px}

.ah-p .ficha__cuerpo{padding:20px 0 0}

.ah-p .rejilla--4 .ficha__cuerpo{padding:18px 0 0}

.ah-p .ficha__linea{display:flex; align-items:baseline; justify-content:space-between; gap:18px}

.ah-p .ficha__dir{display:block; margin-bottom:9px; font:400 clamp(17px,1.5vw,22px)/1.25 "Instrument Serif",Georgia,serif;

             letter-spacing:-.01em; position:relative; padding-bottom:2px}

.ah-p .rejilla--4 .ficha__dir{margin-bottom:8px; font-size:clamp(17px,1.4vw,21px)}

.ah-p .ficha__dir::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px;

                   background:currentColor; transform:scaleX(0); transform-origin:left;

                   transition:transform var(--dur-inter) var(--sale-suave)}

.ah-p .ficha:hover .ficha__dir::after{transform:scaleX(1)}

.ah-p .ficha__precio{font-size:14px; font-weight:600; white-space:nowrap}

.ah-p .rejilla--4 .ficha__precio{font-size:13px}

.ah-p .ficha__pob{font-size:13px; opacity:.55}

.ah-p .rejilla--4 .ficha__pob{font-size:12px}

.ah-p .ficha__datos{margin:16px 0 0; padding-top:14px; border-top:1px solid var(--regla);

              font-size:12px; letter-spacing:.04em; opacity:.7}

.ah-p .rejilla--4 .ficha__datos{margin:14px 0 0; padding-top:12px}

@media(max-width:900px){ .ah-p .rejilla{grid-template-columns:repeat(2,minmax(0,1fr))} }

@media(max-width:560px){ .ah-p .rejilla{grid-template-columns:1fr; gap:36px} }

@media(max-width:1000px){ .ah-p .rejilla--4{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* en movil las similares son una fila que se desliza: cuatro tarjetas

   apiladas serian cuatro pantallas mas de pagina */

@media(max-width:600px){

  .ah-p .rejilla--4{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;

             margin:0 calc(-1 * var(--sangria)); padding:0 var(--sangria); scrollbar-width:none;

             scroll-padding-inline:var(--sangria)} /* 17/09: el imán respeta el margen de la 1.ª tarjeta */

  .ah-p .rejilla--4::-webkit-scrollbar{display:none}

  .ah-p .rejilla--4 .ficha{flex:0 0 74vw; scroll-snap-align:start}

}



/* =====================================================================

   11 · LA PUERTA DEL VENDEDOR

   Quien mira una casa de su propia calle muchas veces no es comprador:

   es un vecino tanteando precio (estructura-definitiva.md §3.b, 4).

   ===================================================================== */

.ah-p .vender{background:var(--lino); padding:clamp(56px,7vw,100px) var(--sangria)}

.ah-p .vender__caja{margin:0 auto; display:flex; align-items:center;

                justify-content:space-between; gap:32px; flex-wrap:wrap}

.ah-p .vender h2{font:400 clamp(24px,2.8vw,40px)/1.15 "Instrument Serif",Georgia,serif;

             letter-spacing:-.01em; max-width:26ch}

.ah-p .vender h2 span{display:block; opacity:.55}



/* =====================================================================

   LISTADO · la barra de filtros

   Etiqueta en versalitas encima del valor y separadores de 1 px.

   El desplegable de movil (<=640) lo gobierna motion.css con

   `.ah-desplegado`: aqui no se toca.

   ===================================================================== */

.ah-p .ah-filtros{

  /* CINCO celdas, como el prototipo (10/09/2026, Sergio): se retira la sexta,

     la del texto libre que yo habia anadido el mismo dia por el punto 4 de la

     lista del cliente. Con cinco, la celda vuelve a sus 228 px. Todo lo demas

     —relleno, reglas, tipografia— es el valor medido del prototipo. */

  display:grid; grid-template-columns:repeat(6,1fr) auto; align-items:stretch; gap:0;

  border:1px solid var(--regla); margin:clamp(28px,3.4vw,44px) 0 0;

}

.ah-p .ah-filtros .ah-filtro{padding:18px 22px; border-left:1px solid var(--regla); flex:none; min-width:0}

.ah-p .ah-filtros .ah-filtro:first-child{border-left:0}

.ah-p .ah-filtros .ah-filtro + .ah-filtro{border-left:1px solid var(--regla)}

.ah-p .ah-filtros .ah-filtro > label{display:block; font-size:9px; letter-spacing:.24em;

  text-transform:uppercase; opacity:.45; margin-bottom:9px; line-height:1.5; font-weight:400; color:#0A0A0A}

.ah-p .ah-filtros .ah-filtro select,

.ah-p .ah-filtros .ah-filtro input{

  width:100%; padding:0; border:0; border-radius:0; background:none; color:inherit;

  font-family:inherit; font-size:14px; font-weight:400; -webkit-appearance:none; appearance:none;

}

.ah-p .ah-filtros-buscar{

  -webkit-appearance:none; appearance:none; border:0; border-radius:0; cursor:pointer;

  background:#0A0A0A; color:var(--lino); font-family:inherit;

  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;

  padding:0 clamp(22px,2.6vw,38px); align-self:stretch; line-height:normal;

}

@media(min-width:641px) and (max-width:1080px){

  .ah-p .ah-filtros{grid-template-columns:repeat(2,1fr)}

  .ah-p .ah-filtros .ah-filtro,

  .ah-p .ah-filtros .ah-filtro + .ah-filtro{border-left:0; border-top:1px solid var(--regla)}

  .ah-p .ah-filtros .ah-filtro:nth-child(2n),

  .ah-p .ah-filtros .ah-filtro + .ah-filtro:nth-child(2n){border-left:1px solid var(--regla)}

  .ah-p .ah-filtros .ah-filtro:nth-child(-n+2){border-top:0}

  .ah-p .ah-filtros-buscar{grid-column:1/-1; padding:17px 0}

}

@media(max-width:640px){

  /* El desplegable del punto 4: «Comprar/Alquilar» a la vista y el resto

     detras del boton «Filtros». La mecanica (`.ah-desplegado`) es de

     motion.css; aqui solo la rejilla y el relleno del prototipo. */

  .ah-p .ah-filtros{grid-template-columns:1fr auto; border:1px solid var(--regla)}

  .ah-p .ah-filtros .ah-filtro-fijo{grid-column:1}

  .ah-p .ah-filtros .ah-filtro-plegable{grid-column:1/-1}

  .ah-p .ah-filtros-buscar{grid-column:1/-1; padding:17px 0}

  .ah-p .ah-filtros .ah-filtro + .ah-filtro{border-left:0; border-top:1px solid var(--regla)}

  .ah-p .ah-filtros-abrir{

    -webkit-appearance:none; appearance:none; border:0; border-left:1px solid var(--regla);

    border-radius:0; background:none; color:inherit; font-family:inherit; cursor:pointer;

    font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:0 18px;

  }

}



/* LISTADO · titular, apoyo y orden */

.ah-p .intro{padding:clamp(40px,5vw,72px) 0 clamp(28px,3.4vw,44px);

         display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap}

.ah-p .intro__eti{margin:0 0 clamp(14px,1.8vw,22px); font-size:11px; letter-spacing:.28em;

             text-transform:uppercase; opacity:.5}

.ah-p .intro h1{font:400 clamp(30px,3.6vw,54px)/1.04 "Instrument Serif",Georgia,serif; letter-spacing:-.02em}

.ah-p .intro p{margin:18px 0 0; font-size:15px; line-height:1.7; opacity:.78; max-width:60ch}

.ah-p .intro p.intro__sub{margin:14px 0 0; font-size:clamp(14px,1.15vw,17px); opacity:.6}

.ah-p .intro p a{text-decoration:underline; text-underline-offset:3px}

/* «ordenar por»: el mismo dibujo que una celda de la barra de filtros */

.ah-p .ah-orden{display:inline-flex; align-items:center; gap:14px; border:1px solid var(--regla);

            padding:12px 16px; font-size:13px; white-space:nowrap}

.ah-p .ah-orden label{font-size:9px; letter-spacing:.24em; text-transform:uppercase; opacity:.45}

.ah-p .ah-orden select{border:0; background:none; color:inherit; font-family:inherit; font-size:13px;

                   padding:0; -webkit-appearance:none; appearance:none; cursor:pointer}



/* LISTADO · cargar mas */

.ah-p .mas{display:flex; flex-direction:column; align-items:center; gap:14px;

       padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,110px)}

.ah-p .mas small{font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.45;

            font-variant-numeric:tabular-nums}



/* LISTADO · «¿necesitas asesoramiento?» */

.ah-p .aseso{background:var(--lino); text-align:center; padding:clamp(64px,8vw,120px) var(--sangria)}

.ah-p .aseso h2{font:400 clamp(28px,3.2vw,46px)/1.1 "Instrument Serif",Georgia,serif; letter-spacing:-.01em}

.ah-p .aseso p{margin:18px auto 30px; font-size:15px; line-height:1.7; opacity:.72; max-width:54ch}



/* LISTADO · dos fotos: «acerca de» y «el blog» */

.ah-p .dos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,64px);

       padding:clamp(56px,7vw,110px) 0}

.ah-p .dos figure{margin:0}

.ah-p .dos__foto{overflow:hidden; aspect-ratio:3/2; background:#151515; display:block}

.ah-p .dos__foto img{width:100%; height:100%; object-fit:cover; filter:saturate(.9);

                 transition:transform 1.2s var(--sale-suave)}

.ah-p .dos a:hover .dos__foto img{transform:scale(1.03)}

.ah-p .dos figcaption{padding:24px 0 0}

.ah-p .dos h3{font:400 clamp(22px,2vw,30px)/1.15 "Instrument Serif",Georgia,serif; letter-spacing:-.01em; margin:0 0 12px}

.ah-p .dos p{margin:0 0 20px; font-size:14px; line-height:1.7; opacity:.72; max-width:48ch}

@media(max-width:700px){ .ah-p .dos{grid-template-columns:1fr; gap:40px} }

/* 21/10/2026: cuando el blog no tiene entradas, la plantilla pinta SOLO la figura
   de «Acerca de» y le pone `dos--una` (ver archive-propiedad.php). Una sola columna,
   a la izquierda y con el ancho de una de las dos, para que no quede un hueco a la
   derecha ni la foto se estire al doble. */
.ah-p .dos--una{grid-template-columns:minmax(0,1fr); max-width:calc(50% - clamp(14px,2vw,32px))}
@media(max-width:700px){ .ah-p .dos--una{max-width:none} }



/* LISTADO · el aviso de «no hay propiedades» */

.ah-p .vacio{padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,110px); font-size:15px; line-height:1.7; opacity:.7}



/* La lista de enlaces de la tarjeta de datos (ficha). */

.ah-p .datos__links{list-style:none; margin:0; padding:0}

.ah-p .datos__links li + li{margin-top:12px}

.ah-p .datos__links a{text-decoration:none; font-size:14px; display:inline-flex; align-items:center; gap:10px;

                  position:relative; padding-bottom:2px; margin:0 0 0 15px}

.ah-p .datos__links a::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px;

                         background:currentColor; transform:scaleX(0); transform-origin:left;

                         transition:transform var(--dur-inter) var(--sale-suave)}

.ah-p .datos__links a:hover::after{transform:scaleX(1)}

.ah-p .datos__links svg{width:14px; height:9px; display:block; opacity:.6}





/* =====================================================================

   LO QUE HAY QUE DEVOLVER AL PROTOTIPO PORQUE EL KIT LO PISA

   Medido con `getComputedStyle` el 10/09/2026 contra `ficha.html` y

   `listado.html`. No es estilo nuevo: es el valor del prototipo escrito

   donde la tipografia global de Elementor o el reset de Hello lo cambian.

   ===================================================================== */



/* El kit da color y tracking a H1-H3, y aqui los titulares heredan del

   bloque: sobre foto y sobre negro tienen que ir en lino. */

.ah-p .teves h2,.ah-p .teves p{color:var(--lino)}

.ah-p .caract h3,.ah-p .ubi h3{letter-spacing:normal; color:#0A0A0A}

.ah-p .titulo h1,.ah-p .intro h1,.ah-p .similares h3,.ah-p .vender h2,

.ah-p .aseso h2,.ah-p .dos h3,.ah-p .texto__intro{color:#0A0A0A}

.ah-p .datos__precio{color:#0A0A0A}



/* Hello y Elementor sangran e interlinean las listas: en el prototipo la

   unica sangria de las caracteristicas es el aro de 6 px. */

.ah-p .caract ul,.ah-p .datos__links{list-style:none; padding-left:0; margin:0}

.ah-p .caract li{padding-left:0; margin-bottom:0; list-style:none}

.ah-p .datos__links li{padding-left:0; list-style:none}

.ah-p .caract li::marker,.ah-p .datos__links li::marker{content:''}



/* La banda negra de las destacadas: su leyenda va en lino, no en el negro

   que el kit da a los parrafos. */

.ah-p .dest__eti,.ah-p .dest__pob,.ah-p .dest__datos,.ah-p .dest__dir{color:var(--lino)}

/* El pie de las dos fotos del listado, en el negro de la casa. */

.ah-p .dos figcaption,.ah-p .dos figcaption .enlace{color:#0A0A0A}



/* =====================================================================

   EL CUERPO DEL ARTÍCULO — se estiliza POR ETIQUETA, no por clase

   ---------------------------------------------------------------------

   Sale de `the_content()`, o sea del editor de bloques: María y Laura

   escriben h2, listas, citas, tablas e imágenes SIN poder poner una

   clase. Si esto se estilara por clase, el día que escriban saldría

   texto sin formato. Valores copiados al pie de la letra de

   `prototipo/articulo.html` (.cuerpo).

   ⚠️ Y por eso va aquí y no en un control: el widget «Contenido de la

   entrada» solo expone tipografía y color del conjunto — no hay Style

   tab que alcance a un `blockquote` que aún no está escrito.

   ===================================================================== */

/* ↩️ 17/09/2026 (cliente): mismo texto que la descripción de la propiedad (`.ah-p .texto p`:

   15px / 1.72, 18px entre párrafos). Antes 16-20px / 1.95 y huecos enormes. */

.ah-cuerpo{font-size:15px; line-height:1.72}

.ah-cuerpo > *:first-child{margin-top:0}

.ah-cuerpo p{margin:0 0 18px}

.ah-cuerpo > p:first-of-type{opacity:.85}

.ah-cuerpo h2{margin:40px 0 12px;

  font:400 clamp(24px,2.6vw,36px)/1.15 "Instrument Serif",Georgia,serif;

  letter-spacing:-.02em}

.ah-cuerpo h3{margin:32px 0 10px;

  font:400 clamp(19px,1.8vw,24px)/1.25 "Instrument Serif",Georgia,serif}

.ah-cuerpo a{color:inherit; text-decoration:none;

  border-bottom:1px solid rgba(10,10,10,.35); padding-bottom:1px}

.ah-cuerpo a:hover{border-bottom-color:#0A0A0A}

.ah-cuerpo strong{font-weight:600}

.ah-cuerpo ul, .ah-cuerpo ol{margin:0 0 18px; padding-left:1.2em}

.ah-cuerpo li{margin:0 0 8px; padding-left:.3em}

.ah-cuerpo ul{list-style:none; padding-left:0}

/* la viñeta es el aro de 6 px de la ficha de propiedad, no un disco */

.ah-cuerpo ul li{position:relative; padding-left:26px}

.ah-cuerpo ul li::before{content:''; position:absolute; left:2px; top:.62em;

  width:6px; height:6px; border:1px solid currentColor; opacity:.55}

.ah-cuerpo blockquote{margin:2.2em 0; padding:0 0 0 clamp(20px,3vw,34px);

  border-left:1px solid rgba(10,10,10,.22);

  font:400 clamp(20px,2.1vw,30px)/1.4 "Instrument Serif",Georgia,serif;

  letter-spacing:-.01em}

.ah-cuerpo blockquote p{margin:0}

.ah-cuerpo hr{border:0; height:1px; background:rgba(10,10,10,.14); margin:2.6em 0}

.ah-cuerpo figure{margin:2.6em 0; width:100%}

.ah-cuerpo figure img{width:100%; height:auto; display:block}

/* `color:inherit`: el pie de foto del editor sale en #333 por el reset de

   Hello, y en el prototipo es el negro de la casa al 45 %. */

.ah-cuerpo figcaption{margin:12px 0 0; font-size:12px; line-height:1.5; opacity:.45;

  color:inherit}

.ah-cuerpo table{width:100%; border-collapse:collapse; margin:2em 0; font-size:14px}

/* ⚠️ `border:0` y `background:transparent` EXPLICITOS, y `line-height:inherit`.

   El prototipo solo declara `border-bottom` porque alli una celda no tiene mas

   estilo que el del navegador. En WordPress la tabla sale del editor de bloques

   y Hello/Elementor le dan filete gris por los cuatro lados, fondo al 7 % e

   interlineado 1,5: sin apagarlos, la tabla del articulo no es la del prototipo.

   ⚠️ El culpable es `hello-elementor/reset.css`, que trae `table td, table th`

   con filete gris y, peor, `table tbody > tr:nth-child(2n+1) > td` (0,1,3) para

   las filas alternas — eso GANA a `.ah-cuerpo td` (0,1,1). Por eso las reglas

   van con `table thead tr th` / `table tbody tr td`, que empatan y, al encolarse

   despues, mandan. Vale para CUALQUIER tabla que escriban Maria y Laura. */

.ah-cuerpo table thead tr th,

.ah-cuerpo table tbody tr th,

.ah-cuerpo table tbody tr td{text-align:left; padding:12px 14px 12px 0;

  border:0; border-bottom:1px solid rgba(10,10,10,.14);

  background:transparent; line-height:inherit}

/* Y una ultima de `reset.css`: `table thead:first-child tr:first-child th`

   (0,2,4) pone un filete arriba con la propiedad LOGICA `border-block-start`,

   que gana a nuestro `border:0` fisico por especificidad. Se apaga con su

   misma especificidad y su misma propiedad. */

.ah-cuerpo table thead:first-child tr:first-child th,

.ah-cuerpo table caption + thead tr:first-child th{border-block-start:0}



.ah-cuerpo table thead tr th,

.ah-cuerpo table tbody tr th{font-size:10px; letter-spacing:.18em; text-transform:uppercase;

  opacity:.5; font-weight:500}



/* =========================================================================

   COMPARTIR — RETIRADO el 10/09/2026.

   Estilaba el shortcode `[ah_compartir]` de la plantilla de Elementor 178,

   que ya no se usa: el articulo es `single.php` y lleva el marcado

   `.compartir` del prototipo, estilado en el bloque de `.ah-a`.

   ========================================================================= */



/* =========================================================================

   MICRO-ETIQUETA CANONICA — Inter 11 px, versalitas, tracking .28em, op .5

   -------------------------------------------------------------------------

   Coordinador, 10/09/2026: la micro-etiqueta es un recurso declarado en

   direccion-arte.md §3 y su canonica ya esta fijada. Donde el prototipo la

   rinde con otro tamano NO es diseno, es una regla que pisa a otra

   (`.intro p` gana a `.intro__eti` por especificidad). Se corrige aqui

   subiendo la especificidad al mismo nivel, sin !important.

   ========================================================================= */

.ah-p p.intro__eti{ font-size:11px; line-height:1.5; letter-spacing:.28em;

  text-transform:uppercase; opacity:.5; margin:0 0 clamp(14px,1.8vw,22px) }

.ah-p .dest__eti{ font-size:11px; line-height:1.5; letter-spacing:.28em }



/* =========================================================================

   BLOG — INDICE (`.ah-b`) Y FICHA DE ARTICULO (`.ah-a`)

   -------------------------------------------------------------------------

   Coordinador, 10/09/2026: el indice del blog y el articulo pasan a

   PLANTILLA PHP con el marcado del prototipo, como la ficha y el listado.

   Esta hoja es la de `prototipo/blog.html` y `prototipo/articulo.html`,

   valor por valor. Los espaciados van aqui porque en una plantilla PHP no

   hay Style tab que respetar: es la unica forma de que sea identico POR

   CONSTRUCCION. El cliente no maqueta el blog, escribe entradas.



   El CUERPO del articulo se estiliza POR ETIQUETA en el bloque `.ah-cuerpo`

   de mas arriba, que ya estaba escrito y no se toca.

   ========================================================================= */



.ah-b, .ah-a{

  --negro:#0A0A0A;

  --lino:#F4F4ED;

  --blanco:#FFFFFF;

  --dur-entrada:1s; --dur-inter:.5s; --dur-salida:.3s;

  --sale-suave:cubic-bezier(.25,1,.5,1);

  --cabecera-alto:clamp(58px,7vh,74px);

  --sangria:clamp(20px,5.8vw,120px);

  --regla:rgba(10,10,10,.14);



  background:var(--blanco); color:#0A0A0A;

  font:400 14px/1.5 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;

  -webkit-font-smoothing:antialiased;

  /* `body{padding-top:var(--cabecera-alto)}` del prototipo: la cabecera de

     Elementor es FIJA y no ocupa sitio en el flujo, asi que sin esto la

     pagina empezaria por debajo de la banda. Va aqui y no en el `body`

     para no tocar ni una pagina montada en Elementor. */

  padding-top:var(--cabecera-alto);

}

.ah-b *, .ah-a *{box-sizing:border-box}

.ah-b img, .ah-a img{display:block; max-width:100%}

/* ⚠️ SIN `margin:0`. En el prototipo el reset es `h1,h2,h3{margin:0}` (0,0,3) y

   pierde contra `.cuerpo h2`. Aqui hay que llevarlo a `.ah-a h2` (0,1,1), que

   EMPATA con `.ah-cuerpo h2` y, al ir despues en la hoja, le borraba los

   margenes al cuerpo del articulo. Cada titular de estas plantillas declara su

   propio margen, asi que el reset no hace falta: solo el peso. */

.ah-b h1,.ah-b h2,.ah-b h3,.ah-a h1,.ah-a h2,.ah-a h3{font-weight:400}

.ah-b p, .ah-a p{color:#0A0A0A}

.ah-b a, .ah-a a{color:inherit}



/* ---------- botones y enlace de texto de la casa ---------- */

.ah-a .boton{

  display:inline-flex; align-items:center; justify-content:center; gap:12px;

  background:#0A0A0A; color:var(--lino); text-decoration:none; border:1px solid #0A0A0A;

  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;

  padding:17px clamp(24px,2.6vw,40px); position:relative; overflow:hidden; cursor:pointer;

  font-family:inherit; -webkit-appearance:none; appearance:none; border-radius:0;

}

.ah-a .boton span{position:relative; z-index:2}

.ah-a .boton::before{content:''; position:absolute; inset:0; background:var(--lino);

  transform:scaleX(0); transform-origin:left;

  transition:transform var(--dur-inter) var(--sale-suave)}

.ah-a .boton:hover::before{transform:scaleX(1)}

.ah-a .boton:hover{color:#0A0A0A}

.ah-a .boton--hueco{background:transparent; color:var(--lino); border-color:rgba(244,244,237,.5)}

.ah-a .boton--hueco::before{background:var(--lino)}

.ah-a .boton--hueco:hover{color:#0A0A0A}

.ah-a .enlace{

  color:inherit; line-height:1.5; text-decoration:none; font-size:11px; letter-spacing:.16em;

  text-transform:uppercase; display:inline-flex; align-items:center; gap:10px;

  padding-bottom:4px; position:relative; white-space:nowrap;

}

.ah-a .enlace::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px;

  background:currentColor; transform:scaleX(0); transform-origin:left;

  transition:transform var(--dur-inter) var(--sale-suave)}

.ah-a .enlace:hover::after{transform:scaleX(1)}



/* =========================================================================

   INDICE DEL BLOG — `prototipo/blog.html`

   ========================================================================= */

.ah-b .cabe{

  background:var(--negro); color:var(--lino); position:relative; overflow:hidden;

  padding:calc(var(--cabecera-alto) + clamp(64px,9vh,120px)) var(--sangria) clamp(64px,8vw,110px);

}

.ah-b .cabe__foto{position:absolute; inset:0; z-index:0}

.ah-b .cabe__foto img{width:100%; height:100%; object-fit:cover; display:block; opacity:.34}

.ah-b .cabe__velo{position:absolute; inset:0; z-index:1;

  background:linear-gradient(10deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.6) 46%, rgba(10,10,10,.25) 100%)}

.ah-b .cabe__caja{position:relative; z-index:2; max-width:1320px; margin:0 auto}

/* `.cabe p` (0,1,1) se declara despues y ganaba a `.cabe__eti` (0,1,0): la

   etiqueta salia a 15,84 px. Se sube la especificidad, no se mueve la regla. */

.ah-b .cabe p.cabe__eti{margin:0 0 clamp(16px,2vw,24px); color:var(--lino);

  /* sin Roboto: es la pila exacta que declara el prototipo en esta regla */

  font-family:Inter,-apple-system,"Segoe UI",sans-serif; font-size:11px; line-height:1.5;

  letter-spacing:.28em; text-transform:uppercase; opacity:.5}

.ah-b .cabe h1{margin:0 0 clamp(20px,2.6vw,32px); max-width:16ch; color:var(--lino);

  font:400 clamp(38px,6vw,82px)/1.02 "Instrument Serif",Georgia,serif;

  letter-spacing:-.02em}

.ah-b .cabe p{margin:0; max-width:52ch; opacity:.7; color:var(--lino);

  font-size:clamp(14px,1.1vw,17px); line-height:1.7}



/* ---------- las categorias ---------- */

.ah-b .cats{background:var(--blanco); color:var(--negro);

  padding:clamp(28px,3.4vw,44px) var(--sangria); border-bottom:1px solid var(--regla)}

.ah-b .cats__caja{max-width:1320px; margin:0 auto; display:flex; gap:clamp(16px,2.4vw,34px);

  flex-wrap:wrap; align-items:center}

.ah-b .cats a{color:inherit; text-decoration:none; font-size:11px; letter-spacing:.16em;

  line-height:1.5; text-transform:uppercase; opacity:.5; padding-bottom:4px; position:relative;

  transition:opacity var(--dur-inter) var(--sale-suave)}

.ah-b .cats a:hover, .ah-b .cats a[aria-current]{opacity:1}

.ah-b .cats a[aria-current]::after{content:''; position:absolute; left:0; right:0; bottom:0;

  height:1px; background:currentColor}



/* ---------- la rejilla ---------- */

.ah-b .arts{background:var(--blanco); color:var(--negro);

  padding:clamp(48px,6vw,90px) var(--sangria) clamp(80px,10vw,140px)}

.ah-b .arts__caja{max-width:1320px; margin:0 auto}

.ah-b .arts__rejilla{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px)}

.ah-b .art{text-decoration:none; color:inherit; display:block}

.ah-b .art__foto{overflow:hidden; aspect-ratio:4/5; background:#e6e6dd}

.ah-b .art__foto img{width:100%; height:100%; object-fit:cover; display:block;

  transition:transform 1.2s var(--sale-suave)}

.ah-b .art:hover .art__foto img{transform:scale(1.03)}

.ah-b .art__eti{display:block; margin:clamp(14px,1.8vw,20px) 0 8px; font-size:10px;

  line-height:1.5; letter-spacing:.22em; text-transform:uppercase; opacity:.45}

.ah-b .art__tit{margin:0; color:#0A0A0A;

  font:400 clamp(18px,1.6vw,24px)/1.22 "Instrument Serif",Georgia,serif; letter-spacing:-.01em;

  background-image:linear-gradient(currentColor,currentColor);

  background-repeat:no-repeat; background-position:0 100%; background-size:0 1px;

  transition:background-size var(--dur-inter) var(--sale-suave); display:inline}

.ah-b .art:hover .art__tit{background-size:100% 1px}

.ah-b .art__fecha{margin:10px 0 0; font-size:12px; line-height:1.5; opacity:.45}

@media(max-width:860px){ .ah-b .arts__rejilla{grid-template-columns:repeat(2,1fr)} }

@media(max-width:640px){ .ah-b .arts__rejilla{grid-template-columns:1fr; gap:34px} }



/* =========================================================================

   FICHA DE ARTICULO — `prototipo/articulo.html`

   ========================================================================= */

.ah-a .cabe{background:var(--blanco); color:var(--negro);

  padding:clamp(40px,5.4vw,72px) var(--sangria) clamp(28px,3.4vw,46px)}

.ah-a .cabe__caja{max-width:1320px; margin:0 auto}

.ah-a .cabe__eti{display:flex; align-items:center; gap:16px; flex-wrap:wrap;

  margin:0 0 clamp(20px,2.6vw,32px);

  font-size:10px; line-height:1.5; letter-spacing:.22em; text-transform:uppercase}

.ah-a .cabe__eti__cat{color:inherit; text-decoration:none; border-bottom:1px solid currentColor;

  padding-bottom:3px}

.ah-a .cabe__eti i{font-style:normal; width:3px; height:3px; background:currentColor;

  opacity:.4; flex:0 0 auto}

.ah-a .cabe__eti time, .ah-a .cabe__eti span{opacity:.5}

.ah-a .cabe h1{margin:0 0 clamp(20px,2.6vw,32px); color:#0A0A0A;

  font:400 clamp(32px,4.6vw,62px)/1.08 "Instrument Serif",Georgia,serif;

  letter-spacing:-.02em}

.ah-a .cabe__pie{margin:0; font-size:clamp(15px,1.25vw,19px); line-height:1.65; opacity:.7}



/* ---------- imagen destacada ---------- */

.ah-a .destacada{background:var(--blanco)}

.ah-a .destacada figure{margin:0; overflow:hidden; width:100%;

  height:clamp(200px,42vw,560px)}

.ah-a .destacada img{width:100%; height:100%; object-fit:cover; display:block}

.ah-a .destacada figcaption{max-width:1320px; margin:0 auto;

  padding:12px var(--sangria) 0;

  font-size:12px; line-height:1.5; opacity:.45}



/* ---------- el cuerpo ---------- */

.ah-a .art{background:var(--blanco); color:var(--negro);

  padding:clamp(40px,5vw,72px) var(--sangria) clamp(56px,7vw,96px)}

.ah-a .art__caja{max-width:1320px; margin:0 auto}



/* ---------- compartir: enlaces de TEXTO, sin un script de terceros ---------- */

.ah-a .compartir{padding-top:clamp(28px,3.4vw,44px);

  border-top:1px solid var(--regla);

  display:flex; align-items:baseline; gap:clamp(14px,2vw,28px); flex-wrap:wrap}

.ah-a .compartir__eti{margin:0 auto 0 0; font-size:10px; line-height:1.5; letter-spacing:.22em;

  text-transform:uppercase; opacity:.45}

.ah-a .compartir a, .ah-a .compartir button{

  color:inherit; background:none; border:0; padding:0 0 4px; cursor:pointer;

  font:inherit; font-size:11px; line-height:1.5; letter-spacing:.16em; text-transform:uppercase;

  text-decoration:none; position:relative;

}

.ah-a .compartir a::after, .ah-a .compartir button::after{

  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;

  background:currentColor; transform:scaleX(0); transform-origin:left;

  transition:transform var(--dur-inter) var(--sale-suave);

}

.ah-a .compartir a:hover::after, .ah-a .compartir button:hover::after{transform:scaleX(1)}

.ah-a .compartir button[data-hecho]::after{transform:scaleX(1)}



/* ---------- la puerta del vendedor ---------- */

.ah-a .puerta{background:var(--negro); color:var(--lino);

  padding:clamp(64px,8vw,110px) var(--sangria); text-align:center}

.ah-a .puerta__caja{max-width:720px; margin:0 auto}

.ah-a .puerta h2{margin:0 0 clamp(16px,2vw,26px); color:var(--lino);

  font:400 clamp(26px,3.4vw,46px)/1.1 "Instrument Serif",Georgia,serif;

  letter-spacing:-.02em}

.ah-a .puerta p{margin:0 0 clamp(26px,3.2vw,40px); opacity:.66; color:var(--lino);

  font-size:clamp(14px,1.05vw,16px); line-height:1.7}



/* ---------- relacionados: la misma tarjeta del blog ---------- */

.ah-a .rel{background:var(--lino); color:var(--negro);

  padding:clamp(64px,8vw,110px) var(--sangria)}

.ah-a .rel__caja{max-width:1320px; margin:0 auto}

.ah-a .rel__cab{display:flex; align-items:baseline; justify-content:space-between;

  gap:24px; flex-wrap:wrap; padding-bottom:clamp(18px,2.2vw,28px);

  border-bottom:1px solid var(--regla); margin:0 0 clamp(30px,3.6vw,48px)}

.ah-a .rel h2{margin:0; color:#0A0A0A;

  font:400 clamp(24px,3vw,44px)/1.05 "Instrument Serif",Georgia,serif;

  letter-spacing:-.02em}

.ah-a .rel__rejilla{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px)}

.ah-a .art-c{text-decoration:none; color:inherit; display:block}

.ah-a .art-c__foto{overflow:hidden; aspect-ratio:4/5; background:#e6e6dd}

.ah-a .art-c__foto img{width:100%; height:100%; object-fit:cover; display:block;

  transition:transform 1.2s var(--sale-suave)}

.ah-a .art-c:hover .art-c__foto img{transform:scale(1.03)}

.ah-a .art-c__eti{display:block; margin:clamp(14px,1.8vw,20px) 0 8px; font-size:10px;

  line-height:1.5; letter-spacing:.22em; text-transform:uppercase; opacity:.45}

.ah-a .art-c__tit{margin:0; color:#0A0A0A;

  font:400 clamp(18px,1.6vw,24px)/1.22 "Instrument Serif",Georgia,serif; letter-spacing:-.01em;

  background-image:linear-gradient(currentColor,currentColor);

  background-repeat:no-repeat; background-position:0 100%; background-size:0 1px;

  transition:background-size var(--dur-inter) var(--sale-suave); display:inline}

.ah-a .art-c:hover .art-c__tit{background-size:100% 1px}

.ah-a .art-c__fecha{margin:10px 0 0; font-size:12px; line-height:1.5; opacity:.45}

@media(max-width:860px){ .ah-a .rel__rejilla{grid-template-columns:repeat(2,1fr)} }

@media(max-width:640px){ .ah-a .rel__rejilla{grid-template-columns:1fr; gap:34px} }



/* «Consultar» en la ficha es un enlace a Contacto (15/10/2026). Subrayado fijo de 1 px: en móvil

   no hay hover y, sin él, no se leería como pulsable. Mismo cuerpo y color que el precio. */

.ah-p .datos__precio a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;transition:opacity .5s cubic-bezier(.25,1,.5,1)}

.ah-p .datos__precio a:hover{opacity:.55}