/* Huertos Santa Lucía — réplica del diseño del sitio Wix (medidas tomadas del original, 2026-09-14)
   Colores: fondo rgb(215,219,208), verde rgb(40,59,33), ítem activo rgba(190,196,179,.95),
   amarillo rgb(255,198,92), texto rgb(59,58,58). Fuentes: Open Sans (menú y títulos),
   Helvetica light 17px (párrafos), Avenir heavy (Misión/Visión, formulario) → Montserrat. */
:root {
  --fondo: rgb(215, 219, 208);
  --verde: rgb(40, 59, 33);
  --activo: rgba(190, 196, 179, .95);
  --amarillo: rgb(255, 198, 92);
  --texto: rgb(59, 58, 58);
  --negro: #000;
  --azul-oscuro: rgb(30, 45, 59);
  --ancho: 980px;
  --sans: "Open Sans", Arial, sans-serif;
  --light: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --heavy: "Montserrat", "Avenir Next", "Open Sans", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--light); font-weight: 400; font-size: 17px; line-height: 1.45; }
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1.1em; }
.columna { width: min(var(--ancho), 100%); margin-inline: auto; }
.oculto-visual { position: absolute; left: -9999px; }

/* ---------- cabecera (barra verde de 96 px dentro de la columna de 980) ---------- */
.cabecera { position: relative; z-index: 20; }
.cabecera .barra { background: var(--verde); height: 96px; display: flex; align-items: center; padding: 0 0 0 72px; position: relative; }
.cabecera .hoja img { width: 43px; height: 48px; }
.nav { display: flex; align-items: center; margin-left: 75px; }
.nav > a, .nav .grupo > a {
  display: block; color: #fff; text-decoration: none; font-family: var(--sans); font-weight: 400; font-size: 13px; text-transform: uppercase;
  height: 35px; line-height: 35px; width: 164px; text-align: center; position: relative;
}
.nav > * + *::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .6); }
.nav .grupo { position: relative; }
.nav a.activo { background: var(--activo); color: var(--verde); }
.nav > a:hover:not(.activo), .nav .grupo:hover > a:not(.activo) { text-decoration: none; }
/* submenus desplegables como en Wix: Quienes somos -> Nosotros / Mision y Vision; Contacto -> Informacion / Envianos un mensaje */
.nav .sub { display: none; position: absolute; top: 35px; left: 0; width: 164px; padding: 4px 0 0; z-index: 30; }
.nav .grupo:hover .sub, .nav .grupo:focus-within .sub { display: block; }
.nav .sub a { display: block; color: #fff; text-decoration: none; font-family: var(--sans); font-size: 13px; text-align: center; height: 30px; line-height: 30px; margin: 0 0 4px; background: rgba(40, 59, 33, .78); }
.nav .sub a.activo { background: var(--activo); color: var(--verde); }
.nav .sub a:hover:not(.activo) { background: rgba(190, 196, 179, .85); color: var(--verde); }
.menu-boton { display: none; margin-left: auto; margin-right: 20px; background: none; border: 1px solid rgba(255,255,255,.5); color: #fff; font-size: 22px; line-height: 1; padding: 6px 10px; cursor: pointer; }
@media (max-width: 860px) {
  .cabecera .barra { height: 70px; padding-left: 20px; }
  .menu-boton { display: block; }
  .nav { display: none; position: absolute; top: 70px; left: 0; right: 0; background: var(--verde); flex-direction: column; align-items: stretch; margin: 0; padding: 6px 0 10px; }
  .nav.abierto { display: flex; }
  .nav > a, .nav .grupo > a { width: auto; text-align: left; padding: 0 20px; height: 44px; line-height: 44px; }
  .nav > * + *::before { display: none; }
  .nav .sub { display: block; position: static; width: auto; padding: 0 0 4px 20px; }
  .nav .sub a { text-align: left; padding: 0 20px; }
}

/* ---------- portada (Inicio): galería difuminada a todo el ancho, logo grande al centro ---------- */
.portada { position: relative; height: 760px; margin-top: -96px; overflow: hidden; background: var(--verde); display: grid; justify-items: center; align-items: start; }
.portada .diapo { position: absolute; inset: -20px; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease; }
.portada .diapo.visible { opacity: 1; }
.portada .logo-grande { position: relative; z-index: 2; width: min(660px, 72vw); height: auto; margin-top: 200px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.25)); }
.portada .bajar { position: absolute; z-index: 2; bottom: 64px; left: 50%; transform: translateX(-50%); width: 56px; opacity: .9; }
.portada .bajar:hover { opacity: 1; }
.portada .contador { position: absolute; z-index: 2; right: 40px; bottom: 40px; color: #fff; font-family: var(--sans); font-size: 13px; opacity: .8; }
@media (max-width: 860px) { .portada { height: 560px; margin-top: -70px; } .portada .logo-grande { margin-top: 130px; } .portada .bajar { bottom: 48px; } }

/* ---------- páginas interiores: banda de fondo, área blanca, menú lateral y texto ---------- */
.franja { height: 133px; background-size: cover; background-position: center 65%; display: flex; align-items: center; }
.franja .columna { padding-left: 17px; }
.franja img { width: 160px; height: auto; }
.franja.historia { background-position: center 6%; }
/* fondo del contenido: blanco arriba que se funde al gris verdoso, como el degradado del original */
.interior { background: linear-gradient(to bottom, #fff 0, #fff 250px, var(--fondo) 580px, var(--fondo) 100%); padding: 0; }
.interior .contenido { padding-top: 76px; }
.interior .columna { display: grid; grid-template-columns: 196px minmax(0, 564px); column-gap: 132px; align-items: start; }
.lateral { display: flex; flex-direction: column; gap: 6px; }
.lateral a {
  display: block; background: var(--verde); color: #fff; text-decoration: none; text-align: center;
  font-family: var(--sans); font-size: 12px; text-transform: uppercase; height: 47px; line-height: 47px;
}
.lateral a.activo { background: var(--activo); }
.lateral a:hover:not(.activo) { background: rgb(60, 84, 50); }
.lateral .degrade { margin-top: 8px; width: 196px; height: 186px; background: linear-gradient(to bottom, var(--verde) 0%, rgba(40,59,33,.6) 40%, rgba(215,219,208,0) 100%); }
.contenido h1 { font-family: var(--sans); font-weight: 700; font-size: 86px; line-height: 1.05; color: var(--verde); margin: 0 0 26px; letter-spacing: -.01em; }
.contenido h2 { font-family: var(--sans); font-weight: 700; font-size: 34px; color: var(--verde); margin: 0 0 12px; }
.contenido p { font-size: 17px; color: var(--texto); }
.contenido strong { font-weight: 700; color: var(--texto); font-family: var(--sans); }
.contenido .boton-verde {
  display: inline-block; background: var(--verde); color: #fff; text-decoration: none; font-family: var(--sans); font-size: 12px;
  text-transform: uppercase; padding: 0 34px; height: 47px; line-height: 47px; margin-top: 14px;
}
.contenido .boton-verde:hover { background: rgb(60, 84, 50); }
/* banda de cifras (Historia): foto de hojas oscurecida, tres números en blanco separados por líneas */
.banda-cifras { position: relative; margin-top: 150px; padding: 72px 0; background: url("/img/web/slide2.jpg") center / cover no-repeat; color: #fff; }
.banda-cifras::before { content: ""; position: absolute; inset: 0; background: rgba(40, 59, 33, .82); }
.banda-cifras .columna { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 40px; }
.banda-cifras .cifra { text-align: center; border-left: 1px solid rgba(255, 255, 255, .9); padding: 12px 16px; }
.banda-cifras .cifra:first-child { border-left: 0; }
.banda-cifras strong { display: block; font-family: var(--sans); font-weight: 700; font-size: 64px; line-height: 1.05; }
.banda-cifras span { display: block; font-family: var(--sans); font-weight: 400; font-size: 22px; line-height: 1.15; margin-top: 14px; max-width: 150px; margin-inline: auto; }
.volver { text-align: center; margin: 52px 0 18px; }
.volver a { display: inline-block; border: 2px solid var(--verde); color: var(--verde); text-decoration: none; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; padding: 0 22px; height: 36px; line-height: 34px; }
.volver a:hover { background: var(--verde); color: #fff; }
.interior .cierre { height: 220px; }
@media (max-width: 860px) {
  .franja { height: 90px; }
  .franja img { width: 110px; }
  .interior .contenido { padding-top: 24px; }
  .interior .columna { grid-template-columns: 1fr; padding: 0 20px; }
  .lateral { display: none; }
  .contenido h1 { font-size: 52px; }
  .banda-cifras { margin-top: 48px; padding: 32px 0; }
  .banda-cifras .columna { grid-template-columns: 1fr; gap: 24px; padding: 0 20px; }
  .banda-cifras .cifra { border-left: 0; }
  .interior .cierre { height: 48px; }
}

/* ---------- Misión / Visión: dos paneles con foto (como Wix); al pasar el cursor cambia la foto y aparece el texto ---------- */
body.pagina-mision { background: rgb(247, 247, 247); display: flex; flex-direction: column; min-height: 100vh; }
.pagina-mision main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* sin scroll: el alto del panel se adapta a la pantalla, con tope en los 420 px del original */
.pagina-mision .panel { height: clamp(280px, calc(100vh - 96px - 90px - 252px), 420px); }
.pagina-mision .paneles { margin: 45px 0; }
.pagina-mision .pie { padding-bottom: 24px; }
.paneles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 45px; }
.panel { position: relative; height: 420px; overflow: hidden; background-size: cover; background-position: center; color: #fff; cursor: default; display: flex; flex-direction: column; justify-content: center; padding: 0 60px; }
.panel::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .18); transition: background .4s; }
.panel .fondo-hover { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .5s; }
.panel > * { position: relative; }
.panel h2 { font-family: var(--sans); font-weight: 700; font-size: 85px; color: #fff; margin: 0; line-height: 1; text-align: center; transition: all .4s; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
#mision:not(:hover):not(:focus-within):not(.abierto) h2 { text-align: left; }
#vision:not(:hover):not(:focus-within):not(.abierto) h2 { text-align: right; }
.panel .detalle { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s ease, opacity .45s ease; font-family: var(--sans); font-weight: 300; font-size: 19px; line-height: 1.3; text-align: center; max-width: 440px; margin: 0 auto; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.panel .detalle p { margin: 0 0 .8em; }
.panel:hover::before, .panel:focus-within::before, .panel.abierto::before { background: rgba(0, 0, 0, .35); }
.panel:hover .fondo-hover, .panel:focus-within .fondo-hover, .panel.abierto .fondo-hover { opacity: 1; }
.panel:hover h2, .panel:focus-within h2, .panel.abierto h2 { text-align: center; }
.panel:hover .detalle, .panel:focus-within .detalle, .panel.abierto .detalle { max-height: 260px; opacity: 1; margin-top: 22px; }
.panel:hover h2, .panel:focus-within h2, .panel.abierto h2 { font-size: 64px; }
.panel .pista { display: none; }
@media (max-width: 860px) {
  .paneles { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
  .panel { height: auto; min-height: 380px; padding: 40px 24px; }
  .panel h2, #mision h2, #vision h2 { font-size: 56px; text-align: center; }
  .panel .detalle { max-height: none; opacity: 1; margin-top: 24px; font-size: 20px; }
  .panel .fondo-hover { opacity: 1; }
}

/* ---------- Contacto (Información): datos en dos columnas, mapa y enlace ---------- */
.pagina-contacto .interior .columna { grid-template-columns: 196px minmax(0, 690px); column-gap: 90px; }
.datos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 50px; margin-top: 10px; }
.datos p { margin: 0 0 14px; }
.datos strong { font-family: var(--sans); font-weight: 700; color: var(--texto); }
.contenido a { color: inherit; text-decoration: none; }
.mapa { margin-top: 44px; }
.mapa iframe { width: 100%; max-width: 683px; height: 296px; border: 0; display: block; }
.ubicacion { font-style: italic; margin-top: 22px; }
.ubicacion a { text-decoration: none; }
.ubicacion a:hover { text-decoration: underline; }

/* ---------- Envíanos un mensaje: página propia, foto de manzana a todo el ancho bajo la cabecera ---------- */
.pagina-mensaje .mensaje { margin-top: -96px; padding: 150px 20px 70px; min-height: 620px; }
.mensaje { position: relative; padding: 72px 20px; background: url("/img/web/fondo-mensaje.jpg") center / cover no-repeat; }
.mensaje::before { content: ""; position: absolute; inset: 0; background: rgba(40, 59, 33, .35); }
.mensaje .caja { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; border: 1px solid rgba(255, 255, 255, .8); padding: 40px 56px 48px; text-align: center; }
.mensaje h2 { font-family: var(--heavy); font-weight: 700; font-size: 48px; color: #fff; margin: 0 0 6px; line-height: 1.1; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.mensaje .sub { color: #fff; font-size: 17px; max-width: 340px; margin: 0 auto 30px; }
.formulario { display: grid; grid-template-columns: 247px 1fr; gap: 14px 24px; text-align: left; }
.formulario .campos { display: grid; gap: 14px; align-content: start; }
.formulario input, .formulario textarea {
  width: 100%; background: rgba(255, 255, 255, .61); border: 0; border-radius: 0; color: #fff; font-family: var(--sans); font-size: 17px; padding: 0 14px; height: 50px;
}
.formulario textarea { height: 178px; padding: 14px; resize: vertical; font-style: italic; }
.formulario input::placeholder, .formulario textarea::placeholder { color: #fff; opacity: .95; font-weight: 700; }
.formulario textarea::placeholder { font-weight: 400; font-size: 13px; }
.formulario input:focus, .formulario textarea:focus { outline: 2px solid #fff; background: rgba(255, 255, 255, .75); color: var(--azul-oscuro); }
.formulario .pie-form { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.formulario button { background: rgba(255, 255, 255, .81); border: 0; color: #000; font-family: Arial, sans-serif; font-size: 13.3px; width: 142px; height: 47px; cursor: pointer; }
.formulario button:hover { background: #fff; }
.aviso { grid-column: 1 / -1; padding: 12px 16px; font-size: 15px; font-family: var(--sans); font-weight: 400; background: rgba(255,255,255,.9); color: var(--azul-oscuro); }
.aviso.error { background: rgba(255, 226, 220, .95); color: #7a2e22; }
.aviso a { color: inherit; }
@media (max-width: 860px) {
  .pagina-contacto .interior .columna { grid-template-columns: 1fr; }
  .datos { grid-template-columns: 1fr; }
  .pagina-mensaje .mensaje { margin-top: -70px; padding: 100px 16px 40px; min-height: 0; }
  .mensaje { padding: 40px 16px; }
  .mensaje .caja { padding: 28px 20px 32px; }
  .mensaje h2 { font-size: 34px; }
  .formulario { grid-template-columns: 1fr; }
}

/* ---------- pie: tres columnas centradas con ícono, separadas por líneas ---------- */
.pie { background: rgba(40, 59, 33, .94); color: #fff; padding: 36px 0 30px; }
.pie .columna { display: grid; grid-template-columns: repeat(3, 1fr); }
.pie .col { position: relative; padding: 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pie .col + .col::before { content: ""; position: absolute; left: 0; top: 40px; height: 90px; width: 1px; background: rgba(255, 255, 255, .9); }
.pie .col:last-child p { text-align: left; }
.pie .col:last-child p { max-width: 230px; }
.pie .col img { height: 40px; width: auto; margin: 0 0 20px; }
.pie .col a img { display: block; }
.pie p { font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.35; margin: 0 0 6px; color: #fff; max-width: 230px; }
.pie .chico { font-size: 12px; font-style: italic; opacity: .95; margin-top: 16px; max-width: 240px; }
.pie .chico strong { font-weight: 700; }
.pie a { color: #fff; text-decoration: none; }
@media (max-width: 860px) {
  .pie .columna { grid-template-columns: 1fr; gap: 28px; }
  .pie .col + .col::before { display: none; }
  .pie .col:last-child p { text-align: center; }
}