/* ============================================================================
   Simonetti Negocios Rurales y Urbanos — simonettiruralyurbano.com.ar
   Hoja de estilos única. Mobile first.
   Paleta: verde institucional (tomado del logo) + tonos tierra + gris urbano.
   Diseño: esquinas con redondeo mínimo (1 px) en tarjetas y botones, por pedido del cliente.
   ========================================================================== */

/* ------------------------------------------------------------- variables --*/
:root{
  /* marca */
  --verde:            #126312;
  --verde-oscuro:     #0b4509;
  --verde-noche:      #072f06;
  --verde-claro:      #2f8f3a;
  --verde-suave:      #eef5ec;
  --verde-borde:      #d5e5d2;

  /* rural */
  --tierra:           #b07d4b;
  --tierra-oscura:    #6f4f2d;

  /* urbano */
  --grafito:          #2b3238;
  --grafito-claro:    #4a555d;
  --gris:             #6b7480;
  --gris-medio:       #d8dde0;
  --gris-claro:       #f2f5f4;
  --blanco:           #ffffff;

  /* acento */
  --dorado:           #c9a227;

  /* etiqueta de la operación ALQUILER: fondo naranja con texto blanco (pedido del cliente) */
  --alquiler:         #ff6600;

  /* whatsapp: fondo verde con texto blanco en todos los botones de WhatsApp */
  --wa-verde:         #0c8642;
  --wa-verde-oscuro:  #096e34;

  /* texto */
  --negro:            #000000;

  /* tipografía */
  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;

  /* medidas */
  --ancho: 1200px;
  --radio:            1px;
  --radio-chico:      1px;
  --sombra-1: 0 2px 6px rgba(20, 30, 25, .06), 0 10px 24px rgba(20, 30, 25, .06);
  --sombra-2: 0 8px 18px rgba(20, 30, 25, .10), 0 24px 48px rgba(20, 30, 25, .10);
  --transicion: .28s cubic-bezier(.2, .7, .3, 1);
  --alto-cabecera: 72px;
}

/* ---------------------------------------------------------------- reset ---*/
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.65;
  color: var(--grafito);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
img,svg{ max-width: 100%; display: block; }
a{ color: var(--negro); text-decoration: none; }
a:hover{ color: var(--negro); }
/* Enlaces dentro de textos: subrayados, para que se distingan ahora que son negros */
.prosa a, .aviso a, .info-contacto a, .check-legal a, .filtros__resultado a, .pie__legal a{ text-decoration: underline; text-underline-offset: 3px; }
h1,h2,h3,h4{ line-height: 1.2; color: var(--negro); margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1{ font-size: clamp(2rem, 6vw, 3.4rem); }
h2{ font-size: clamp(1.5rem, 4vw, 2.2rem); }
h3{ font-size: clamp(1.1rem, 2.6vw, 1.35rem); }
p{ margin: 0 0 1em; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; cursor: pointer; }
:focus-visible{ outline: 3px solid var(--dorado); outline-offset: 3px; border-radius: 1px; }

.contenedor{ width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.salto-contenido{
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--verde); color: #fff; padding: 12px 18px; border-radius: 1px;
}
.salto-contenido:focus{ left: 0; }

.ico{ width: 22px; height: 22px; flex: none; }
.ico--chico{ width: 16px; height: 16px; }

/* --------------------------------------------------------------- botones --*/
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 1px; border: 2px solid transparent;
  font-weight: 600; font-size: .98rem; text-align: center; cursor: pointer;
  transition: transform var(--transicion), background var(--transicion), color var(--transicion), box-shadow var(--transicion);
}
.btn:hover{ transform: translateY(-2px); }
.btn--chico{ padding: 10px 16px; font-size: .9rem; }
.btn--primario{ background: var(--verde); color: #fff; box-shadow: var(--sombra-1); }
.btn--primario:hover{ background: var(--verde-oscuro); color: #fff; }
.btn--secundario{ background: #fff; color: var(--negro); border-color: var(--verde); }
.btn--secundario:hover{ background: var(--verde-suave); color: var(--negro); }
.btn--wa{ background: var(--wa-verde); color: #fff; font-weight: 700; }
.btn--wa:hover{ background: var(--wa-verde-oscuro); color: #fff; }
.btn--claro{ background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(4px); }
.btn--claro:hover{ background: #fff; color: var(--negro); }
.btn--fantasma{ background: transparent; color: #fff; border-color: currentColor; }

/* -------------------------------------------------------------- cabecera --*/
.cabecera{
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  /* Fondo blanco sólido, sin transparencia (pedido del cliente) */
  background: #ffffff;
  border-bottom: 1px solid var(--verde-borde);
  transition: box-shadow var(--transicion);
}
.cabecera--scroll{ box-shadow: var(--sombra-1); }
.cabecera__interior{
  max-width: var(--ancho); margin: 0 auto; padding: 8px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--alto-cabecera);
}
.logo{ display: flex; align-items: center; gap: 12px; }
.logo img{ height: 48px; width: auto; }
/* Por si más adelante se agrega el nombre en texto junto al logo */
.logo__texto{ display: none; flex-direction: column; line-height: 1.05; color: var(--negro); }
.logo__texto strong{ font-size: 1.15rem; letter-spacing: .12em; }
.logo__texto small{ font-size: .72rem; color: var(--gris); letter-spacing: .02em; }

.cabecera__acciones{ display: flex; align-items: center; gap: 10px; }

/* menú hamburguesa: tres rayitas, se convierten en cruz al abrir */
.hamburguesa{
  width: 52px; height: 52px; border-radius: 1px; border: 1px solid var(--verde-borde);
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(18, 99, 18, .08);
  transition: background var(--transicion), transform var(--transicion);
}
.hamburguesa:hover{ background: var(--verde-suave); }
.hamburguesa__lineas{ display: grid; gap: 5px; width: 24px; }
.hamburguesa__lineas i{ display: block; height: 2.5px; border-radius: 1px; background: var(--verde); transition: transform var(--transicion), opacity var(--transicion); }
body.menu-abierto .hamburguesa__lineas i:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
body.menu-abierto .hamburguesa__lineas i:nth-child(2){ opacity: 0; }
body.menu-abierto .hamburguesa__lineas i:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/* ----------------------------------------------------------- menú lateral -*/
.velo{
  position: fixed; inset: 0; z-index: 95;
  background: rgba(7, 30, 12, .45); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--transicion);
}
.velo--visible{ opacity: 1; }

.menu-lateral{
  position: fixed; top: 0; right: 0; z-index: 100;
  height: 100dvh; width: min(420px, 90vw);
  background: linear-gradient(170deg, var(--verde-oscuro) 0%, var(--verde) 55%, #1a5c1a 100%);
  color: #eaf3e8; padding: 18px 22px 28px;
  transform: translateX(102%); transition: transform .34s cubic-bezier(.3,.8,.3,1), visibility .34s;
  visibility: hidden;              /* así los enlaces no son alcanzables con Tab cuando está cerrado */
  overflow-y: auto; display: flex; flex-direction: column; gap: 20px;
  box-shadow: -20px 0 50px rgba(0,0,0,.25);
}
.menu-lateral--abierto{ transform: translateX(0); visibility: visible; }
.menu-lateral__cabecera{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* El logo del panel es la versión blanca (fondo transparente): no lleva la placa blanca
   que sí necesitaba el verde, y va un poco más alto para compensar el padding que se fue. */
.menu-lateral__logo{ height: 46px; width: auto; }
.menu-lateral__cerrar{
  width: 46px; height: 46px; border-radius: 1px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center;
}
.menu-lateral__cerrar:hover{ background: rgba(255,255,255,.22); }

.menu-lateral__lista{ display: grid; gap: 4px; }
.menu-lateral__lista a{
  display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 1px;
  color: #f2f8f0; font-size: 1.08rem; font-weight: 600;
  transition: background var(--transicion), transform var(--transicion);
}
.menu-lateral__lista a:hover{ background: rgba(255,255,255,.14); transform: translateX(4px); color: #fff; }
.menu-lateral__lista a[aria-current="page"]{ background: rgba(255,255,255,.2); }
.menu-lateral__wa{ background: var(--wa-verde); color: #fff !important; margin-top: 6px; }
.menu-lateral__wa:hover{ background: var(--wa-verde-oscuro) !important; color: #fff !important; }

.menu-lateral__tipos{ border-top: 1px solid rgba(255,255,255,.22); padding-top: 16px; }
.menu-lateral__rotulo{ font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: #bfdcb9; margin: 0 0 8px; }
.chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip{
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 1px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  color: #f2f8f0; font-size: .88rem; font-weight: 600;
}
.chip:hover{ background: #fff; color: var(--negro); }

.menu-lateral__contacto{ margin-top: auto; display: grid; gap: 8px; font-size: .92rem; color: #dbead8; }
.menu-lateral__contacto a, .menu-lateral__contacto p{ display: flex; align-items: center; gap: 10px; color: #eaf3e8; margin: 0; }
.menu-lateral__contacto a:hover{ color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------------ hero --*/
.hero{
  position: relative; isolation: isolate;
  min-height: 92svh; display: flex; align-items: flex-end;
  padding: calc(var(--alto-cabecera) + 40px) 0 44px;
  background: var(--verde-noche);   /* la fotografía va en ::before, así se puede animar */
  color: #fff; overflow: hidden;
}
/* Banner principal: carrusel de fotos reales de banco de imágenes (campo y ruta de la
   pampa bonaerense). Lista de fotos y orden: $HERO_FOTOS en includes/config.php.
   Las fotos salen de las alternativas listas en assets/img/hero/alternativa-*.jpg
   El efecto «respira» va en .hero__fotos (el conjunto), así el cambio de foto no corta
   el zoom: la capa entera se agranda y se achica y adentro se hace el cruce. */
.hero::before{
  content: ""; position: absolute; inset: 0; z-index: -3;
  background: url("../img/hero/hero-campo.jpg") center center / cover no-repeat;
  transform-origin: center center;
}
.hero__fotos{
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
  transform-origin: center center;
  /* Efecto «respira»: zoom out y zoom in continuo, ida y vuelta.
     9 segundos por tramo (18 segundos el ciclo completo) y 18 % de recorrido, con
     ease-in-out para que frene suave en los dos extremos y no se note el rebote.
     El mismo 9 s es cada cuánto cambia la foto (ver app.js), así el cruce cae
     justo en los extremos del zoom y se nota menos. */
  animation: heroZoomOut 9s ease-in-out infinite alternate;
  will-change: transform;
}
.hero__foto{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity 1.1s ease;
}
.hero__foto--activa{ opacity: 1; }
@keyframes heroZoomOut{
  from{ transform: scale(1.18); }
  to{ transform: scale(1); }
}
.hero::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,47,6,.42) 0%, rgba(7,47,6,.28) 45%, rgba(7,47,6,.84) 100%);
}
/* En pantallas chicas se sirve una versión más liviana de la misma foto */
@media (max-width: 700px){
  .hero::before{ background-image: url("../img/hero/hero-campo-960.jpg"); }
}
.hero__interior{ max-width: var(--ancho); margin: 0 auto; padding: 0 20px; width: 100%; }
.hero__etiqueta{
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 1px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4);
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px;
}
.hero h1{ color: #fff; max-width: 18ch; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.hero__bajada{ font-size: clamp(1rem, 2.4vw, 1.2rem); max-width: 60ch; color: #e9f2e6; }
.hero__acciones{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero__datos{ display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; font-size: .92rem; color: #d9e8d5; }
.hero__datos span{ display: inline-flex; align-items: center; gap: 8px; }

/* ------------------------------------------------- secciones y títulos ---*/
.seccion{ padding: 56px 0; }
.seccion--gris{ background: var(--gris-claro); }
.seccion--verde{ background: var(--verde-suave); }
.seccion__cabecera{ max-width: 62ch; margin-bottom: 30px; }
.seccion__cabecera--centrada{ margin-inline: auto; text-align: center; }
.seccion__rotulo{
  font-size: .76rem; text-transform: uppercase; letter-spacing: .16em; color: var(--tierra-oscura);
  font-weight: 700; margin-bottom: 8px;
}
.seccion__cabecera p{ color: var(--gris); font-size: 1.02rem; }
.seccion__pie{ margin-top: 30px; display: flex; justify-content: center; }

/* ---------------------------------------------------- dos tarjetas grandes */
.clasificador{ display: grid; gap: 20px; }
.puerta{
  position: relative; display: block; border: 0; padding: 0; text-align: left;
  border-radius: 1px; overflow: hidden; color: #fff; background: var(--grafito);
  box-shadow: var(--sombra-1); cursor: pointer; width: 100%;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.puerta:hover, .puerta:focus-visible{ transform: translateY(-4px); box-shadow: var(--sombra-2); }
/* La tarjeta lleva tres niveles de texto (título, tipos y descripción), así que la foto
   necesita más alto para que el párrafo entre sin apretar. Ver ajuste 18 en LEEME.md. */
.puerta img{ width: 100%; height: 340px; object-fit: cover; transition: transform .8s ease; }
.puerta:hover img{ transform: scale(1.05); }
/* Velo más parejo: el texto va centrado, así que la zona media también necesita contraste */
.puerta__velo{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,47,6,.62) 0%, rgba(7,47,6,.55) 50%, rgba(7,47,6,.74) 100%);
}
/* Texto de la tarjeta centrado, vertical y horizontalmente (así queda mejor a ojo del
   cliente: el 18/10 se probó alinearlo arriba y se volvió atrás). */
.puerta__texto{
  position: absolute; inset: 0; padding: 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.puerta__titulo{ display: block; color: #fff; font-size: clamp(1.4rem, 3.4vw, 1.9rem); font-weight: 700; line-height: 1.2; margin-bottom: 8px; letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
/* Los tipos, entre el título y el párrafo: chico y en mayúsculas, como una etiqueta */
.puerta__tipos{
  display: block; color: #d3e7ce; font-size: .74rem; font-weight: 700; line-height: 1.5;
  letter-spacing: .12em; text-transform: uppercase; max-width: 42ch; margin: 0 auto 12px;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.puerta__desc{ display: block; color: #e4f1e1; font-size: .92rem; line-height: 1.55; max-width: 50ch; margin: 0 auto; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.puerta__flecha{
  position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 1px;
  background: rgba(255,255,255,.9); color: var(--verde); display: grid; place-items: center;
  transition: transform var(--transicion), background var(--transicion);
}
.puerta:hover .puerta__flecha{ transform: translateX(3px); background: #fff; }
.puerta[aria-expanded="true"]{ outline: 3px solid var(--dorado); outline-offset: 3px; }
.puerta[aria-expanded="true"] .puerta__flecha{ transform: rotate(90deg); }

/* panel de tipos de negocio (se despliega al tocar cada tarjeta grande) */
.panel-tipos{ margin-top: 22px; }
.panel-tipos[hidden]{ display: none; }
.panel-tipos__caja{
  background: #fff; border: 1px solid var(--verde-borde); border-radius: 1px;
  padding: 22px; box-shadow: var(--sombra-1); animation: aparece .35s ease both;
}
@keyframes aparece{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }
.panel-tipos__caja h3{ display: flex; align-items: center; gap: 10px; }
.panel-tipos__caja > p{ color: var(--gris); }

.tipos{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tipo{
  display: flex; flex-direction: column; gap: 10px; padding: 0; overflow: hidden;
  border: 1px solid var(--gris-medio); border-radius: 1px; background: #fff;
  color: var(--grafito); transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tipo:hover{ transform: translateY(-3px); box-shadow: var(--sombra-1); border-color: var(--verde-borde); color: var(--grafito); }
.tipo img{ height: 130px; width: 100%; object-fit: cover; }
.tipo__cuerpo{ padding: 0 16px 18px; }
.tipo__titulo{ display: flex; align-items: center; gap: 8px; color: var(--negro); font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; }
.tipo__desc{ display: block; font-size: .88rem; color: var(--gris); margin: 0 0 10px; }
.tipo__cuenta{ display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tierra-oscura); font-weight: 700; }
.tipo__link{ display: inline-flex; align-items: center; gap: 8px; color: var(--negro); font-weight: 600; margin-top: 8px; }

/* --------------------------------------------------------------- fichas ---*/
.grilla-fichas{ display: grid; gap: 22px; grid-template-columns: 1fr; }
.ficha{
  background: #fff; border: 1px solid var(--gris-medio); border-radius: 1px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.ficha:hover{ transform: translateY(-4px); box-shadow: var(--sombra-2); border-color: var(--verde-borde); }
.ficha__media{ position: relative; display: block; background: var(--gris-claro); }
.ficha__media img{ width: 100%; height: 220px; object-fit: cover; }

/* --- Galería dentro de la tarjeta (ajuste 16): pasar las fotos sin entrar al detalle --- */
.ficha__galeria{ position: relative; }
/* Sólo se ve la foto activa: así no hay saltos de alto entre fotos de distinto tamaño */
.ficha__foto{ display: none; }
.ficha__foto--activa{ display: block; }
.ficha__flecha{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 1px; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--verde); display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.22); opacity: .82;
  transition: opacity var(--transicion), background var(--transicion);
}
.ficha__galeria:hover .ficha__flecha, .ficha__flecha:focus-visible{ opacity: 1; background: #fff; }
.ficha__flecha--ant{ left: 10px; }
.ficha__flecha--sig{ right: 10px; }
.ficha__puntos{ position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; display: flex; gap: 5px; justify-content: center; }
.ficha__puntos span{ width: 8px; height: 8px; border-radius: 1px; cursor: pointer; background: rgba(255,255,255,.6); box-shadow: 0 1px 4px rgba(0,0,0,.4); transition: background var(--transicion); }
.ficha__puntos span.activo{ background: #fff; }
.etiqueta{
  position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: 1px;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  background: #fff; color: var(--grafito); box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.etiqueta--venta{ background: var(--verde); color: #fff; }
/* ALQUILER: naranja del cliente, con un halo del mismo color para que despierte más */
.etiqueta--alquiler{ background: var(--alquiler); color: #fff; text-shadow: 0 1px 2px rgba(120,45,0,.35); box-shadow: 0 3px 12px rgba(255,102,0,.55), 0 2px 8px rgba(0,0,0,.16); }
/* Tipo de propiedad (arriba a la derecha): gris #333333 con texto blanco (pedido del cliente) */
.etiqueta--tipo{ left: auto; right: 12px; background: #333333; color: #fff; }
.etiqueta--destacada{ top: auto; bottom: 12px; left: 12px; background: #fff; color: var(--tierra-oscura); }
.ficha__cuerpo{ padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.ficha__codigo{ font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin: 0 0 4px; }
.ficha__titulo{ margin: 0 0 6px; font-size: 1.12rem; }
.ficha__titulo a{ color: var(--negro); }
.ficha__titulo a:hover{ color: var(--negro); text-decoration: underline; }
.ficha__lugar{ display: flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--gris); margin: 0 0 12px; }
.ficha__datos{ display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; font-size: .85rem; color: var(--grafito-claro); }
.ficha__datos li{ display: inline-flex; align-items: center; gap: 6px; }
.ficha__precio{ font-size: 1.2rem; font-weight: 700; color: var(--negro); margin: auto 0 14px; }
.ficha__botones{ display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------- por qué elegirnos */
.motivos{ display: grid; gap: 18px; grid-template-columns: 1fr; }
.motivo{
  background: #fff; border: 1px solid var(--gris-medio); border-radius: 1px;
  padding: 24px; box-shadow: var(--sombra-1);
}
.motivo__icono{
  width: 52px; height: 52px; border-radius: 1px; display: grid; place-items: center;
  background: var(--verde-suave); color: var(--verde); margin-bottom: 14px;
}
.motivo h3{ font-size: 1.1rem; margin-bottom: 6px; }
.motivo p{ margin: 0; color: var(--gris); font-size: .94rem; }

/* -------------------------------------------------------------- banda CTA */
.banda{
  background: linear-gradient(135deg, var(--verde-oscuro), var(--verde) 60%, #1f7a24);
  color: #fff; border-radius: 1px; padding: 34px 26px; text-align: center;
  box-shadow: var(--sombra-2);
}
.banda h2{ color: #fff; }
.banda p{ color: #dcecd9; max-width: 62ch; margin-inline: auto; }
.banda__acciones{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }

/* ------------------------------------------------------- encabezado páginas */
.portada{
  position: relative; isolation: isolate; color: #fff;
  padding: calc(var(--alto-cabecera) + 46px) 0 40px;
  background: var(--verde-oscuro) url("../img/tipo-campo.svg") center/cover no-repeat;
}
.portada::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,47,6,.72), rgba(7,47,6,.6)); }
.portada h1{ color: #fff; font-size: clamp(1.8rem, 5vw, 2.8rem); }
.portada p{ color: #e2efe0; max-width: 70ch; margin-bottom: 0; }
.migas{ font-size: .84rem; color: #cfe3cb; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.migas a{ color: #eaf3e8; text-decoration: underline; }
.migas span[aria-hidden]{ opacity: .6; }

/* ------------------------------------------------------------- filtros ---*/
.filtros{
  background: #fff; border: 1px solid var(--gris-medio); border-radius: 1px;
  padding: 18px; box-shadow: var(--sombra-1); margin: 26px 0 30px;
}
.filtros__grilla{ display: grid; gap: 14px; grid-template-columns: 1fr; }
.campo{ display: flex; flex-direction: column; gap: 6px; }
.campo label{ font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }
.campo select, .campo input, .campo textarea{
  padding: 12px 14px; border: 1px solid var(--gris-medio); border-radius: 1px;
  font: inherit; color: var(--grafito); background: #fff; width: 100%;
}
.campo select:focus, .campo input:focus, .campo textarea:focus{ border-color: var(--verde); outline: none; box-shadow: 0 0 0 3px rgba(18,99,18,.14); }
.filtros__acciones{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.filtros__resultado{ font-size: .9rem; color: var(--gris); margin: 0; }
.resultado-barra{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.resultado-barra h2{ margin: 0; font-size: 1.25rem; }
.aviso-vacio{ background: var(--verde-suave); border: 1px dashed var(--verde-borde); border-radius: 1px; padding: 30px; text-align: center; }

/* -------------------------------------------------------------- paginación */
.paginacion{ display: flex; justify-content: center; gap: 8px; margin-top: 34px; flex-wrap: wrap; }
.paginacion a, .paginacion span{
  min-width: 44px; padding: 10px 14px; border-radius: 1px; border: 1px solid var(--gris-medio);
  background: #fff; text-align: center; font-weight: 600; color: var(--grafito);
}
.paginacion a:hover{ border-color: var(--verde); color: var(--negro); }
.paginacion .actual{ background: var(--verde); border-color: var(--verde); color: #fff; }

/* ---------------------------------------------------------- detalle ficha */
.detalle{ padding: 30px 0 60px; display: grid; gap: 30px; grid-template-columns: 1fr; }
.galeria{ display: grid; gap: 12px; }
.galeria__principal{ border-radius: 1px; overflow: hidden; border: 1px solid var(--gris-medio); }
.galeria__principal img{ width: 100%; height: clamp(240px, 46vw, 460px); object-fit: cover; }
.galeria__minis{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.galeria__minis button{ padding: 0; border: 2px solid transparent; border-radius: 1px; overflow: hidden; background: none; }
.galeria__minis button[aria-current="true"]{ border-color: var(--verde); }
.galeria__minis img{ height: 92px; width: 100%; object-fit: cover; }

.panel{ background: #fff; border: 1px solid var(--gris-medio); border-radius: 1px; padding: 22px; box-shadow: var(--sombra-1); }
.panel + .panel{ margin-top: 20px; }
.datos-grilla{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.dato{ background: var(--gris-claro); border-radius: 1px; padding: 14px; }
.dato strong{ display: block; font-size: 1.05rem; color: var(--negro); }
.dato span{ font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }
.lista-check{ display: grid; gap: 10px; }
.lista-check li{ display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; }
.lista-check .ico{ color: var(--verde); margin-top: 3px; }
.precio-grande{ font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; color: var(--negro); margin: 0; }
.mapa{ border-radius: 1px; overflow: hidden; border: 1px solid var(--gris-medio); }
.mapa iframe{ width: 100%; height: 320px; border: 0; display: block; }
.lateral-sticky{ align-self: start; }

/* ------------------------------------------------------------- contacto --*/
.dos-columnas{ display: grid; gap: 30px; grid-template-columns: 1fr; }
.formulario{ display: grid; gap: 16px; }
.formulario__fila{ display: grid; gap: 16px; grid-template-columns: 1fr; }
.formulario .btn{ justify-self: start; }
.aviso{ border-radius: 1px; padding: 14px 18px; font-size: .94rem; }
.aviso--ok{ background: var(--verde-suave); border: 1px solid var(--verde-borde); color: var(--negro); }
.aviso--error{ background: #fdf1ef; border: 1px solid #eec9c2; color: #8a2d1c; }
.check-legal{ display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--gris); }
.honeypot{ position: absolute; left: -9999px; opacity: 0; height: 0; }

.info-contacto{ display: grid; gap: 14px; }
.info-contacto li{ display: flex; gap: 12px; align-items: flex-start; }
.info-contacto .ico{ color: var(--verde); margin-top: 3px; }
.info-contacto strong{ display: block; color: var(--grafito); }
.info-contacto a{ color: var(--negro); }

/* texto largo (legales, nosotros) */
.prosa{ max-width: 78ch; }
.prosa h2{ margin-top: 1.6em; }
.prosa h3{ margin-top: 1.3em; }
.prosa ul{ list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }
.prosa li{ margin-bottom: .4em; }

/* ---------------------------------------------------------------- pie ----*/
.pie{ background: var(--grafito); color: #cfd6d9; margin-top: 40px; padding: 46px 0 22px; }
.pie__grilla{ display: grid; gap: 30px; grid-template-columns: 1fr; }
/* El logo del pie es la version blanca (fondo transparente), asi que no lleva la placa
   blanca que si necesitaba el verde. Un poco mas de alto para compensar el padding que se fue. */
.pie img{ height: 56px; width: auto; }
.pie__bajada{ font-size: .92rem; margin: 14px 0 8px; max-width: 40ch; }
.pie__dominio{ color: var(--verde-claro); font-weight: 600; }
.pie h2{ color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 12px; }
.pie h2 + ul{ margin-bottom: 18px; }
.pie a{ color: #d7dee1; }
.pie a:hover{ color: #fff; text-decoration: underline; }
.pie__col li{ margin-bottom: 8px; font-size: .93rem; }
.pie__contacto li{ display: flex; gap: 8px; align-items: flex-start; }
/* Redes sociales: se cargan desde el panel (Datos del negocio). Si están vacías,
   el bloque entero no se imprime. */
.pie__redes li{ display: flex; align-items: center; }
.pie__redes a{ display: inline-flex; align-items: center; gap: 8px; }
.pie__legal{
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 34px; padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: .84rem;
}
.pie__enlaces{ display: flex; gap: 10px; margin: 0; }

/* En celular y tablet (mientras el pie está en una sola columna) todo el contenido
   de .pie__grilla va centrado. Desde 900 px, que es cuando pasa a 4 columnas,
   vuelve a alinearse a la izquierda. */
@media (max-width: 899px){
  .pie__grilla{ text-align: center; }
  .pie__marca img{ margin-inline: auto; }
  .pie__bajada{ margin-inline: auto; }
  .pie__contacto li{ justify-content: center; align-items: center; text-align: center; }
  .pie__contacto .ico{ margin-top: 0; }
  .pie__redes li{ justify-content: center; }
}

/* --------------------------------------------------- whatsapp flotante ---*/
.wa-flotante{
  position: fixed; right: 16px; bottom: 16px; z-index: 80;
  width: 58px; height: 58px; border-radius: 1px; display: grid; place-items: center;
  background: var(--wa-verde); color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.24);
  transition: transform var(--transicion);
}
.wa-flotante:hover{ transform: scale(1.08); background: var(--wa-verde-oscuro); color: #fff; }
.wa-flotante .ico{ width: 30px; height: 30px; }

/* --------------------------------------------------------- animaciones ---*/
[data-revelar]{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--retraso, 0ms), transform .6s ease var(--retraso, 0ms); }
[data-revelar].visible{ opacity: 1; transform: none; }

/* En pantallas chicas la tarjeta es angosta y el texto ocupa más líneas: le damos más alto
   para que el párrafo no se corte contra el borde. */
@media (max-width: 640px){
  .puerta img{ height: 400px; }
  .puerta__texto{ padding: 24px 20px; }
  .puerta__desc{ font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-revelar]{ opacity: 1; transform: none; }
  /* Con movimiento reducido, el banner queda quieto y en su tamaño justo
     (el cambio de foto lo sigue haciendo app.js, pero como un cruce suave) */
  .hero__fotos{ animation: none; transform: none; }
}

/* ------------------------------------------------------------ >= 640px ---*/
@media (min-width: 640px){
  :root{ --alto-cabecera: 78px; }
  .logo img{ height: 58px; }
  .filtros__grilla{ grid-template-columns: repeat(2, 1fr); }
  .formulario__fila{ grid-template-columns: 1fr 1fr; }
  .motivos{ grid-template-columns: repeat(2, 1fr); }
  .grilla-fichas{ grid-template-columns: repeat(2, 1fr); }
  .seccion{ padding: 70px 0; }
  .banda{ padding: 46px 40px; }
}

/* ------------------------------------------------------------ >= 900px ---*/
@media (min-width: 900px){
  .clasificador{ grid-template-columns: 1fr 1fr; }
  .puerta img{ height: 340px; }
  .filtros__grilla{ grid-template-columns: repeat(4, 1fr); }
  .dos-columnas{ grid-template-columns: 1.15fr .85fr; }
  .detalle{ grid-template-columns: 1.5fr 1fr; }
  .pie__grilla{ grid-template-columns: 1.3fr 1fr 1fr 1.2fr; }
  .motivos{ grid-template-columns: repeat(4, 1fr); }
}

/* ----------------------------------------------------------- >= 1100px ---*/
@media (min-width: 1100px){
  .grilla-fichas{ grid-template-columns: repeat(3, 1fr); }
  .seccion{ padding: 84px 0; }
  .hero{ min-height: 88svh; }
}

.solo-escritorio{ display: none; }
@media (min-width: 900px){ .solo-escritorio{ display: inline-flex; } }