/* ============================================================
   Versátiles ONG — estilos del tema
   Bloque 1: estilos globales portados del <helmet> original
   ============================================================ */
*{box-sizing:border-box;}
body{margin:0;}
html{scroll-behavior:smooth;}
::selection{background:#fbb03b;color:#1c140b;}
@keyframes vsway{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(-24px) rotate(calc(var(--r,0deg) + 7deg));}}
@keyframes vfloatSlow{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
/* Revoloteo tipo libélula: pequeños desplazamientos en distintas direcciones. */
@keyframes vhover{
  0%{transform:translate(0,0) rotate(var(--r,0deg));}
  25%{transform:translate(12px,-9px) rotate(calc(var(--r,0deg) + 5deg));}
  50%{transform:translate(-7px,-15px) rotate(calc(var(--r,0deg) - 4deg));}
  75%{transform:translate(-13px,-5px) rotate(calc(var(--r,0deg) + 3deg));}
  100%{transform:translate(0,0) rotate(var(--r,0deg));}
}
@keyframes vspin{to{transform:rotate(360deg);}}
/* Hojas que caen del árbol: bajan de arriba a abajo meciéndose y girando.
   La opacidad se controla aquí (fade in/out) con la variable --op. */
@keyframes vfall{
  0%{transform:translateY(-14vh) translateX(0) rotate(var(--r,0deg));opacity:0;}
  10%{opacity:var(--op,.5);}
  30%{transform:translateY(18vh) translateX(28px) rotate(calc(var(--r,0deg) + 60deg));}
  55%{transform:translateY(48vh) translateX(-24px) rotate(calc(var(--r,0deg) + 150deg));}
  80%{transform:translateY(78vh) translateX(22px) rotate(calc(var(--r,0deg) + 240deg));}
  90%{opacity:var(--op,.5);}
  100%{transform:translateY(112vh) translateX(-10px) rotate(calc(var(--r,0deg) + 330deg));opacity:0;}
}
@keyframes vfall2{
  0%{transform:translateY(-16vh) translateX(0) rotate(var(--r,0deg));opacity:0;}
  12%{opacity:var(--op,.45);}
  35%{transform:translateY(26vh) translateX(-32px) rotate(calc(var(--r,0deg) - 70deg));}
  60%{transform:translateY(56vh) translateX(26px) rotate(calc(var(--r,0deg) - 160deg));}
  85%{transform:translateY(86vh) translateX(-18px) rotate(calc(var(--r,0deg) - 250deg));}
  92%{opacity:var(--op,.45);}
  100%{transform:translateY(114vh) translateX(12px) rotate(calc(var(--r,0deg) - 340deg));opacity:0;}
}
.v-grain{position:relative;isolation:isolate;}
.v-grain::before,.v-grain::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;}
.v-grain::before{mix-blend-mode:multiply;opacity:.55;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0.11  0 0 0 0 0.08  0 0 0 0 0.04  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
.v-grain::after{mix-blend-mode:multiply;opacity:.7;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='620' height='620'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='2' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0.11  0 0 0 0 0.08  0 0 0 0 0.04  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>");}
.v-grain.v-grain-soft::before{opacity:.30;}
.v-grain.v-grain-soft::after{opacity:.40;}
.v-grain.v-grain-strong::before{opacity:.75;}
.v-grain.v-grain-strong::after{opacity:.92;}
.v-grain.v-grain-dark::before{mix-blend-mode:screen;opacity:.22;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch' seed='11'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0 0.3 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
.v-grain.v-grain-dark::after{mix-blend-mode:screen;opacity:.14;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='620' height='620'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='2' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>");}
.v-grain > *{position:relative;z-index:1;}
.v-grain-overlay{position:relative;}
.v-grain-overlay::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;mix-blend-mode:multiply;opacity:.45;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='13'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.12  0 0 0 0 0.06  0 0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='620' height='620'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='2' stitchTiles='stitch' seed='17'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.12  0 0 0 0 0.06  0 0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>");}
.v-grain-overlay > *{position:relative;z-index:2;}
.v-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;border-radius:999px;background:rgba(246,239,226,.74);backdrop-filter:blur(8px);border:1px solid rgba(28,20,11,.06);box-shadow:0 1px 0 rgba(255,255,255,.5) inset;}
.v-eyebrow::before{content:'';width:18px;height:1.5px;border-radius:999px;background:currentColor;opacity:.55;}
.v-eyebrow.on-dark{background:rgba(60,46,28,.55);border-color:rgba(255,250,240,.08);box-shadow:none;backdrop-filter:blur(6px);}

/* ============================================================
   Bloque 2: navegación (menús dinámicos de WordPress)
   ============================================================ */
/* al saltar a una sección, deja hueco para el nav fijo */
section[id]{scroll-margin-top:84px;}
.v-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px;}
.v-nav a{display:block;text-decoration:none;color:#4a3f2c;font-weight:600;font-size:14px;letter-spacing:.01em;padding:9px 16px;border-radius:999px;transition:color .2s,background .2s;}
.v-nav a:hover{color:#1c140b;background:rgba(255,255,255,.7);}
/* enlace activo: sección actual (página real con current-menu-item, o ancla via .v-active) */
.v-nav .current-menu-item > a,
.v-nav a.v-active{color:#9a5a12;background:rgba(247,147,30,.16);font-weight:700;}

/* botón CTA "Conversemos" */
.v-cta{text-decoration:none;color:#1c140b;font-weight:700;font-size:14px;padding:11px 20px;border-radius:999px;background:#f7931e;transition:transform .2s,background .2s,box-shadow .2s;box-shadow:0 8px 18px -10px rgba(247,147,30,.9);}
.v-cta:hover{background:#e8850e;transform:translateY(-1px);box-shadow:0 12px 22px -10px rgba(247,147,30,1);}

/* menú móvil */
.v-mobile a{text-decoration:none;color:#3a3128;font-weight:600;font-size:16px;padding:12px 8px;border-bottom:1px solid #e7dcc6;display:block;}
.v-mobile a:hover{color:#f7931e;}
.v-mobile .current-menu-item > a,
.v-mobile a.v-active{color:#9a5a12;font-weight:700;}
.v-mobile ul{list-style:none;margin:0;padding:0;}
.v-mobile .v-cta-mobile{text-align:center;color:#1c140b;font-weight:700;font-size:16px;padding:13px;margin-top:12px;border-radius:999px;background:#f7931e;border-bottom:none;}

/* ============================================================
   Bloque 3: utilidades de hover (convertidas de style-hover)
   ============================================================ */
/* botón primario naranja (hero) */
.v-btn-primary{transition:transform .2s,background .2s,box-shadow .2s;}
.v-btn-primary:hover{background:#e8850e;transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(247,147,30,1);}
/* botón fantasma (hero secundario) */
.v-btn-ghost{transition:background .2s,border-color .2s;}
.v-btn-ghost:hover{background:#fff;border-color:#1c140b;}
/* botón outline (blog "ver todas") */
.v-btn-outline{transition:background .2s,border-color .2s;}
.v-btn-outline:hover{background:#fcfaf6;border-color:#1c140b;}
/* pill email (únete) */
.v-pill-email{transition:transform .2s,background .2s;}
.v-pill-email:hover{background:#e8850e;transform:translateY(-1px);}
/* cards que se elevan (pilares): borde personalizable via --hb */
.v-lift{transition:transform .25s,box-shadow .25s,border-color .25s;}
.v-lift:hover{transform:translateY(-5px);box-shadow:0 24px 44px -30px rgba(28,20,11,.45);border-color:var(--hb,#ece6da);}
/* cards que se elevan (únete / blog): sombra más fuerte */
.v-lift2{transition:transform .25s,box-shadow .25s;}
.v-lift2:hover{transform:translateY(-5px);box-shadow:0 26px 48px -30px rgba(28,20,11,.5);}
/* fila lista "qué hacemos" */
.v-row{transition:background .25s;}
.v-row:hover{background:#fff;}
/* enlace con flecha → */
.v-arrow{transition:color .2s;}
.v-arrow:hover{color:#f7931e;}
/* chip de filtro (tipos de recurso) */
.v-chip{transition:background .2s,border-color .2s,color .2s;}
.v-chip:hover{background:#8B5FA8;border-color:#8B5FA8;color:#fff;}
/* grid de 3 columnas responsive (listado de recursos) */
.v-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:900px){.v-grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.v-grid-3{grid-template-columns:1fr;}}
/* tarjeta destacada */
.v-feat{position:relative;}
.v-feat-card{border-color:#f7931e !important;box-shadow:0 18px 40px -28px rgba(247,147,30,.7);}
.v-feat-badge{position:absolute;top:14px;left:14px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1c140b;background:#fbb03b;padding:5px 12px;border-radius:999px;box-shadow:0 6px 14px -8px rgba(28,20,11,.5);}
/* enlaces de footer */
.v-flink{transition:color .2s;}
.v-flink:hover{color:#f7931e;}
/* buscador (404 / resultados) */
.search-form{display:flex;gap:8px;}
.search-form label{flex:1;}
.search-field{width:100%;padding:13px 15px;border:1.5px solid #e7dcc6;border-radius:999px;background:#fffdf9;font-family:inherit;font-size:15px;color:#1c140b;}
.search-field:focus{outline:none;border-color:#f7931e;box-shadow:0 0 0 3px rgba(247,147,30,.18);}
.search-submit{border:none;cursor:pointer;color:#1c140b;font-weight:700;font-size:15px;padding:0 22px;border-radius:999px;background:#f7931e;transition:background .2s;}
.search-submit:hover{background:#e8850e;}

/* formulario de contacto */
.v-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:520px){ .v-form-grid{grid-template-columns:1fr;} }
.v-field{margin-bottom:16px;}
.v-label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b6253;margin:0 0 7px;}
.v-input{width:100%;padding:13px 15px;border:1.5px solid #e7dcc6;border-radius:12px;background:#fffdf9;font-family:inherit;font-size:15px;color:#1c140b;transition:border-color .2s,box-shadow .2s;}
.v-input:focus{outline:none;border-color:#f7931e;box-shadow:0 0 0 3px rgba(247,147,30,.18);}
textarea.v-input{resize:vertical;min-height:120px;}
.v-form-submit{transition:transform .2s,background .2s,box-shadow .2s;}
.v-form-submit:hover{background:#e8850e;transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(247,147,30,1);}
.v-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.v-form-note{border-radius:12px;padding:14px 16px;margin-bottom:18px;font-size:15px;font-weight:600;}
.v-form-ok{background:#eef6e2;border:1.5px solid #cfe3a8;color:#4f6b16;}
.v-form-err{background:#fdecea;border:1.5px solid #f3c7bf;color:#a8442f;}
/* foco accesible por teclado en enlaces/botones */
a:focus-visible,button:focus-visible,.v-input:focus-visible{outline:2.5px solid #f7931e;outline-offset:2px;}

/* iconos de redes sociales (footer) */
.v-social-ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;background:#e3d7c0;color:#6a5c42;transition:background .2s,color .2s,transform .2s;}
.v-social-ic:hover{background:#f7931e;color:#1c140b;transform:translateY(-2px);}
.v-social-ic svg{width:18px;height:18px;display:block;}
/* menús de footer (Explora / Conecta) */
.v-fmenu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.v-fmenu a{text-decoration:none;color:#6a5c42;font-size:15px;font-weight:500;transition:color .2s;}
.v-fmenu a:hover{color:#f7931e;}
/* footer responsive: las 3 columnas (lema · marca · enlaces) se apilan y
   centran en pantallas pequeñas; quita los min-width y el justify-self:end. */
@media (max-width:860px){
  .v-foot-mid{grid-template-columns:1fr !important;gap:40px !important;justify-items:center;text-align:center;}
  .v-foot-mid > div{min-width:0 !important;justify-self:center !important;}
  .v-foot-left{text-align:center;}
  .v-foot-links{justify-content:center;text-align:center;}
  .v-foot-links .v-fmenu ul{align-items:center;}
}
@media (max-width:380px){
  .v-foot-links{grid-template-columns:1fr !important;gap:28px !important;}
}

/* ============================================================
   Bloque 4: scroll-reveal (estado base; el JS lo anima)
   ============================================================ */
[data-reveal]{will-change:opacity,transform;}

/* ============================================================
   Bloque 4b: hojas decorativas flotantes
   (usan los keyframes vsway / vfloatSlow del Bloque 1)
   ============================================================ */
.v-leaf{position:absolute;pointer-events:none;z-index:1;opacity:.5;
  animation-timing-function:ease-in-out;animation-iteration-count:infinite;
  will-change:transform;}
.v-leaf svg{display:block;width:100%;height:100%;}
/* Hojas que caen: invisibles hasta que arranca su animación (durante el delay)
   y caída a ritmo constante. */
.v-leaf-fall{opacity:0;animation-timing-function:linear;animation-fill-mode:backwards;}
/* Aleteo de la mariposa: las alas se pliegan hacia el cuerpo. */
.v-bfly-wing{transform-box:fill-box;animation:vflap .7s ease-in-out infinite;}
.v-bfly-wL{transform-origin:100% 50%;}
.v-bfly-wR{transform-origin:0% 50%;}
@keyframes vflap{0%,100%{transform:scaleX(1);}50%{transform:scaleX(.5);}}
/* Aleteo de la libélula: zumbido rápido y de poca amplitud. */
.v-dfly-wing{transform-box:fill-box;animation:vbuzz .3s ease-in-out infinite;}
.v-dfly-wL{transform-origin:100% 50%;}
.v-dfly-wR{transform-origin:0% 50%;}
@keyframes vbuzz{0%,100%{transform:scaleX(1);}50%{transform:scaleX(.82);}}
@media (prefers-reduced-motion:reduce){ .v-bfly-wing,.v-dfly-wing{animation:none !important;} }
@media (prefers-reduced-motion:reduce){ .v-leaf{animation:none !important;} .v-leaf-fall{display:none !important;} }
@media (max-width:640px){ .v-leaf{opacity:.32;transform:scale(.7);} }

/* ============================================================
   Bloque 5: blog / single / page
   ============================================================ */
.v-prose{font-size:18px;line-height:1.7;color:#3a3128;}
.v-prose h1,.v-prose h2,.v-prose h3,.v-prose h4{font-family:'Newsreader',Georgia,serif;color:#1c140b;letter-spacing:-.02em;line-height:1.15;font-weight:600;}
.v-prose h2{font-size:clamp(26px,3.4vw,40px);margin:1.4em 0 .5em;}
.v-prose h3{font-size:clamp(21px,2.4vw,28px);margin:1.3em 0 .4em;}
.v-prose p{margin:0 0 1.1em;}
.v-prose a{color:#c9700a;text-decoration:underline;text-underline-offset:2px;}
.v-prose a:hover{color:#f7931e;}
.v-prose img{max-width:100%;height:auto;border-radius:14px;}
.v-prose blockquote{margin:1.4em 0;padding:4px 0 4px 22px;border-left:3px solid #8B5FA8;font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:1.15em;color:#2a2233;}
.v-prose ul,.v-prose ol{margin:0 0 1.1em;padding-left:1.4em;}
.v-prose li{margin:.3em 0;}

.v-pagination{display:flex;gap:10px;flex-wrap:wrap;margin-top:48px;}
.v-pagination .page-numbers{display:inline-block;text-decoration:none;color:#1c140b;font-weight:600;font-size:15px;padding:10px 16px;border-radius:999px;border:1.6px solid #d9cfbf;transition:background .2s,border-color .2s;}
.v-pagination .page-numbers:hover,.v-pagination .page-numbers.current{background:#f7931e;border-color:#f7931e;}

/* ============================================================
   Bloque 6: responsive nav (lo enciende/apaga main.js con IDs,
   estos son los estilos base)
   ============================================================ */
@media (max-width:939px){
  .v-skip-desktop{display:none !important;}
  /* Header móvil: logo a la izquierda, hamburguesa a la derecha. */
  #vnav{display:flex !important;justify-content:space-between !important;align-items:center;}
  #vnav-left{display:none !important;}
  .vnav-logo-link{justify-self:auto !important;}
  #vnav-logo-horizontal{height:42px !important;}
}