/*
Theme Name: Valuarch (Gratis)
Theme URI: https://valuarch.com
Author: Crosell
Author URI: https://valuarch.com
Description: Theme propio, liviano y 100% gratis para Valuarch.
Version: 1.0
Text Domain: valuarch
*/

/* ================================
   GOOGLE FONTS (gratis)
   ================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ================================
   VARIABLES DE MARCA (VALUARCH)
   ================================ */
:root{
  --va-bg:#F4F1EC;               /* Marfil técnico */
  --va-olive:#5F6F52;            /* Verde oliva */
  --va-sand:#D6B58A;             /* Arena tostada */
  --va-terracotta:#C88A5A;       /* Terracota suave */
  --va-bluegray:#8FA3A8;         /* Azul grisáceo */
  --va-graphite:#2F2F2F;         /* Grafito */
  --va-white:#fff;

  --va-radius:18px;
  --va-shadow:0 10px 30px rgba(0,0,0,.08);
  --va-border:1px solid rgba(0,0,0,.08);

  --va-serif:"Playfair Display", serif;
  --va-sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Front-page.php inyecta estas variables inline */
  --va-hero-img:none;
  --va-body-tapiz:none;
  --va-folder-svg:none;
}

/* ================================
   RESET / BASE
   ================================ */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--va-bg);
  color:var(--va-graphite);
  font-family:var(--va-sans);
  line-height:1.55;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{
  outline:3px solid rgba(95,111,82,.55);
  outline-offset:3px;
}

/* ================================
   CONTENEDOR
   ================================ */
.va-container{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
}

/* ================================
   HEADER (logo izquierda / menú derecha)
   ================================ */
.va-header{
  background:rgba(244,241,236,.85);
  backdrop-filter: blur(6px);
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* contenedor interno */
.va-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between; /* 👈 clave */
  min-height:72px;
}

/* navegación */
.va-nav{
  display:flex;
  align-items:center;
}

.va-menu{
  list-style:none;
  display:flex;
  gap:15px;
  padding:0;
  margin:0;

  /* ✅ FIX: "right" no existe en align-items (no cambia el look) */
  align-items:flex-end;
}

.va-menu a{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  font-weight:900;
  font-size:16px;
  letter-spacing:.02em;
  opacity:.95;
}
.va-menu a:hover{
  background:rgba(0,0,0,.05);
  text-decoration:none;
}

/* responsive */
@media (max-width: 620px){
  .va-header-inner{
    min-height:64px;
  }
  .va-logo-img{
    height:36px;
  }
}

/* ================================
   HOME
   ================================ */
.valuarch-home{ width:100%; }

/* ================================
   HERO (logo arriba izquierda / texto debajo)
   ================================ */
.va-hero{
  position:relative;
  min-height:40vh;
  display:flex;
  align-items:center;                 /* centra vertical el bloque de texto */
  padding:120px 6vw 140px;            /* deja espacio para carpetas abajo */
  background-image:var(--va-hero-img);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  overflow:hidden;
}

/* overlay */
.va-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(0,0,0,.65),
    rgba(0,0,0,.35),
    rgba(0,0,0,.15)
  );
  z-index:1;
}

/* LOGO dentro del hero: fijo arriba a la izquierda */
.va-hero .va-brand{
  position:absolute;
  top:46px;                           /* 🔼 más arriba */
  left:6vw;
  z-index:3;
  display:block;
  text-decoration:none;
}

.va-hero .va-logo-img{
  width:clamp(280px, 38vw, 560px);  /* grande */
  height:auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.45));
}

/* 
  BLOQUE DE TEXTO DEL HERO
  Posiciona el texto debajo del logo
  y lo desplaza visualmente hacia el centro-derecha
*/
.va-hero .va-container{
  position:relative;        /* Permite moverlo sin sacarlo del flujo */
  z-index:2;                /* Asegura que quede sobre el overlay */
  max-width:680px;          /* Ancho cómodo para lectura */

  margin-top:120px;         /* Baja el texto para quedar debajo del logo */
  margin-left:16vw;         /* Lo separa del borde izquierdo del hero */

  /* ✅ FIX: antes tenías 2 transforms; el segundo pisaba al primero */
  transform: translate(40px, -80px);
}

/* texto */
.va-kicker{
  margin:0 0 10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  color:#fff;
  opacity:.9;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}

.va-title{
  margin:0 0 14px;
  font-family:var(--va-serif);
  font-weight:700;
  line-height:1.06;
  font-size:clamp(34px, 4.6vw, 62px);
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
}

.va-subtitle{
  margin:0 0 18px;
  font-size:16px;
  max-width:65ch;
  color:#fff;
  opacity:.95;
  text-shadow:0 2px 12px rgba(0,0,0,.22);
}

.va-hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* ================================
   RESPONSIVE
   ================================ */
@media (max-width: 900px){
  .va-hero{
    padding:110px 24px 140px;
    align-items:flex-start;
  }

  .va-hero .va-brand{
    top:22px;
    left:24px;
  }

  .va-hero .va-logo-img{
    width:260px;
  }

  .va-hero .va-container{
    margin-top:80px;   /* debajo del logo */
    margin-left:0;
    max-width:720px;
    text-align:left;

    /* ✅ para móvil: no empujar con translate */
    transform:none;
  }
}

@media (max-width: 620px){
  .va-hero .va-logo-img{
    width:220px;
  }

  .va-title{
    font-size:34px;
    line-height:1.10;
  }
}

/* ================================
   BOTONES
   ================================ */
.va-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:12px;
  border:var(--va-border);
  font-weight:800;
  text-decoration:none !important;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.va-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(0,0,0,.10);
}
.va-btn-primary{
  background:var(--va-olive);
  border-color:rgba(0,0,0,.12);
  color:#fff;
}
.va-btn-primary:hover{ background:#566349; }
.va-btn-ghost{
  background:rgba(255,255,255,.55);
}

/* ================================
   3 CARPETAS “montadas” (no dentro del hero)
   ================================ */
.va-folders{
  position:relative;
  z-index:5;
  margin-top:-72px;  /* sube sobre el final del hero */
  padding-bottom:10px;
}
.va-folders-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}

/* base folder card */
.va-folder-card{
  position:relative;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 14px 30px rgba(0,0,0,.14);
  overflow:hidden;
  background:rgba(255,255,255,.92);
}

/* “lengüeta” superior tipo carpeta */
.va-folder-tab{
  height:24px;
  width:54%;
  border-radius:14px 14px 0 0;
  margin-left:16px;
  margin-top:10px;
  background:rgba(0,0,0,.08);
}

/* cuerpo */
.va-folder-body{
  padding:14px 16px 16px;
  border-top:1px solid rgba(0,0,0,.08);
}
.va-folder-title{
  margin:6px 0 8px;
  font-family:var(--va-serif);
  font-weight:800;
  font-size:18px;
}
.va-folder-text{
  margin:0 0 12px;
  opacity:.9;
  font-size:13.5px;
}
.va-folder-link{
  font-weight:900;
  opacity:.9;
}
.va-folder-link:hover{ text-decoration:underline; }

/* color variants */
.va-folder-olive{ background:linear-gradient(180deg, rgba(95,111,82,.45), rgba(255,255,255,.92) 55%); }
.va-folder-sand{ background:linear-gradient(180deg, rgba(214,181,138,.55), rgba(255,255,255,.92) 55%); }
.va-folder-terracotta{ background:linear-gradient(180deg, rgba(200,138,90,.50), rgba(255,255,255,.92) 55%); }

.va-folder-olive .va-folder-tab{ background:rgba(95,111,82,.55); }
.va-folder-sand .va-folder-tab{ background:rgba(214,181,138,.70); }
.va-folder-terracotta .va-folder-tab{ background:rgba(200,138,90,.62); }

/* ================================
   CUERPO con tapiz (ladrillos)
   ================================ */
.va-body{
  position:relative;
  padding-top:20px;
  background-color:var(--va-bg);
  background-image:var(--va-body-tapiz);
  background-size:520px auto;
  background-repeat:repeat;
  background-attachment:scroll;
}

/* capa para suavizar tapiz */
.va-body::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(244,241,236,.82);
  pointer-events:none;
}
.va-body > *{ position:relative; z-index:1; }

/* ================================
   SECCIONES
   ================================ */
.va-section{ padding:42px 0; }
.va-h2{
  margin:0 0 10px;
  font-family:var(--va-serif);
  font-weight:800;
  font-size:clamp(22px, 2.2vw, 36px);
  line-height:1.1;
}
.va-lead{
  margin:0 0 18px;
  opacity:.9;
  max-width:72ch;
}

/* ================================
   PROPIEDADES: layout 70/30
   ================================ */
.va-props-head{ margin-bottom:14px; }

.va-props-layout{
  display:grid;
  grid-template-columns: 1.4fr .6fr; /* ~70/30 */
  gap:18px;
  align-items:start;
}

/* IZQUIERDA (propiedad destacada por provincia) */
.va-props-main{ min-height:340px; }
.va-prop-card{
  display:none;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.85);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}
.va-prop-card.is-active{ display:grid; }

.va-prop-thumb{
  border-radius:14px;
  min-height:220px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02)),
    url("https://valuarch.com/wp-content/uploads/2026/02/ChatGPT-Image-6-feb-2026-08_38_35-p.m.png");
  background-size:cover;
  background-position:center;
  border:1px solid rgba(0,0,0,.08);
}
.va-prop-body{ display:flex; flex-direction:column; gap:10px; }
.va-prop-place{ font-weight:800; opacity:.88; }
.va-prop-price{
  font-family:var(--va-serif);
  font-weight:900;
  font-size:44px;
  letter-spacing:.02em;
}
.va-prop-bullets{
  margin:0;
  padding-left:18px;
  opacity:.9;
}
.va-prop-bullets li{ margin:6px 0; }

/* ================================
   ARCHIVADOR derecha (carpetas provincias)
   ================================ */
.va-archive-shell{
  border-radius:18px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.72);
  box-shadow:0 14px 30px rgba(0,0,0,.10);
  overflow:hidden;
}

.va-archive-head{
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.75);
}
.va-archive-title{
  margin:0;
  font-family:var(--va-serif);
  font-weight:900;
  font-size:20px;
  line-height:1.15;
}

/* Contenedor de carpetas */
.va-archive-tabs{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Cada provincia se ve como “carpeta” */
.va-archive-tab{
  position:relative;
  appearance:none;
  width:100%;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  padding:10px 12px 10px 52px;

  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;

  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;

  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 10px 18px rgba(0,0,0,.08);
  background:rgba(255,255,255,.82);
}

/* Lengüeta superior de carpeta */
.va-archive-tab::before{
  content:"";
  position:absolute;
  left:16px;
  top:-7px;
  width:44%;
  height:18px;
  border-radius:12px 12px 0 0;
  background:rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.10);
  border-bottom:none;
}

/* Brillo interior para “volumen” */
.va-archive-tab::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  pointer-events:none;
}

.va-archive-tab:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(0,0,0,.10);
}

.va-archive-tab.is-active{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(0,0,0,.12);
  border-color:rgba(0,0,0,.16);
}

/* Icono carpeta (usa tu SVG) */
.va-folder-icon{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:22px;

  background-image:var(--va-folder-svg);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;

  opacity:.95;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.12));
}

.va-folder-label{
  display:inline-block;
  line-height:1;
}

/* Colores por provincia */
.va-archive-tab[data-province="sj"]{ background:rgba(95,111,82,.20); }
.va-archive-tab[data-province="sj"]::before{ background:rgba(95,111,82,.36); }

.va-archive-tab[data-province="al"]{ background:rgba(214,181,138,.24); }
.va-archive-tab[data-province="al"]::before{ background:rgba(214,181,138,.40); }

.va-archive-tab[data-province="ca"]{ background:rgba(143,163,168,.22); }
.va-archive-tab[data-province="ca"]::before{ background:rgba(143,163,168,.36); }

.va-archive-tab[data-province="he"]{ background:rgba(120,150,170,.18); }
.va-archive-tab[data-province="he"]::before{ background:rgba(120,150,170,.32); }

.va-archive-tab[data-province="gu"]{ background:rgba(220,200,150,.20); }
.va-archive-tab[data-province="gu"]::before{ background:rgba(220,200,150,.36); }

.va-archive-tab[data-province="pu"]{ background:rgba(200,138,90,.22); }
.va-archive-tab[data-province="pu"]::before{ background:rgba(200,138,90,.36); }

.va-archive-tab[data-province="li"]{ background:rgba(95,120,90,.18); }
.va-archive-tab[data-province="li"]::before{ background:rgba(95,120,90,.32); }

/* Mini panel inferior */
.va-archive-mini{
  border-top:1px solid rgba(0,0,0,.08);
  padding:14px;
  background:rgba(255,255,255,.80);
}
.va-archive-mini-logo{
  width:170px;
  margin:0 auto 10px;
  opacity:.95;
}
.va-archive-mini-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.va-archive-mini-links a{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.70);
  font-weight:800;
}
.va-archive-mini-links a:hover{
  background:rgba(0,0,0,.04);
  text-decoration:none;
}

/* ================================
   EDITORIAL
   ================================ */
.va-editorial{
  background:rgba(255,255,255,.45);
  border-top:var(--va-border);
  border-bottom:var(--va-border);
}

/* ================================
   CTA FINAL
   ================================ */
.va-cta{ padding:44px 0 70px; }
.va-cta-box{
  display:flex;
  gap:18px;
  justify-content:space-between;
  align-items:center;
  padding:18px;
  border-radius:calc(var(--va-radius) + 6px);
  border:var(--va-border);
  background:linear-gradient(135deg,
    rgba(95,111,82,.14),
    rgba(214,181,138,.18),
    rgba(143,163,168,.14)
  );
  box-shadow:var(--va-shadow);
}
.va-cta-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* ================================
   FOOTER
   ================================ */
footer{ background:rgba(255,255,255,.55); }

/* ================================
   RESPONSIVE
   ================================ */
@media (max-width: 1020px){
  .va-hero{ min-height:62vh; padding:74px 0 130px; }
  .va-grid-4{ grid-template-columns:repeat(2, 1fr); }
  .va-folders-grid{ grid-template-columns:1fr; }
  .va-folders{ margin-top:-56px; }
  .va-props-layout{ grid-template-columns:1fr; }
}

@media (max-width: 620px){
  .va-container{ width:calc(100% - 28px); }
  .va-hero{
    min-height:82vh;
    padding:74px 0 130px;
    background-position:center top;
  }
  .va-title{ font-size:34px; line-height:1.10; }

  .va-grid-4{ grid-template-columns:1fr; }
  .va-cta-box{ flex-direction:column; align-items:flex-start; }

  header nav ul{
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  header nav a{ padding:7px 9px; }
}

/* ================================
   ABOUT US (about-us-3)
   ================================ */

/* ✅ Se mantiene tu estado actual + se agrega tapiz SOLO aquí */
.va-about{
  width:100%;
  position:relative;

  /* tapiz garantizado: usa variable si la inyectás en el template,
     y si no, usa el URL fijo (no rompe nada) */
  background-color:#F4F1EA;
  background-image: var(--va-about-tapiz, url("https://valuarch.com/wp-content/uploads/2026/02/ladrillos.png"));
  background-repeat:repeat;
  background-size:auto;
  background-attachment:fixed;
}

/* capa suavizadora (igual a va-body) para que el tapiz respire */
.va-about::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(244,241,236,.82);
  pointer-events:none;
}
.va-about > *{ position:relative; z-index:1; }

/* HERO interno */
.va-about-hero{
  padding:64px 0 34px;

  /* conserva tu gradiente + permite hero opcional por variable */
  background:
    linear-gradient(135deg, rgba(95,111,82,.10), rgba(214,181,138,.12), rgba(143,163,168,.10)),
    var(--va-about-hero, none);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;

  border-bottom:1px solid rgba(0,0,0,.06);
}

.va-about-hero-top{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin-bottom:18px;
}
.va-about-logo{
  width:220px;
  height:auto;
  opacity:.98;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.10));
}
.va-about-title{
  margin:0 0 10px;
  font-family:var(--va-serif);
  font-weight:900;
  letter-spacing:.01em;
  font-size:clamp(34px, 4vw, 54px);
  line-height:1.06;
}
.va-about-subtitle{
  margin:0 0 16px;
  max-width:55ch;
  opacity:.92;
  font-size:22px;
}
/* ABOUT US – texto editorial a la derecha */
/* ABOUT US – mover texto con transform */
.va-about-title,
.va-about-subtitle{
  text-align:center;
  transform: translateX(240px) translateY(-40px);
}
@media (max-width: 620px){
  .va-about-title,
  .va-about-subtitle{
    transform:none;
    text-align:left;
  }
}

.va-about-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* grids */
.va-about-grid-2{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:start;
}
.va-about-grid-4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}

/* cards */
.va-about-card{
  border-radius:18px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.70);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
  padding:18px;
}
.va-about-h3{
  margin:0 0 10px;
  font-family:var(--va-serif);
  font-weight:900;
  font-size:20px;
  line-height:1.15;
}
.va-about-p{ margin:0; opacity:.92; }
.va-about-head{ margin-bottom:14px; }

/* lists */
.va-about-list{
  margin:10px 0 0;
  padding-left:18px;
  opacity:.92;
}
.va-about-list li{ margin:8px 0; }

/* services */
.va-about-service{
  border-radius:18px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.82);
  box-shadow:0 14px 28px rgba(0,0,0,.08);
  padding:16px;
  overflow:hidden;
  position:relative;
}
.va-about-sv-title{
  margin:0 0 8px;
  font-family:var(--va-serif);
  font-weight:900;
  font-size:18px;
}
.va-about-sv-text{ margin:0 0 12px; opacity:.92; font-size:14px; }
.va-about-sv-link{ font-weight:900; opacity:.92; }
.va-about-sv-link:hover{ text-decoration:underline; }

.va-sv-olive{ background:linear-gradient(180deg, rgba(95,111,82,.20), rgba(255,255,255,.86) 55%); }
.va-sv-sand{ background:linear-gradient(180deg, rgba(214,181,138,.22), rgba(255,255,255,.86) 55%); }
.va-sv-blue{ background:linear-gradient(180deg, rgba(143,163,168,.22), rgba(255,255,255,.86) 55%); }
.va-sv-terra{ background:linear-gradient(180deg, rgba(200,138,90,.22), rgba(255,255,255,.86) 55%); }

/* diferenciadores */
.va-about-band{
  border-radius:22px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.55);
  box-shadow:0 14px 28px rgba(0,0,0,.08);
  padding:18px;
}
.va-about-diff-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:12px;
}
.va-about-diff-item{
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.70);
  padding:14px;
}

/* mini resumen */
.va-about-mini-box{
  margin-top:12px;
  display:grid;
  gap:8px;
  padding:12px;
  border-radius:14px;
  border:1px dashed rgba(0,0,0,.16);
  background:rgba(255,255,255,.65);
}

/* ✅ dejar respirar el tapiz entre secciones */
.va-about .va-section{
  background:transparent;
}

/* Responsive */
@media (max-width: 1020px){
  .va-about-grid-4{ grid-template-columns:repeat(2, 1fr); }
  .va-about-grid-2{ grid-template-columns:1fr; }
  .va-about-diff-grid{ grid-template-columns:1fr; }
}
@media (max-width: 620px){
  .va-about-logo{ width:190px; }
  .va-about-hero{ padding:52px 0 26px; }
  .va-about-grid-4{ grid-template-columns:1fr; }
}
/* ================================
   CONOCÉ MÁS (EDITORIAL)
   ================================ */
.va-page.va-conoce{ width:100%; }

.va-conoce-hero{
  padding:56px 0 22px;
  background:rgba(255,255,255,.40);
  border-bottom:1px solid rgba(0,0,0,.08);
}

.va-conoce-hero .va-title{
  color:var(--va-graphite);
  text-shadow:none;
  margin-top:6px;
}

.va-conoce-hero .va-subtitle{
  color:var(--va-graphite);
  opacity:.9;
  text-shadow:none;
  max-width:78ch;
}

.va-conoce-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.va-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.75);
  font-weight:900;
  letter-spacing:.02em;
  text-decoration:none !important;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.va-pill:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  background:rgba(255,255,255,.92);
}
.va-pill.is-active{
  background:rgba(95,111,82,.18);
  border-color:rgba(95,111,82,.40);
}

.va-post-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.va-post-card{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.82);
  box-shadow:0 14px 28px rgba(0,0,0,.10);
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.va-post-thumb{
  display:block;
  position:relative;
  aspect-ratio: 16 / 9;
  background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
  overflow:hidden;
}
.va-post-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.01);
}
.va-post-thumb-fallback{
  width:100%;
  height:100%;
  background:
    linear-gradient(135deg, rgba(95,111,82,.20), rgba(214,181,138,.20), rgba(143,163,168,.20));
}

.va-post-body{
  padding:14px 14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.va-post-cat{
  display:inline-flex;
  align-self:flex-start;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(244,241,236,.85);
}

.va-post-title{
  margin:0;
  font-family:var(--va-serif);
  font-weight:900;
  font-size:20px;
  line-height:1.15;
}
.va-post-title a{ text-decoration:none; }
.va-post-title a:hover{ text-decoration:underline; }

.va-post-excerpt{
  margin:0;
  opacity:.88;
  font-size:14px;
  line-height:1.55;
}

.va-post-cta{
  margin-top:auto;
  font-weight:900;
  text-decoration:none !important;
  opacity:.92;
}
.va-post-cta:hover{ text-decoration:underline !important; }

.va-empty{
  padding:18px;
  border-radius:18px;
  border:1px dashed rgba(0,0,0,.18);
  background:rgba(255,255,255,.65);
}

/* Responsive */
@media (max-width: 1020px){
  .va-post-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 620px){
  .va-conoce-hero{ padding:44px 0 18px; }
  .va-post-grid{ grid-template-columns:1fr; }
}
/* ================================
   SINGLE (ARTÍCULO EDITORIAL)
   ================================ */
.va-page.va-single{ width:100%; }

.va-single-hero{
  padding:44px 0 18px;
  background:rgba(255,255,255,.40);
  border-bottom:1px solid rgba(0,0,0,.08);
}

.va-single-hero-inner{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.va-single-cat{
  display:inline-flex;
  align-self:flex-start;
  padding:7px 11px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(244,241,236,.85);
}

.va-single-title{
  margin:0;
  font-family:var(--va-serif);
  font-weight:900;
  font-size:clamp(28px, 3.2vw, 46px);
  line-height:1.12;
  color:var(--va-graphite);
}

.va-single-meta{
  opacity:.78;
  font-weight:700;
  display:flex;
  gap:10px;
  align-items:center;
}

.va-dot{ opacity:.6; }

.va-single-cover{ padding:18px 0 6px; }

.va-single-figure{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.70);
  box-shadow:0 16px 30px rgba(0,0,0,.10);
}
.va-single-figure img{
  width:100%;
  height:auto;
  display:block;
}

.va-single-content .va-container{
  display:block;
}

.va-article{
  max-width:78ch;
  margin:0 auto;
  padding:18px 16px 8px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.78);
  box-shadow:0 12px 26px rgba(0,0,0,.08);
}

.va-article p{ margin:0 0 14px; }
.va-article h2, .va-article h3{
  font-family:var(--va-serif);
  margin:18px 0 10px;
}
.va-article a{ text-decoration:underline; }
.va-article a:hover{ text-decoration:underline; }

.va-single-cta{
  margin:18px auto 0;
  max-width:78ch;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.10);
  background:linear-gradient(135deg,
    rgba(95,111,82,.14),
    rgba(214,181,138,.18),
    rgba(143,163,168,.14)
  );
  box-shadow:var(--va-shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.va-single-cta-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.va-comments{
  margin:18px auto 0;
  max-width:78ch;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.76);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
}

/* Responsive */
@media (max-width: 620px){
  .va-single-cta{
    flex-direction:column;
    align-items:flex-start;
  }
  .va-article{ padding:16px 14px 6px; }
}