/* Juan Dolio Vivo — estilos. Los colores y medidas están en :root. */
:root{
  --verde:#77BD43;        /* Verde Plusval: solo acentos */
  --lima:#CEDC29;         /* Lima: solo acentos */
  --verde-texto:#3B6E1C;  /* verde oscurecido para texto y enlaces (contraste AA sobre blanco) */
  --tinta:#1D2621;
  --gris:#5A6660;
  --linea:#E4E7E2;
  --fondo:#FFFFFF;
  --fondo-alt:#F6F7F3;
  --arena:#FBF8F1;
  --aviso:#FFF7DB;
  --radio:16px;
  --sombra:0 1px 2px rgba(29,38,33,.04),0 10px 30px rgba(29,38,33,.07);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--tinta);background:var(--fondo);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde-texto);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--serif);line-height:1.15;letter-spacing:-.01em;color:var(--tinta)}
h1{font-size:clamp(34px,6vw,58px)}
h2{font-size:clamp(25px,3.6vw,34px);margin-bottom:14px}
h3{font-size:21px;margin-bottom:8px}
p+p{margin-top:12px}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;background:var(--tinta);color:#fff;padding:10px 14px;border-radius:8px;z-index:100}
.saltar:focus{top:12px}
.nota{font-size:14.5px;color:var(--gris)}
.intro{font-size:clamp(17px,2vw,19px);color:var(--gris);max-width:64ch}
.etiqueta{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--verde-texto);margin-bottom:12px}
.etiqueta::before{content:"";display:inline-block;width:22px;height:3px;background:var(--lima);vertical-align:middle;margin-right:10px;border-radius:2px}
.pendiente{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#7A5300;background:var(--aviso);border:1px solid #EBD58A;border-radius:6px;padding:1px 7px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;font:700 16px/1.2 var(--sans);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-lima{background:var(--lima);color:var(--tinta);box-shadow:0 6px 18px rgba(206,220,41,.35)}
.btn-verde{background:var(--tinta);color:#fff}
.btn-verde:hover{background:#2c3a32}
.btn-linea{background:#fff;color:var(--tinta);border-color:var(--linea)}
.btn-linea:hover{border-color:var(--verde)}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}
.enlace{font-weight:600}

/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.cabecera-int{display:flex;align-items:center;gap:20px;min-height:66px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);font-family:var(--serif);font-size:21px;font-weight:600;white-space:nowrap}
.marca svg{width:32px;height:32px;flex:0 0 auto}
.marca b{color:var(--verde-texto)}
.menu{margin-left:auto}
.menu ul{list-style:none;display:flex;flex-wrap:wrap;gap:2px 4px;justify-content:flex-end}
.menu a{display:block;padding:8px 10px;border-radius:8px;color:var(--tinta);text-decoration:none;font-size:15px;font-weight:500}
.menu a:hover{background:var(--fondo-alt)}
.menu a[aria-current="page"]{color:var(--verde-texto);font-weight:700;box-shadow:inset 0 -3px 0 var(--lima)}
.menu-btn{display:none;margin-left:auto;width:48px;height:48px;border:1px solid var(--linea);border-radius:12px;background:#fff;cursor:pointer;align-items:center;justify-content:center}
.menu-ico,.menu-ico::before,.menu-ico::after{display:block;width:20px;height:2px;background:var(--tinta);border-radius:2px;position:relative;transition:transform .2s}
.menu-ico::before,.menu-ico::after{content:"";position:absolute;left:0}
.menu-ico::before{top:-6px}.menu-ico::after{top:6px}
.menu-btn[aria-expanded="true"] .menu-ico{background:transparent}
.menu-btn[aria-expanded="true"] .menu-ico::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-ico::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1180px){
  .menu-btn{display:flex}
  .menu{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--linea);box-shadow:0 12px 24px rgba(0,0,0,.06);display:none;margin:0}
  .menu.abierto{display:block}
  .menu ul{flex-direction:column;padding:8px 20px 16px;max-height:calc(100vh - 80px);overflow:auto}
  .menu a{padding:13px 8px;font-size:16.5px;border-bottom:1px solid var(--fondo-alt);border-radius:0}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(78vh,640px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#2a4a5a}
.hero-foto{position:absolute;inset:0;margin:0}
.hero-foto img{width:100%;height:100%;object-fit:cover}
.hero-foto figcaption{position:absolute;right:10px;bottom:8px;z-index:3;font-size:11.5px;color:rgba(255,255,255,.85)}
.hero-foto figcaption a{color:#fff}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,15,0) 25%,rgba(10,20,15,.72) 100%);z-index:1}
.hero-txt{position:relative;z-index:2;width:100%;padding:120px 0 56px}
.hero h1{color:#fff;max-width:17ch}
.hero h1 span{display:block;font-size:.6em;font-weight:600;color:var(--lima);margin-top:6px}
.hero p{font-size:clamp(17px,2.2vw,20px);max-width:52ch;margin:14px 0 24px;color:#F1F5F0}

/* ---------- Secciones ---------- */
.seccion{padding:64px 0}
.seccion-alt{background:var(--fondo-alt)}
.cab-pag{background:var(--arena);padding:56px 0 44px;border-bottom:1px solid var(--linea)}
.cab-pag h1{font-size:clamp(32px,5vw,50px);margin-bottom:14px;max-width:22ch}
.texto{max-width:760px}
.texto h2{margin-top:34px}
.texto h2:first-child{margin-top:0}
.texto h3{margin-top:22px}
.texto ul{padding-left:22px}
.texto li{margin-bottom:8px}
.dos-col{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}
@media (max-width:860px){.dos-col{grid-template-columns:1fr}}
.caja{background:var(--fondo-alt);border-radius:var(--radio);padding:26px}
.caja h2{font-size:24px}
.lista-simple{list-style:none;display:grid;gap:10px;margin-bottom:14px}
.aviso{background:var(--aviso);border-left:5px solid var(--lima);border-radius:10px;padding:14px 18px;margin:0 0 26px}
.aviso-fuerte{border-left-color:#C8901A}

/* Categorías */
.cats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:760px){.cats{grid-template-columns:repeat(2,1fr)}}
.cats a{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--linea);border-radius:var(--radio);text-decoration:none;color:var(--tinta);font-weight:600;background:#fff;transition:border-color .15s,transform .15s}
.cats a:hover{border-color:var(--verde);transform:translateY(-2px)}
.cats span{font-size:26px}

/* Tarjetas */
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
@media (max-width:860px){.tarjetas{grid-template-columns:1fr}}
.tarjeta{position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:24px;box-shadow:var(--sombra);transition:transform .15s}
.tarjeta:hover{transform:translateY(-3px)}
.tarjeta-ico{font-size:28px;display:block;margin-bottom:10px}
.tarjeta h3 a{color:var(--tinta);text-decoration:none}
.tarjeta h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radio)}
.tarjeta p{color:var(--gris);font-size:15.5px}
.tarjeta-cta{display:block;margin-top:14px;font-weight:700;color:var(--verde-texto);font-size:15px}

/* Estado vacío */
.vacio{border:2px dashed var(--linea);border-radius:var(--radio);padding:34px 26px;text-align:center;background:#fff}
.vacio-titulo{font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:8px}
.vacio p{color:var(--gris);max-width:56ch;margin-left:auto;margin-right:auto}
.vacio .btn{margin-top:18px}

/* Fotos */
.foto{margin:0}
.foto figcaption{font-size:12px;color:var(--gris);margin-top:6px}
.foto figcaption a{color:inherit}
.foto-ancha{margin-top:40px}
.foto-ancha img{border-radius:var(--radio);aspect-ratio:16/7;object-fit:cover;width:100%}
.sin-foto{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;aspect-ratio:3/2;border-radius:12px;background:repeating-linear-gradient(135deg,#F1F3EE 0 12px,#EAEDE6 12px 24px);color:var(--gris);padding:14px}
.sin-foto span{font-weight:700;font-size:14px;color:var(--tinta)}
.sin-foto small{font-size:12.5px;max-width:28ch}

/* Ficha de lugar / evento */
.fichas{display:grid;gap:22px}
.ficha{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:26px;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:22px;box-shadow:var(--sombra);scroll-margin-top:90px}
@media (max-width:820px){.ficha{grid-template-columns:1fr}}
.ficha-media img{border-radius:12px;aspect-ratio:3/2;object-fit:cover;width:100%}
.ficha-cat{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--verde-texto);margin-bottom:4px}
.ficha h3{font-size:24px}
.ficha-datos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px;margin:16px 0;font-size:15px}
@media (max-width:560px){.ficha-datos{grid-template-columns:1fr}}
.ficha-datos dt{font-weight:700;font-size:13px;color:var(--gris);text-transform:uppercase;letter-spacing:.05em}
.ficha-datos dd .nota{display:inline-block;margin-top:2px;font-size:13px}
.verificado{font-size:14px;color:var(--gris);border-top:1px solid var(--linea);padding-top:10px}
.evento,.noticia{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:22px;box-shadow:var(--sombra)}
.eventos,.noticias{display:grid;gap:18px}

/* Lista curada */
.lista h2{margin-bottom:8px}
.lista .nota{margin:8px 0 18px}
.lista-items{list-style:none;display:grid;gap:14px}
.lista-item{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:start;padding:14px;border:1px solid var(--linea);border-radius:var(--radio);background:#fff}
.lista-item .foto figcaption{display:none}
.lista-item img,.lista-item .sin-foto{border-radius:10px;aspect-ratio:3/2;object-fit:cover}
.lista-item .sin-foto small{display:none}
.lista-item h3{font-size:20px;margin-bottom:4px}
.lista-item h3 a{color:var(--tinta);text-decoration:none}
@media (max-width:520px){.lista-item{grid-template-columns:100px 1fr;gap:12px}}

/* Pasos */
.pasos{list-style:none;display:grid;gap:12px;margin:10px 0 14px}
.pasos li{padding-left:28px;position:relative}
.pasos li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:12px;border-radius:50%;background:var(--lima);box-shadow:0 0 0 3px #F3F7C9}
.pasos-num{padding-left:22px;display:grid;gap:12px;margin-bottom:14px}

/* Servicios */
.tabla-servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
@media (max-width:760px){.tabla-servicios{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.tabla-servicios{grid-template-columns:1fr}}
.serv{border:1px solid var(--linea);border-radius:12px;padding:16px;background:#fff}
.serv h3{font-size:17px;font-family:var(--sans);font-weight:700}

/* Bandas */
.banda-comunidad,.banda-invertir{padding:56px 0;text-align:center}
.banda-comunidad{background:linear-gradient(135deg,#F4F8E6,#FBFCEB);border-top:1px solid var(--linea)}
.banda-invertir{background:var(--tinta);color:#fff}
.banda-invertir h2{color:#fff}
.banda-comunidad p,.banda-invertir p{max-width:58ch;margin:0 auto 22px;font-size:18px}
.banda-invertir p{color:#D6DED8}

/* ---------- Formularios ---------- */
.form{display:grid;gap:16px}
.campo label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
.opcional{font-weight:400;color:var(--gris)}
.campo input,.campo textarea{width:100%;font:16px/1.4 var(--sans);padding:12px 14px;border:1.5px solid #CDD3CB;border-radius:10px;background:#fff;color:var(--tinta)}
.campo input:focus,.campo textarea:focus{outline:3px solid rgba(119,189,67,.35);border-color:var(--verde-texto)}
.campo [aria-invalid="true"]{border-color:#B42318}
.ayuda{font-size:13.5px;color:var(--gris);margin-top:4px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--gris)}
.check input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--verde-texto)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.estado{font-size:15px;min-height:1.4em}
.estado.ok{color:var(--verde-texto);font-weight:600}
.estado.error{color:#B42318}
.estado.pendiente-config{color:#7A5300}

/* Boletín (en todas las páginas) */
.boletin{background:var(--fondo-alt);border-top:1px solid var(--linea);padding:48px 0}
.boletin-int{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:start}
@media (max-width:820px){.boletin-int{grid-template-columns:1fr}}
.boletin h2{font-size:26px;margin-bottom:6px}
.boletin p{color:var(--gris)}
.fila{display:flex;gap:10px}
.fila input{flex:1;min-width:0}
@media (max-width:460px){.fila{flex-direction:column}}

/* Pie */
.pie{background:var(--tinta);color:#C9D2CC;padding:40px 0 48px;font-size:15px}
.pie a{color:#fff}
.pie-firma{font-family:var(--serif);font-size:19px;color:#fff;margin-bottom:18px}
.pie-firma a{color:var(--lima)}
.pie-nav{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:20px}
.pie-nav a{text-decoration:none;color:#E2E8E4}
.pie-nav a:hover{color:var(--lima)}
.pie-legal{font-size:13px;color:#9DABA2;max-width:90ch}
.pie-legal a{color:#C9D2CC}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}