/* --------------------------------------------------------------------------
   Astra envuelve el contenido en un contenedor flex con ancho limitado, así que
   sin esto las secciones de la home aparecen una al lado de la otra en columnas
   angostas. Se neutraliza SOLO en la portada (la clase .bn), el resto del sitio
   sigue con el layout de Astra intacto.
   -------------------------------------------------------------------------- */
.bn #page, .bn #content, .bn #primary, .bn .site-content,
.bn .ast-container, .bn .entry-content, .bn .ast-article-single,
.bn main, .bn article{
  display:block !important; float:none !important;
  width:100% !important; max-width:100% !important;
  margin:0 !important; padding:0 !important; border:none !important;
}
.bn .ast-separate-container .ast-article-single{background:transparent !important}
.bn #secondary, .bn .ast-page-builder-template .site-content > .ast-container{display:block !important}
.bn .entry-header, .bn .ast-single-entry-banner, .bn .page-title{display:none !important}
.bn #content{background:var(--crema) !important}
.bn .site-content{overflow-x:hidden}

/* ==========================================================================
   Residencia Bonifacini · "Una casa, no una institución"
   Paleta tomada de la propia casona: verde hiedra, crema de fachada, terracota
   de las tejas. Cuerpo grande a propósito: el que lee tiene 65 años y está en
   el celular de noche.
   ========================================================================== */
:root{
  --verde:#2E4636; --verde2:#3F6049; --verde-claro:#6B8F76; --verde-suave:#DDEBE1;
  --crema:#F6F2E9; --crema2:#EDE6D8; --tierra:#B4593A; --wa:#25D366;
  --tinta:#22261F; --gris:#5E6358; --linea:rgba(46,70,54,.14);
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',-apple-system,'Segoe UI',sans-serif;
  --ancho:1180px; --r:4px;
  --sombra:0 2px 10px rgba(34,38,31,.07); --sombra2:0 10px 34px rgba(34,38,31,.13);
}
*,*::before,*::after{box-sizing:border-box}
.bn{margin:0;padding:0;font-family:var(--sans);font-size:18px;line-height:1.65;
    color:var(--tinta);background:var(--crema);-webkit-font-smoothing:antialiased}
.bn img{max-width:100%;height:auto;display:block}
.bn a{color:var(--verde);text-decoration:none}
.bn h1,.bn h2,.bn h3,.bn h4{font-family:var(--serif);font-weight:600;
    line-height:1.14;letter-spacing:-.01em;margin:0 0 .5em;color:var(--verde)}
.bn p{margin:0 0 1.1em}
.bn ul{margin:0;padding:0;list-style:none}
.bn-in{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.bn-sec{padding:88px 0}
.bn-sec--crema{background:var(--crema2)}
.bn-sec--blanco{background:#fff}
.bn-kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--verde-claro);font-weight:600;margin-bottom:14px;font-family:var(--sans)}
.bn-tit{font-size:clamp(30px,4.4vw,46px);margin-bottom:16px}
.bn-sub{font-size:19px;color:var(--gris);max-width:660px;line-height:1.62}

/* ---- botones: 48px de alto mínimo, que es lo que necesita un dedo ---- */
.bn-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
    min-height:54px;padding:15px 28px;border-radius:var(--r);font-size:17px;
    font-weight:600;font-family:var(--sans);transition:transform .15s,box-shadow .2s,opacity .2s;
    border:none;cursor:pointer;text-align:center}
.bn-btn:hover{transform:translateY(-2px)}
.bn-btn--wa{background:var(--wa);color:#fff!important;box-shadow:0 4px 16px rgba(37,211,102,.34)}
.bn-btn--wa:hover{box-shadow:0 8px 24px rgba(37,211,102,.42)}
.bn-btn--linea{background:transparent;color:#fff!important;border:1.5px solid rgba(255,255,255,.5)}
.bn-btn--linea:hover{background:rgba(255,255,255,.12)}
.bn-btn--verde{background:var(--verde);color:#fff!important}
.bn-btn--tierra{background:var(--tierra);color:#fff!important}

/* ---- hero ---- */
.bn-hero{position:relative;min-height:640px;display:flex;align-items:center;overflow:hidden}
.bn-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bn-hero__velo{position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(28,42,32,.93) 0%,rgba(28,42,32,.74) 42%,rgba(28,42,32,.28) 100%)}
.bn-hero__in{position:relative;z-index:2;width:100%;padding:76px 0}
.bn-hero__cuerpo{max-width:620px}
.bn-hero .bn-kicker{color:#A9C9B4}
.bn-hero h1{font-size:clamp(34px,5.6vw,60px);color:#fff;margin-bottom:20px;line-height:1.08}
.bn-hero p{font-size:20px;color:rgba(255,255,255,.9);line-height:1.6;margin-bottom:30px;max-width:520px}
.bn-hero__tres{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.bn-hero__tres span{display:flex;align-items:center;gap:16px;color:#fff;font-size:clamp(32px,4.8vw,54px);line-height:1.05}
.bn-hero__tres svg{width:clamp(30px,3.4vw,40px);height:clamp(30px,3.4vw,40px);flex-shrink:0}
.bn-hero .bn-hero__bajada{font-family:var(--sans);font-weight:400;font-size:20px;color:rgba(255,255,255,.92) !important;line-height:1.6;margin:0 0 30px;max-width:520px}
.bn-hero__btns{display:flex;gap:14px;flex-wrap:wrap}

/* ---- tira de datos ---- */
.bn-datos{background:var(--verde);color:#fff}
.bn-datos ul{display:grid;grid-template-columns:repeat(4,1fr)}
.bn-datos li{padding:26px 18px;text-align:center;border-right:1px solid rgba(255,255,255,.15)}
.bn-datos li:last-child{border-right:none}
.bn-datos b{display:block;font-family:var(--serif);font-size:27px;margin-bottom:4px;color:#fff}
.bn-datos span{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}

/* ---- galería de la casa ---- */
.bn-casa{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.bn-casa figure{margin:0;background:#fff;border-radius:var(--r);overflow:hidden;
    box-shadow:var(--sombra);transition:transform .25s,box-shadow .25s}
.bn-casa figure:hover{transform:translateY(-5px);box-shadow:var(--sombra2)}
.bn-casa img{width:100%;height:238px;object-fit:cover}
.bn-casa figcaption{padding:20px 22px 24px}
.bn-casa b{display:block;font-family:var(--serif);font-size:20px;color:var(--verde);margin-bottom:5px}
.bn-casa span{font-size:16px;color:var(--gris);line-height:1.55}

/* ---- servicios en cuatro bloques ---- */
.bn-servs{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:44px}
.bn-serv h3{font-size:21px;padding-bottom:12px;margin-bottom:16px;border-bottom:2px solid var(--verde-suave)}
.bn-serv li{font-size:16.5px;color:var(--gris);line-height:1.9;padding-left:20px;position:relative}
.bn-serv li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;
    border-radius:50%;background:var(--tierra)}
.bn-serv .bn-resp{margin-top:14px;font-size:14.5px;color:var(--verde-claro);font-style:italic;line-height:1.5}

/* ---- la frase de confianza ---- */
.bn-confianza{background:var(--verde);color:#fff;padding:76px 0}
.bn-confianza .bn-in{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.bn-confianza h2{color:#fff;font-size:clamp(26px,3.4vw,36px);line-height:1.3;margin-bottom:18px}
.bn-confianza p{color:rgba(255,255,255,.82);font-size:18px;margin:0}
.bn-confianza .bn-kicker{color:#A9C9B4}
.bn-aviso{background:rgba(255,255,255,.09);border-left:3px solid var(--tierra);
    padding:24px 26px;border-radius:var(--r)}
.bn-aviso b{display:block;color:#fff;font-size:18px;margin-bottom:8px;font-family:var(--serif)}
.bn-aviso span{color:rgba(255,255,255,.8);font-size:16.5px;line-height:1.6}

/* ---- blog ---- */
.bn-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:42px}
.bn-post{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);
    display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.bn-post:hover{transform:translateY(-5px);box-shadow:var(--sombra2)}
.bn-post__img{width:100%;height:180px;object-fit:cover;background:var(--crema2)}
.bn-post__cuerpo{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.bn-post time{font-size:13.5px;color:var(--verde-claro);letter-spacing:.06em;
    text-transform:uppercase;font-weight:600;margin-bottom:9px;display:block}
.bn-post h3{font-size:19px;line-height:1.32;margin-bottom:10px}
.bn-post p{font-size:15.5px;color:var(--gris);line-height:1.55;margin:0 0 16px;flex:1}
.bn-post__mas{font-size:15.5px;font-weight:600;color:var(--tierra)}
.bn-centro{text-align:center;margin-top:44px}

/* ---- contacto ---- */
.bn-contacto{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:40px}
.bn-vias li{margin-bottom:22px;display:flex;gap:16px;align-items:flex-start}
.bn-vias .ic{width:44px;height:44px;border-radius:50%;background:var(--verde-suave);
    color:var(--verde);display:flex;align-items:center;justify-content:center;
    font-size:20px;flex-shrink:0}
.bn-vias b{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--verde-claro);margin-bottom:3px}
.bn-vias a,.bn-vias span{font-size:18px;color:var(--tinta);line-height:1.45}
.bn-vias a:hover{color:var(--tierra)}
.bn-mapa{border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);min-height:340px;border:none;width:100%}

/* ---- pie ---- */
.bn-pie{background:var(--verde);color:rgba(255,255,255,.72);padding:56px 0 30px;font-size:16px}
.bn-pie__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;margin-bottom:36px}
.bn-pie h4{color:#fff;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
    margin-bottom:16px;font-family:var(--sans);font-weight:600}
.bn-pie a{color:rgba(255,255,255,.72)}
.bn-pie a:hover{color:#fff}
.bn-pie li{margin-bottom:9px;line-height:1.5}
.bn-pie__logo{height:54px;margin-bottom:16px;filter:brightness(0) invert(1);opacity:.92}
.bn-pie__legal{border-top:1px solid rgba(255,255,255,.16);padding-top:22px;
    font-size:14.5px;color:rgba(255,255,255,.55);text-align:center}
.bn-pie__legal b{color:rgba(255,255,255,.85)}

/* ---- barra fija de contacto en el celular ---- */
.bn-barra{display:none;position:fixed;left:0;right:0;bottom:0;z-index:9998;
    background:#fff;border-top:1px solid var(--linea);padding:10px 12px;
    gap:10px;box-shadow:0 -3px 16px rgba(34,38,31,.12)}
.bn-barra a{flex:1;min-height:52px;font-size:16.5px;padding:13px 10px}

/* ==========================  CELULAR  ========================== */
@media (max-width:980px){
  .bn-casa,.bn-servs,.bn-posts{grid-template-columns:repeat(2,1fr)}
  .bn-confianza .bn-in,.bn-contacto{grid-template-columns:1fr;gap:34px}
  .bn-pie__grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:700px){
  .bn{font-size:17px}
  .bn-sec{padding:58px 0}
  .bn-in{padding:0 20px}
  .bn-hero{min-height:auto}
  .bn-hero__in{padding:54px 0 46px}
  .bn-hero p{font-size:18px}
  .bn-hero__bajada{font-size:18px}
  .bn-hero__tres{gap:9px;margin-bottom:20px}
  .bn-hero__btns{flex-direction:column}
  .bn-hero__btns .bn-btn{width:100%}
  .bn-datos ul{grid-template-columns:1fr 1fr}
  .bn-datos li{border-bottom:1px solid rgba(255,255,255,.15);padding:20px 12px}
  .bn-datos li:nth-child(2n){border-right:none}
  .bn-datos b{font-size:23px}
  .bn-casa,.bn-servs,.bn-posts{grid-template-columns:1fr;gap:20px}
  .bn-casa img{height:210px}
  .bn-pie__grid{grid-template-columns:1fr;gap:28px}
  .bn-barra{display:flex}
  body.bn{padding-bottom:76px}
}

/* ==========================================================================
   ENCABEZADO PROPIO
   El de Astra queda oculto solo en la portada: trae el menú viejo y no tiene
   dónde poner el botón de WhatsApp, que es el que más se usa.
   ========================================================================== */
.bn .site-header, .bn #masthead, .bn .ast-above-header, .bn .ast-below-header{display:none !important}
.bn-cab{position:sticky;top:0;z-index:9990;background:#fff;border-bottom:1px solid var(--linea);
    box-shadow:0 1px 8px rgba(34,38,31,.05)}
.bn-cab__in{max-width:var(--ancho);margin:0 auto;padding:0 24px;height:80px;
    display:flex;align-items:center;justify-content:space-between;gap:24px}
.bn-cab__logo img{height:46px;width:auto}
.bn-cab__nav{display:flex;align-items:center;gap:30px}
.bn-cab__nav a{font-size:14px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--gris);font-weight:600;transition:color .2s;white-space:nowrap}
.bn-cab__nav a:hover{color:var(--verde)}
.bn-cab__wa{background:var(--wa);color:#fff !important;padding:12px 22px;border-radius:var(--r);
    letter-spacing:.04em !important;text-transform:none !important;font-size:15px !important;
    box-shadow:0 3px 12px rgba(37,211,102,.3)}
.bn-cab__wa:hover{color:#fff !important;transform:translateY(-1px)}
.bn-cab__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;
    cursor:pointer;padding:10px}
.bn-cab__burger span{display:block;width:26px;height:2.5px;background:var(--verde);border-radius:2px;
    transition:transform .3s,opacity .3s}
.bn-cab.abierto .bn-cab__burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.bn-cab.abierto .bn-cab__burger span:nth-child(2){opacity:0}
.bn-cab.abierto .bn-cab__burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---- franja de servicios, debajo de las fotos de la casa ---- */
.bn-franja{margin-top:42px;background:#fff;border:1px solid var(--linea);
    border-radius:var(--r);padding:24px 28px 26px}
.bn-franja__t{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--verde-claro);font-weight:600;margin-bottom:16px;text-align:center}
.bn-franja ul{display:flex}
.bn-franja li{flex:1;text-align:center;padding:0 12px;border-right:1px solid var(--linea);
    font-size:15px;color:var(--gris);line-height:1.4}
.bn-franja li:last-child{border-right:none}
.bn-franja b{display:block;font-family:var(--serif);font-size:18px;color:var(--verde);margin-bottom:3px}

@media (max-width:900px){
  .bn-cab__nav{position:fixed;inset:80px 0 auto 0;background:#fff;flex-direction:column;
      align-items:stretch;gap:0;padding:12px 20px 26px;border-bottom:1px solid var(--linea);
      box-shadow:0 12px 28px rgba(34,38,31,.14);display:none}
  .bn-cab.abierto .bn-cab__nav{display:flex}
  .bn-cab__nav a{padding:16px 4px;font-size:16px;border-bottom:1px solid var(--linea)}
  .bn-cab__wa{margin-top:14px;text-align:center;border-bottom:none !important;padding:16px}
  .bn-cab__burger{display:flex}
  .bn-cab__in{height:72px;padding:0 20px}
  .bn-cab__logo img{height:40px}
  .bn-franja ul{flex-direction:column;gap:14px}
  .bn-franja li{border-right:none;border-bottom:1px solid var(--linea);padding:0 0 14px}
  .bn-franja li:last-child{border-bottom:none;padding-bottom:0}
}

/* El encabezado viejo lo arma Elementor Theme Builder, no Astra: por eso no
   alcanzaba con ocultar .site-header. Se oculta solo en la portada. */
.bn .elementor-location-header,
.bn [data-elementor-type="header"],
.bn header[data-elementor-type="header"]{display:none !important}

/* ---- formulario de consulta ---- */
.bn-form{background:#fff;border:1px solid var(--linea);border-radius:var(--r);
    padding:30px 30px 32px;box-shadow:var(--sombra);margin-bottom:24px}
.bn-form h3{font-size:23px;margin-bottom:5px}
.bn-form__sub{font-size:16px;color:var(--gris);margin-bottom:22px}
.bn-form label{display:block;font-size:15px;font-weight:600;color:var(--verde);
    margin-bottom:16px;letter-spacing:.01em}
.bn-form input,.bn-form textarea{display:block;width:100%;margin-top:7px;
    padding:14px 15px;font-size:17px;font-family:var(--sans);color:var(--tinta);
    background:var(--crema);border:1.5px solid var(--linea);border-radius:var(--r);
    transition:border-color .2s,background .2s}
.bn-form input:focus,.bn-form textarea:focus{outline:none;border-color:var(--verde-claro);background:#fff}
.bn-form textarea{resize:vertical;min-height:88px;line-height:1.5}
.bn-form button{width:100%;margin-top:6px}
.bn-trampa{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;opacity:0 !important}
.bn-form__msg{margin-top:14px;font-size:16px;line-height:1.5;min-height:1px}
.bn-form__msg.bien{color:var(--verde2);font-weight:600}
.bn-form__msg.mal{color:var(--tierra);font-weight:600}
@media (max-width:700px){ .bn-form{padding:24px 20px 26px} }

/* ---- tarjetas de zona (ahora son botones que abren el visor) ---- */
.bn-zona{display:block;width:100%;text-align:left;padding:0;border:none;cursor:pointer;
    background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);
    transition:transform .25s,box-shadow .25s;font-family:var(--sans)}
.bn-zona:hover{transform:translateY(-5px);box-shadow:var(--sombra2)}
.bn-zona img{width:100%;height:238px;object-fit:cover;display:block}
.bn-zona__cuerpo{display:block;padding:20px 22px 24px}
.bn-zona__cuerpo b{display:block;font-family:var(--serif);font-size:20px;color:var(--verde);margin-bottom:5px}
.bn-zona__cuerpo > span{display:block;font-size:16px;color:var(--gris);line-height:1.55}
.bn-zona__ver{margin-top:11px;font-size:14px !important;font-weight:600;color:var(--tierra) !important;
    letter-spacing:.04em;text-transform:uppercase}

/* ---- visor: foto grande arriba, carrusel abajo ---- */
.bn-visor{position:fixed;inset:0;z-index:99999;background:rgba(18,26,20,.96);
    display:flex;align-items:center;justify-content:center;padding:20px}
.bn-visor[hidden]{display:none}
.bn-visor__caja{width:100%;max-width:1100px;display:flex;flex-direction:column;gap:16px}
.bn-visor__tit{font-family:var(--serif);font-size:24px;color:#fff;text-align:center}
.bn-visor__marco{position:relative;display:flex;align-items:center;justify-content:center}
.bn-visor__grande{max-width:100%;max-height:64vh;width:auto;border-radius:var(--r);
    box-shadow:0 18px 50px rgba(0,0,0,.5)}
.bn-visor__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
    border-radius:50%;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:30px;
    line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .2s;backdrop-filter:blur(6px)}
.bn-visor__nav:hover{background:rgba(255,255,255,.3)}
.bn-visor__nav--izq{left:14px} .bn-visor__nav--der{right:14px}
.bn-visor__x{position:absolute;top:20px;right:24px;width:48px;height:48px;border-radius:50%;
    border:none;background:rgba(255,255,255,.16);color:#fff;font-size:30px;line-height:1;
    cursor:pointer;transition:background .2s}
.bn-visor__x:hover{background:rgba(255,255,255,.3)}
.bn-visor__tira{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;justify-content:center;
    scrollbar-width:thin}
.bn-visor__tira button{flex:0 0 auto;width:104px;height:76px;padding:0;border:2.5px solid transparent;
    border-radius:var(--r);overflow:hidden;cursor:pointer;background:none;opacity:.55;
    transition:opacity .2s,border-color .2s}
.bn-visor__tira button:hover{opacity:.85}
.bn-visor__tira button.activa{opacity:1;border-color:var(--wa)}
.bn-visor__tira img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:700px){
  .bn-zona img{height:210px}
  .bn-visor{padding:12px}
  .bn-visor__tit{font-size:19px}
  .bn-visor__grande{max-height:52vh}
  .bn-visor__nav{width:44px;height:44px;font-size:26px}
  .bn-visor__nav--izq{left:6px} .bn-visor__nav--der{right:6px}
  .bn-visor__x{top:10px;right:12px;width:42px;height:42px;font-size:26px}
  .bn-visor__tira{justify-content:flex-start}
  .bn-visor__tira button{width:78px;height:58px}
}

/* ---- el botón de WhatsApp respira ----
   Un halo verde que late despacio: llama la atención sin gritar, que es lo que
   corresponde para este público. El brillo interno da la sensación de encendido. */
@keyframes bn-late-wa{
  0%,100%{ box-shadow:0 4px 16px rgba(37,211,102,.36), 0 0 0 0 rgba(37,211,102,.42); }
  50%    { box-shadow:0 6px 26px rgba(37,211,102,.55), 0 0 0 14px rgba(37,211,102,0); }
}
@keyframes bn-brillo-wa{
  0%  { transform:translateX(-120%) skewX(-20deg); }
  55% { transform:translateX(320%)  skewX(-20deg); }
  100%{ transform:translateX(320%)  skewX(-20deg); }
}
.bn-btn--wa{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,#2BE476 0%,#25D366 48%,#1EBE5A 100%);
  animation:bn-late-wa 3s ease-in-out infinite;
}
.bn-btn--wa::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  animation:bn-brillo-wa 4.5s ease-in-out infinite; pointer-events:none; z-index:-1;
}
.bn-btn--wa:hover{
  animation-play-state:paused;
  box-shadow:0 10px 30px rgba(37,211,102,.6), 0 0 0 6px rgba(37,211,102,.16);
  filter:brightness(1.06);
}
/* el del encabezado late más suave, para no distraer mientras se lee */
.bn-cab__wa{
  background:linear-gradient(135deg,#2BE476 0%,#25D366 52%,#1EBE5A 100%);
  animation:bn-late-wa 3.6s ease-in-out infinite;
}
.bn-cab__wa:hover{animation-play-state:paused;filter:brightness(1.06)}
/* quien prefiere menos movimiento no ve la animación */
@media (prefers-reduced-motion:reduce){
  .bn-btn--wa,.bn-cab__wa{animation:none}
  .bn-btn--wa::after{display:none}
}

/* ---- la tira de datos cobra vida al entrar en pantalla ----
   Los números suben de a uno cuando la franja aparece, y cada bloque se ilumina
   al pasar por encima. Es lo primero que se ve después de la foto grande, así
   que un movimiento breve ahí fija los cuatro datos que importan. */
.bn-datos li{position:relative;overflow:hidden;
  transition:opacity .55s ease, transform .55s ease, background .3s ease}
/* Los bloques SOLO se esconden si el JS pudo marcar la franja como animable.
   Si el script falla o el navegador es viejo, quedan visibles: nunca invisibles. */
.bn-datos li:hover{background:rgba(255,255,255,.07)}
.bn-datos li b{transition:transform .3s ease, text-shadow .3s ease}
.bn-datos li:hover b{transform:translateY(-2px);
  text-shadow:0 0 22px rgba(169,201,180,.55), 0 0 44px rgba(169,201,180,.28)}
/* una línea de luz cruza la franja una vez, cuando aparece */
.bn-datos{position:relative;overflow:hidden}
.bn-datos::after{content:"";position:absolute;top:0;bottom:0;left:0;width:26%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);
  transform:translateX(-140%);pointer-events:none}
.bn-datos.animable.visible::after{animation:bn-cruza 1.5s .45s ease-out forwards}
@keyframes bn-cruza{to{transform:translateX(420%)}}
@media (prefers-reduced-motion:reduce){
    .bn-datos::after{display:none}
}

/* ---- la vida en la residencia ---- */
.bn-vida{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-top:36px}
.bn-vida__g{position:relative;padding:0;border:none;background:none;cursor:pointer;
    border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);
    transition:transform .25s,box-shadow .25s}
.bn-vida__g:hover{transform:translateY(-4px);box-shadow:var(--sombra2)}
.bn-vida__g img{width:100%;height:420px;object-fit:cover;display:block}
.bn-vida__pie{position:absolute;left:0;right:0;bottom:0;padding:34px 22px 18px;
    background:linear-gradient(transparent,rgba(24,34,26,.88));color:#fff;
    font-size:15.5px;text-align:left;display:block}
.bn-vida__pie b{color:#A9C9B4;font-weight:600}
.bn-vida__chicas{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bn-vida__c{padding:0;border:none;background:none;cursor:pointer;border-radius:var(--r);
    overflow:hidden;box-shadow:var(--sombra);transition:transform .25s,box-shadow .25s}
.bn-vida__c:hover{transform:translateY(-4px);box-shadow:var(--sombra2)}
.bn-vida__c img{width:100%;height:201px;object-fit:cover;display:block}
.bn-vida__nota{margin-top:20px;font-size:16.5px;color:var(--gris);line-height:1.6;max-width:700px}
@media (max-width:900px){
  .bn-vida{grid-template-columns:1fr}
  .bn-vida__g img{height:280px}
  .bn-vida__c img{height:150px}
}

/* el mapa pasó a ocupar todo el ancho debajo del contacto: el bloque medía casi
   dos pantallas y media apilando formulario y mapa en la misma columna */
.bn-mapa{min-height:300px;margin-top:34px}
@media (max-width:700px){ .bn-mapa{min-height:240px;margin-top:24px} }

/* ==========================================================================
   CAPA DE DISEÑO
   Lo anterior era correcto pero plano: fondo liso, tarjetas blancas sin peso.
   Acá se agrega profundidad (sombras en capas), textura, detalles de marca y
   tratamiento de imagen. Nada estridente: el rubro pide elegancia, no ruido.
   ========================================================================== */

/* ---- textura de papel: quita el plano del fondo sin que se note ---- */
.bn-sec, .bn-sec--crema, .bn-sec--blanco{position:relative}
.bn-sec::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(46,70,54,.045) 1px, transparent 1px);
  background-size:22px 22px}
.bn-sec > .bn-in{position:relative;z-index:1}

/* ---- la etiqueta de sección lleva una línea, como en una revista ---- */
.bn-kicker{display:flex;align-items:center;gap:14px}
.bn-kicker::after{content:"";flex:1;max-width:72px;height:1px;
  background:linear-gradient(90deg,var(--verde-claro),transparent)}

/* ---- el titular con un ornamento fino debajo ---- */
.bn-tit{position:relative;padding-bottom:18px}
.bn-tit::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;
  background:linear-gradient(90deg,var(--tierra),rgba(180,89,58,.25));border-radius:2px}

/* ---- sombras en capas: es lo que separa lo amateur de lo trabajado ---- */
:root{
  --sombra:0 1px 2px rgba(34,38,31,.05), 0 4px 12px rgba(34,38,31,.06);
  --sombra2:0 2px 4px rgba(34,38,31,.06), 0 12px 28px rgba(34,38,31,.13), 0 24px 48px rgba(34,38,31,.07);
}

/* ---- tarjetas de zona: borde de acento, zoom de imagen y velo al pasar ---- */
.bn-zona{border:1px solid rgba(46,70,54,.09);position:relative}
.bn-zona::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--verde),var(--verde-claro));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.bn-zona:hover::before{transform:scaleX(1)}
.bn-zona > img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.bn-zona:hover > img{transform:scale(1.06)}
.bn-zona{overflow:hidden}
.bn-zona__ver{display:inline-flex;align-items:center;gap:7px}
.bn-zona__ver::after{content:"→";transition:transform .3s ease;display:inline-block}
.bn-zona:hover .bn-zona__ver::after{transform:translateX(5px)}

/* ---- la franja de servicios deja de ser una caja blanca ---- */
.bn-franja{background:linear-gradient(180deg,#fff,#FBF9F4);
  border:1px solid rgba(46,70,54,.1);box-shadow:var(--sombra);position:relative}
.bn-franja::before{content:"";position:absolute;top:-1px;left:26px;right:26px;height:2px;
  background:linear-gradient(90deg,transparent,var(--tierra),transparent);opacity:.5}
.bn-franja b{position:relative;display:inline-block}

/* ---- los bloques de servicios, con número y línea ---- */
.bn-serv{position:relative;padding-left:2px}
.bn-serv h3{border-bottom:none;position:relative;padding-bottom:14px}
.bn-serv h3::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:2px;
  background:var(--verde-claro);transition:width .35s ease}
.bn-serv:hover h3::after{width:100%;background:linear-gradient(90deg,var(--verde-claro),transparent)}

/* ---- el blog con más presencia ---- */
.bn-post{border:1px solid rgba(46,70,54,.09);overflow:hidden}
.bn-post__img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.bn-post:hover .bn-post__img{transform:scale(1.05)}
.bn-post__mas{display:inline-flex;align-items:center;gap:7px}
.bn-post__mas::after{content:"→";transition:transform .3s ease}
.bn-post:hover .bn-post__mas::after{transform:translateX(5px)}

/* ---- separadores entre secciones: una filigrana, no una línea seca ---- */
.bn-sec + .bn-sec::after, .bn-sec--crema + .bn-sec::after{content:"";position:absolute;
  top:0;left:50%;transform:translateX(-50%);width:min(1180px,88%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(46,70,54,.14),transparent)}

/* ---- el formulario, con más jerarquía ---- */
.bn-form{background:linear-gradient(180deg,#fff,#FCFAF6);
  border:1px solid rgba(46,70,54,.11);position:relative;overflow:hidden}
.bn-form::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--verde),var(--verde-claro),var(--tierra))}
.bn-form h3{position:relative;padding-bottom:0}

/* ---- las preguntas, como fichas ---- */
.bn-faq details{background:#fff;border:1px solid rgba(46,70,54,.1);border-radius:var(--r);
  margin-bottom:12px;padding:0 22px;box-shadow:var(--sombra);transition:box-shadow .25s}
.bn-faq details[open]{box-shadow:var(--sombra2)}
.bn-faq summary{cursor:pointer;padding:20px 0;font-family:var(--serif);font-size:19px;
  color:var(--verde);list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:16px}
.bn-faq summary::-webkit-details-marker{display:none}
.bn-faq summary::after{content:"+";font-family:var(--sans);font-size:24px;color:var(--tierra);
  transition:transform .3s ease;flex-shrink:0;font-weight:300}
.bn-faq details[open] summary::after{transform:rotate(45deg)}
.bn-faq__r{padding:0 0 22px;font-size:17px;color:var(--gris);line-height:1.65;
  border-top:1px solid rgba(46,70,54,.08);padding-top:18px;margin-top:-2px}

/* ---- las vías de contacto, con más definición ---- */
.bn-vias li{padding:14px 16px;border-radius:var(--r);transition:background .25s}
.bn-vias li:hover{background:#fff;box-shadow:var(--sombra)}
.bn-vias .ic{background:linear-gradient(135deg,var(--verde-suave),#EAF3EC);
  box-shadow:inset 0 0 0 1px rgba(46,70,54,.08)}

/* ---- el mapa, integrado y no pegado ---- */
.bn-mapa{border:1px solid rgba(46,70,54,.12);box-shadow:var(--sombra2);filter:saturate(.92)}

/* ---- la vida en la residencia: la grande con más peso ---- */
.bn-vida__g img, .bn-vida__c img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.bn-vida__g:hover img, .bn-vida__c:hover img{transform:scale(1.05)}
.bn-vida__g, .bn-vida__c{border:1px solid rgba(46,70,54,.09)}

@media (max-width:700px){
  .bn-tit{padding-bottom:14px}
  .bn-tit::after{width:44px}
  .bn-faq summary{font-size:17px;padding:17px 0}
  .bn-faq details{padding:0 18px}
}

/* ==========================================================================
   RITMO DE FONDOS
   El problema no eran los detalles: eran seis secciones claras seguidas. Sin
   contraste, cualquier ornamento se pierde. "La casa" pasa a fondo profundo,
   que además hace que las fotos resalten como en un catálogo.
   ========================================================================== */
#la-casa{background:linear-gradient(170deg,#22351F 0%,#2E4636 55%,#243A2B 100%);color:#fff}
#la-casa::before{opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px)}
#la-casa .bn-tit{color:#fff}
#la-casa .bn-tit::after{background:linear-gradient(90deg,#D08A6B,rgba(208,138,107,.2))}
#la-casa .bn-kicker{color:#A9C9B4}
#la-casa .bn-kicker::after{background:linear-gradient(90deg,rgba(169,201,180,.7),transparent)}
#la-casa .bn-sub{color:rgba(255,255,255,.72)}
/* las tarjetas sobre el verde: bordes cálidos y sombra profunda */
#la-casa .bn-zona{background:#FBF9F4;border-color:rgba(255,255,255,.14);
  box-shadow:0 4px 10px rgba(0,0,0,.2), 0 18px 44px rgba(0,0,0,.3)}
#la-casa .bn-zona:hover{box-shadow:0 8px 18px rgba(0,0,0,.26), 0 28px 64px rgba(0,0,0,.42)}
/* la franja de servicios, translúcida sobre el verde */
#la-casa .bn-franja{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(6px);box-shadow:none}
#la-casa .bn-franja__t{color:#A9C9B4}
#la-casa .bn-franja li{color:rgba(255,255,255,.68);border-right-color:rgba(255,255,255,.14)}
#la-casa .bn-franja b{color:#fff}
#la-casa .bn-franja::before{background:linear-gradient(90deg,transparent,#D08A6B,transparent);opacity:.7}

/* el resto del ritmo: claro, blanco, verde, claro, blanco, claro */
#servicios{background:var(--crema)}
#blog{background:var(--crema2)}
#preguntas{background:#fff}
#contacto{background:var(--crema)}
/* el separador no hace falta cuando el fondo ya cambia */
#servicios::after, #nosotros::after{display:none}

@media (max-width:700px){
  #la-casa .bn-zona{box-shadow:0 3px 8px rgba(0,0,0,.18), 0 12px 28px rgba(0,0,0,.26)}
  #la-casa .bn-franja{backdrop-filter:none;background:rgba(255,255,255,.07)}
}

/* cuatro tarjetas en dos filas de dos: más grandes y sin huecos en la grilla */
.bn-casa{grid-template-columns:repeat(2,1fr);gap:30px}
.bn-zona > img{height:320px}
@media (max-width:700px){
  .bn-casa{grid-template-columns:1fr}
  .bn-zona > img{height:220px}
}

/* ==========================================================================
   ESTADOS AL TOCAR
   Al tocar en el celular, el navegador pinta encima un velo oscuro propio
   (tap highlight) y el texto de la tarjeta quedaba ilegible. Se anula y se
   definen estados propios: la tarjeta se hunde apenas y se ilumina el borde.
   ========================================================================== */
.bn-zona, .bn-vida__g, .bn-vida__c, .bn-btn, .bn-cab__wa, .bn-post,
.bn-faq summary, .bn-visor__tira button, .bn-visor__nav, .bn-visor__x{
  -webkit-tap-highlight-color:transparent;
}
.bn-zona:active, .bn-vida__g:active, .bn-vida__c:active{
  transform:translateY(-1px) scale(.993);
  box-shadow:0 2px 6px rgba(0,0,0,.2), 0 10px 24px rgba(0,0,0,.26);
}
/* el fondo de la tarjeta no cambia NUNCA: es lo que garantiza que se lea */
.bn-zona, .bn-zona:hover, .bn-zona:active, .bn-zona:focus,
#la-casa .bn-zona, #la-casa .bn-zona:hover, #la-casa .bn-zona:active, #la-casa .bn-zona:focus{
  background:#FBF9F4;
}
.bn-zona__cuerpo{background:#FBF9F4}
.bn-zona:active .bn-zona__cuerpo b, .bn-zona:focus .bn-zona__cuerpo b{color:var(--verde)}
.bn-zona:active .bn-zona__cuerpo > span{color:var(--gris)}
/* para quien navega con teclado, un anillo claro sobre el fondo oscuro */
.bn-zona:focus-visible, .bn-vida__g:focus-visible, .bn-vida__c:focus-visible{
  outline:3px solid #A9C9B4; outline-offset:3px;
}
.bn-btn:focus-visible, .bn-cab__wa:focus-visible{outline:3px solid var(--verde-claro);outline-offset:3px}

/* ==========================================================================
   "LO QUE ESTÁ INCLUIDO" ILUMINADA
   Sobre el verde profundo, la franja se enciende: halo cálido alrededor, un
   filo de luz arriba que respira y un reflejo que la recorre despacio.
   ========================================================================== */
@keyframes bn-halo{
  0%,100%{ box-shadow:0 0 0 1px rgba(255,255,255,.09) inset,
                     0 0 28px rgba(169,201,180,.14),
                     0 12px 40px rgba(0,0,0,.28); }
  50%    { box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,
                     0 0 46px rgba(169,201,180,.28),
                     0 12px 44px rgba(0,0,0,.3); }
}
@keyframes bn-filo{
  0%,100%{ opacity:.45; }
  50%    { opacity:1; }
}
@keyframes bn-reflejo{
  0%  { transform:translateX(-130%) skewX(-16deg); }
  60% { transform:translateX(340%)  skewX(-16deg); }
  100%{ transform:translateX(340%)  skewX(-16deg); }
}
#la-casa .bn-franja{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  border-color:rgba(255,255,255,.2);
  animation:bn-halo 4.2s ease-in-out infinite;
}
/* el filo de luz de arriba late */
#la-casa .bn-franja::before{
  height:2px; left:0; right:0; opacity:.45;
  background:linear-gradient(90deg,transparent,#A9C9B4 22%,#E4C9A8 50%,#A9C9B4 78%,transparent);
  animation:bn-filo 4.2s ease-in-out infinite;
}
/* un reflejo que la recorre */
#la-casa .bn-franja::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  animation:bn-reflejo 7s ease-in-out infinite; pointer-events:none;
}
/* los títulos con un resplandor apenas perceptible */
#la-casa .bn-franja b{
  color:#fff; text-shadow:0 0 16px rgba(169,201,180,.5), 0 0 34px rgba(169,201,180,.2);
  transition:text-shadow .3s ease;
}
#la-casa .bn-franja li{transition:transform .3s ease}
#la-casa .bn-franja li:hover{transform:translateY(-3px)}
#la-casa .bn-franja li:hover b{
  text-shadow:0 0 20px rgba(228,201,168,.85), 0 0 42px rgba(228,201,168,.4);
}
#la-casa .bn-franja__t{
  color:#C9DFD1;
  text-shadow:0 0 14px rgba(169,201,180,.35);
}
@media (prefers-reduced-motion:reduce){
  #la-casa .bn-franja{animation:none}
  #la-casa .bn-franja::before{animation:none;opacity:.8}
  #la-casa .bn-franja::after{display:none}
}

/* ==========================================================================
   SERVICIOS EN TARJETAS
   Antes eran cuatro columnas de texto suelto con alturas distintas, así que
   las preguntas del pie quedaban desalineadas. Ahora son fichas parejas, con
   el símbolo del bloque, checks y la pregunta anclada abajo.
   ========================================================================== */
.bn-servs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;align-items:stretch}
.bn-serv{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(46,70,54,.1);
  border-radius:var(--r);padding:0;overflow:hidden;box-shadow:var(--sombra);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease}
.bn-serv:hover{transform:translateY(-5px);box-shadow:var(--sombra2);border-color:rgba(46,70,54,.2)}
.bn-serv__cab{display:flex;align-items:center;gap:13px;padding:24px 24px 16px;
  border-bottom:1px solid rgba(46,70,54,.09);position:relative}
.bn-serv__cab::after{content:"";position:absolute;left:24px;bottom:-1px;width:42px;height:2px;
  background:var(--tierra);transition:width .35s ease}
.bn-serv:hover .bn-serv__cab::after{width:calc(100% - 48px)}
.bn-serv__ic{width:42px;height:42px;flex-shrink:0;border-radius:50%;
  background:linear-gradient(135deg,var(--verde-suave),#EAF3EC);
  color:var(--verde);font-size:20px;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(46,70,54,.09)}
.bn-serv h3{font-size:20px;margin:0;padding:0;border:none}
.bn-serv h3::after{display:none}
.bn-serv ul{flex:1;padding:20px 24px 8px;margin:0}
.bn-serv li{display:flex;gap:11px;align-items:flex-start;font-size:16px;color:var(--gris);
  line-height:1.5;margin-bottom:13px;padding:0}
.bn-serv li::before{display:none}
.bn-check{flex-shrink:0;width:21px;height:21px;border-radius:50%;background:var(--verde-suave);
  color:var(--verde2);font-size:12px;font-weight:700;display:flex;align-items:center;
  justify-content:center;margin-top:2px;transition:background .25s ease, color .25s ease}
.bn-serv:hover .bn-check{background:var(--verde);color:#fff}
.bn-serv__pie{padding:16px 24px 20px;background:linear-gradient(180deg,#FBF9F4,#F6F2E9);
  border-top:1px solid rgba(46,70,54,.08);font-size:14.5px;color:var(--verde-claro);
  font-style:italic;line-height:1.45;margin-top:auto}

@media (max-width:980px){ .bn-servs{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){
  .bn-servs{grid-template-columns:1fr;gap:16px}
  .bn-serv__cab{padding:20px 20px 14px}
  .bn-serv ul{padding:17px 20px 6px}
  .bn-serv__pie{padding:14px 20px 17px}
}

/* ==========================================================================
   LOS SÍMBOLOS DE CADA BLOQUE SE ENCIENDEN
   Late cada uno con un desfasaje distinto: si parpadearan a la vez parecería
   una alarma. Así se lee como algo vivo, no como un aviso.
   ========================================================================== */
@keyframes bn-prende{
  0%, 100%{
    box-shadow:inset 0 0 0 1px rgba(46,70,54,.09), 0 0 0 0 rgba(107,143,118,.35);
    background:linear-gradient(135deg,var(--verde-suave),#EAF3EC);
    color:var(--verde);
  }
  50%{
    box-shadow:inset 0 0 0 1px rgba(46,70,54,.16),
               0 0 20px rgba(107,143,118,.55),
               0 0 0 9px rgba(107,143,118,0);
    background:linear-gradient(135deg,#CFE6D7,#E3F1E7);
    color:var(--verde2);
  }
}
.bn-serv__ic{animation:bn-prende 3.2s ease-in-out infinite}
.bn-servs .bn-serv:nth-child(1) .bn-serv__ic{animation-delay:0s}
.bn-servs .bn-serv:nth-child(2) .bn-serv__ic{animation-delay:.8s}
.bn-servs .bn-serv:nth-child(3) .bn-serv__ic{animation-delay:1.6s}
.bn-servs .bn-serv:nth-child(4) .bn-serv__ic{animation-delay:2.4s}
/* al pasar por la ficha, el símbolo se enciende del todo y se queda así */
.bn-serv:hover .bn-serv__ic{
  animation-play-state:paused;
  background:linear-gradient(135deg,var(--verde),var(--verde2));
  color:#fff;
  box-shadow:0 0 24px rgba(62,96,73,.5), inset 0 0 0 1px rgba(255,255,255,.18);
  transform:scale(1.06);
}
.bn-serv__ic{transition:transform .3s ease}
@media (prefers-reduced-motion:reduce){ .bn-serv__ic{animation:none} }

/* ==========================================================================
   NOSOTROS: fondo verde y dos columnas
   Antes era un bloque blanco con el texto ocupando media pantalla y la otra
   mitad vacía. Ahora el texto convive con la foto grande, y la tira de fotos
   cierra abajo a todo el ancho.
   ========================================================================== */
#nosotros{background:linear-gradient(190deg,#243A2B 0%,#2E4636 48%,#22351F 100%);color:#fff}
#nosotros::before{opacity:.3;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px)}
#nosotros .bn-tit{color:#fff}
#nosotros .bn-tit::after{background:linear-gradient(90deg,#D08A6B,rgba(208,138,107,.2))}
#nosotros .bn-kicker{color:#A9C9B4}
#nosotros .bn-kicker::after{background:linear-gradient(90deg,rgba(169,201,180,.7),transparent)}
#nosotros p{color:rgba(255,255,255,.78);font-size:18px;line-height:1.7}
.bn-nos{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.bn-nos__pie{margin-top:26px;padding-top:22px;font-size:16.5px !important;
  color:rgba(169,201,180,.9) !important;border-top:1px solid rgba(255,255,255,.16)}
.bn-nos__foto{width:100%;height:100%;min-height:430px;padding:0;border:none;cursor:pointer;
  position:relative;border-radius:var(--r);overflow:hidden;background:none;
  box-shadow:0 6px 16px rgba(0,0,0,.28), 0 26px 60px rgba(0,0,0,.36)}
.bn-nos__foto img{width:100%;height:100%;object-fit:cover;display:block}
/* un marco de luz que recorre el borde de la foto */
.bn-nos__foto::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:var(--r);border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 0 rgba(169,201,180,0);transition:box-shadow .4s ease}
.bn-nos__foto:hover::before{box-shadow:inset 0 0 26px rgba(169,201,180,.35)}
.bn-nos__foto:hover{box-shadow:0 8px 22px rgba(0,0,0,.34), 0 34px 78px rgba(0,0,0,.46)}
/* la tira de abajo, a todo el ancho */
#nosotros .bn-vida__chicas{grid-template-columns:repeat(4,1fr);margin-top:26px;gap:18px}
#nosotros .bn-vida__c{border-color:rgba(255,255,255,.16);
  box-shadow:0 4px 12px rgba(0,0,0,.24), 0 14px 34px rgba(0,0,0,.24)}
#nosotros .bn-vida__c img{height:170px}
#nosotros .bn-vida__c:hover{box-shadow:0 6px 18px rgba(0,0,0,.3), 0 20px 46px rgba(0,0,0,.36)}

@media (max-width:900px){
  .bn-nos{grid-template-columns:1fr;gap:32px}
  .bn-nos__foto{min-height:260px}
  #nosotros .bn-vida__chicas{grid-template-columns:repeat(2,1fr);gap:14px}
  #nosotros .bn-vida__c img{height:130px}
}

/* ==========================================================================
   EL AVISO ANTIFRAUDE, CON CONTORNO ROJO ENCENDIDO
   Es lo único de la página que tiene que leerse como una advertencia, así que
   acá el rojo está justificado: late despacio para que se note sin alarmar.
   ========================================================================== */
@keyframes bn-alerta{
  0%, 100%{
    border-color:rgba(214,74,52,.55);
    box-shadow:0 0 0 1px rgba(214,74,52,.22),
               0 0 16px rgba(214,74,52,.22),
               inset 0 0 20px rgba(214,74,52,.06);
  }
  50%{
    border-color:rgba(232,96,72,.95);
    box-shadow:0 0 0 1px rgba(232,96,72,.4),
               0 0 34px rgba(232,96,72,.5),
               0 0 0 8px rgba(232,96,72,0),
               inset 0 0 26px rgba(232,96,72,.12);
  }
}
.bn-aviso{
  border:1.5px solid rgba(214,74,52,.55);
  border-left-width:4px;
  border-radius:var(--r);
  background:rgba(214,74,52,.09);
  animation:bn-alerta 2.8s ease-in-out infinite;
}
.bn-aviso b{color:#FFD9D0;text-shadow:0 0 14px rgba(232,96,72,.5)}
.bn-aviso span{color:rgba(255,255,255,.86)}
.bn-aviso a{color:#FFD9D0 !important;text-decoration:underline;text-underline-offset:3px}
.bn-aviso a:hover{color:#fff !important}
.bn-aviso:hover{animation-play-state:paused;
  border-color:rgba(232,96,72,.95);
  box-shadow:0 0 0 1px rgba(232,96,72,.45), 0 0 40px rgba(232,96,72,.55),
             inset 0 0 30px rgba(232,96,72,.14)}
@media (prefers-reduced-motion:reduce){
  .bn-aviso{animation:none;border-color:rgba(232,96,72,.85);
    box-shadow:0 0 22px rgba(232,96,72,.32)}
}

/* ---- preguntas frecuentes en dos columnas ---- */
.bn-faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.bn-faq__lado{position:sticky;top:110px}
.bn-faq__lado .bn-sub{font-size:17.5px;margin-bottom:18px}
.bn-faq__ayuda{font-size:16px;color:var(--verde-claro);line-height:1.6;
  padding-top:18px;border-top:1px solid rgba(46,70,54,.14);margin-bottom:22px}
.bn-faq{margin-top:4px}
@media (max-width:900px){
  .bn-faq-grid{grid-template-columns:1fr;gap:30px}
  .bn-faq__lado{position:static}
  .bn-faq__lado .bn-btn{width:100%}
}

/* ==========================================================================
   PREGUNTAS FRECUENTES CON DISEÑO
   Cada ficha se enciende al abrirse: un filo verde a la izquierda, el fondo
   apenas teñido y el signo girando a una cruz. La columna de la izquierda
   lleva un número grande de fondo, que da profundidad sin cargar.
   ========================================================================== */
.bn-faq__lado{position:sticky;top:110px;padding-left:2px}
.bn-faq__lado::before{content:"?";position:absolute;left:-14px;top:-64px;z-index:0;
  font-family:var(--serif);font-size:200px;line-height:1;color:rgba(46,70,54,.045);
  pointer-events:none;user-select:none}
.bn-faq__lado > *{position:relative;z-index:1}

/* las fichas */
.bn-faq details{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff,#FCFAF6);
  border:1px solid rgba(46,70,54,.11);
  transition:box-shadow .3s ease, border-color .3s ease, transform .25s ease}
.bn-faq details::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--verde-claro),var(--tierra));
  transform:scaleY(0);transform-origin:top;transition:transform .4s ease}
.bn-faq details[open]::before, .bn-faq details:hover::before{transform:scaleY(1)}
.bn-faq details:hover{border-color:rgba(46,70,54,.22);transform:translateX(3px)}
.bn-faq details[open]{
  background:linear-gradient(180deg,#fff,#F7FAF7);
  border-color:rgba(107,143,118,.4);
  box-shadow:0 2px 6px rgba(34,38,31,.06), 0 14px 34px rgba(46,70,54,.11),
             inset 0 0 30px rgba(107,143,118,.05);
}
/* el signo, dentro de un círculo que se enciende */
.bn-faq summary::after{
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--verde-suave);font-size:20px;
  transition:transform .35s ease, background .3s ease, color .3s ease, box-shadow .3s ease}
.bn-faq details[open] summary::after{
  background:var(--verde);color:#fff;
  box-shadow:0 0 18px rgba(62,96,73,.4)}
.bn-faq summary:hover::after{background:#CFE6D7}
.bn-faq summary{transition:color .25s ease}
.bn-faq details[open] summary{color:var(--verde2)}
/* la respuesta entra desplegándose */
@keyframes bn-abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.bn-faq details[open] .bn-faq__r{animation:bn-abre .35s ease}
.bn-faq__r{border-top-color:rgba(107,143,118,.28)}

/* el botón de consulta, con el mismo latido que los otros de WhatsApp */
.bn-faq__lado .bn-btn--wa{width:100%}

@media (max-width:900px){
  .bn-faq__lado::before{font-size:150px;top:-46px;left:-8px}
}

/* ==========================================================================
   CONTACTO SOBRE VERDE
   Es el cierre de la página: el fondo profundo hace que el formulario blanco
   y el mapa floten, y que el bloque se lea como un destino, no como un pie.
   ========================================================================== */
#contacto{background:linear-gradient(200deg,#2E4636 0%,#22351F 55%,#243A2B 100%);color:#fff}
#contacto::before{opacity:.3;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px)}
#contacto .bn-tit{color:#fff}
#contacto .bn-tit::after{background:linear-gradient(90deg,#D08A6B,rgba(208,138,107,.2))}
#contacto .bn-kicker{color:#A9C9B4}
#contacto .bn-kicker::after{background:linear-gradient(90deg,rgba(169,201,180,.7),transparent)}
#contacto .bn-sub{color:rgba(255,255,255,.76)}

/* las vías de contacto, legibles sobre el verde */
#contacto .bn-vias b{color:#A9C9B4}
#contacto .bn-vias a, #contacto .bn-vias span{color:#fff}
#contacto .bn-vias a:hover{color:#E4C9A8}
#contacto .bn-vias li{background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);transition:background .25s, border-color .25s}
#contacto .bn-vias li:hover{background:rgba(255,255,255,.09);
  border-color:rgba(169,201,180,.4);box-shadow:0 6px 20px rgba(0,0,0,.22)}
#contacto .bn-vias .ic{background:linear-gradient(135deg,rgba(169,201,180,.22),rgba(169,201,180,.1));
  color:#A9C9B4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
#contacto .bn-vias li span[style]{color:rgba(255,255,255,.62) !important}

/* el formulario flota sobre el fondo */
#contacto .bn-form{box-shadow:0 8px 22px rgba(0,0,0,.26), 0 30px 70px rgba(0,0,0,.34);
  border-color:rgba(255,255,255,.16)}
#contacto .bn-mapa{border-color:rgba(255,255,255,.16);
  box-shadow:0 8px 22px rgba(0,0,0,.26), 0 30px 70px rgba(0,0,0,.3)}