/* ===== HERO ===== */
/* fondo global blanco */
html, body { background:#fff; overflow-x:hidden; }
main, .site-content, .page, .container-page { background:#fff; }

.hero { position: relative; width: 100%; }

/* Contenedor visual del hero */
.hero .hero-media{
  position: relative;
  width: 100%;
  background: #fff;               /* blanco detrás de la imagen */
  border-radius: 10px;
  overflow: hidden;                /* clipa imagen/overlay → sin scroll interno */
}

/* Imagen llena todo (sin franjas) */
.hero .hero-media > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;             /* (nota) cover elimina franjas; aquí usamos contain */
  object-position: center top;     /* muestra más “piso” */
}

/* Overlay con radios y clip correcto */
.hero .hero-overlay{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.28);
  border-radius: inherit;
  pointer-events: none;
}

.hero .hero-content{
  position: absolute; inset: 0;
  display: flex;
  align-items: flex-end;           /* pegado abajo */
  justify-content: center;
  padding: 16px 16px 22px;
}

.hero .container{
  max-width: 1200px; width: 100%;
  margin: 0 auto; padding: 0 16px;
}

.hero h1{
  color: var(--color-on-primary, #fff);
  text-wrap: balance;
  margin: 0 0 6px;
}
.hero p.muted{
  color: rgba(255,255,255,.88);
  max-width: 60ch;
  margin: 0 0 16px;
}
.hero .hero-actions{
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px;
}

/* ===== Servicios (glass cards) ===== */
.services{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 auto 18px;           /* centrado */
  max-width: 980px;              /* límite visual agradable */
}

.service{
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.50);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}
.service h3{ color: #0D1B2A; font-size: 16px; margin: 0 0 6px; }
.service p { color: rgba(0,0,0,.85); line-height: 1.35; margin: 0; }

/* ===== Buscador ===== */
.searchbar{
  display: flex;                 /* antes: inline-flex */
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  padding: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 0;           /* centra horizontalmente */
}
.searchbar > *{ flex: 0 0 auto; } /* evita estiramientos */
.searchbar select{
  height: 44px; border-radius: 12px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff; padding: 0 12px;
  font-weight: 600;
}
.searchbar button.btn{
  height: 44px; border-radius: 12px; padding: 0 16px;
}

/* Accesibilidad (labels ocultos) */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Material Icons helper */
.mi{ font-family: "Material Icons"; font-style: normal; font-weight: normal; line-height: 1; }
.mi::before{ content: attr(data-icon); }

/* ===== Responsivo ===== */
@media (max-width: 1024px){
  .services{ grid-template-columns: 1fr 1fr; }
}

/* ===== Vista móvil: imagen arriba; TODO el contenido fuera de la imagen ===== */
@media (max-width: 720px){
  :root{ --hero-h: clamp(300px, 46svh, 420px); }

  .hero{ padding: 0 0 16px; }
  .hero .container{ padding: 0 12px; }

  /* La caja del hero ya no recorta; la imagen mantiene su radio */
  .hero .hero-media{
    background: transparent;
    overflow: visible;
    border-radius: 0;
  }
  .hero .hero-media > img{
    width: 100%;
    height: auto;
    object-fit: cover;            /* se ve mejor a pantalla completa */
    object-position: center;      /* centrada */
    border-radius: 10px;          /* esquinas suaves para la foto */
  }
  .hero .hero-overlay{ display: none; }  /* más vista a la imagen */

  /* El contenido fluye DEBAJO de la imagen */
  .hero .hero-content{
    position: static;             /* antes: absolute */
    inset: auto;
    display: block;
    padding: 14px 12px 0;
  }

  /* Buscador full width y separado de la imagen */
  .searchbar{
    display: flex;
    width: 100%;
    max-width: 720px;
    margin: 14px auto 6px;        /* separación clara bajo la foto */
    justify-content: center;
    flex-wrap: wrap;
  }
  .searchbar select{
    flex: 1 1 32%;
    min-width: 120px;
  }
  .searchbar .btn{
    flex: 1 1 100%;
    width: 100%;
    margin-top: 6px;
  }

  /* Servicios debajo del buscador, con texto visible */
  .services{
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 12px;
    margin: 12px auto 0;
    width: min(540px, 100%);
  }
  .service{
    text-align: left;
    padding: 12px 14px;
  }
  .service h3{ font-size: 15px; margin: 0 0 4px; line-height: 1.2; }
  .service p{ display: block; }   /* mostramos el texto en móvil */
}

/* Tablet/desktop: centrado del buscador */
@media (min-width: 721px){
  .searchbar{ margin: 14px auto 0; }
}