/* ==========================================================================
   HAPORI — Capa de mejoras (cargar SIEMPRE después de style.css)
   No modifica style.css: si algo no gusta, se quita este archivo y listo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TIPOGRAFÍA AUTOALOJADA
   style.css pedía "Poppins" y "Playfair Display" pero nunca se cargaban:
   el sitio se veía con las fuentes por defecto del navegador.
   Subconjunto latino en WOFF: 4 pesos = ~42 KB (antes 2.8 MB en TTF).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/web/poppins-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/web/poppins-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/web/poppins-SemiBold.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/web/poppins-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --hp-tinta:        #26282b;
  --hp-tinta-suave:  #5b6064;
  --hp-acento:       #da9268;
  --hp-acento-osc:   #b9764f;
  --hp-superficie:   #faf8f6;
  --hp-borde:        rgba(38, 40, 43, 0.10);
  --hp-sombra:       0 1px 2px rgba(38,40,43,.04), 0 8px 24px rgba(38,40,43,.06);
  --hp-sombra-alta:  0 2px 4px rgba(38,40,43,.05), 0 18px 40px rgba(38,40,43,.11);
  --hp-radio:        14px;
}

/* Fallback serif decente mientras carga / si falla Playfair */
body h1, body h2, body h3, body h4, body h5,
.recent-posts h4, .intro h4 {
  font-feature-settings: "kern" 1, "liga" 1;
}

/* --------------------------------------------------------------------------
   2. RITMO DE LECTURA
   -------------------------------------------------------------------------- */
body { line-height: 1.7; }
/* Ojo: no se fija color en `p` a secas, rompería las secciones de fondo oscuro. */
p    { line-height: 1.75; }

/* Evita saltos de layout mientras cargan las imágenes (mejora CLS/Core Web Vitals) */
img { height: auto; }

/* --------------------------------------------------------------------------
   2b. CARRUSEL
   Las diapositivas 2 y 3 pasaron de <h1> a <h2> (Google penaliza varios H1),
   así que el <h2> hereda el aspecto que tenía el <h1>.
   El original usaba 5vw fijo: en pantallas anchas el título largo del primer
   slide se desbordaba encima del menú. Se limita con clamp().
   -------------------------------------------------------------------------- */
.slider .slider-container .swiper-slide .container h1,
.slider .slider-container .swiper-slide .container h2 {
  font-size: clamp(28px, 3.6vw, 60px);
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  color: var(--hp-acento);
  font-weight: 600;
  line-height: 1.12;
  margin-bottom: 20px;
  max-width: 22ch;
}
.slider .slider-container .swiper-slide .container .slide-sub {
  font-weight: 500;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.5;
  color: #fff;
  margin-bottom: 42px;
  max-width: 42ch;
}
/* Fondo de respaldo por si una imagen del carrusel no carga */
.slider .slider-container .swiper-slide {
  background-color: var(--hp-tinta);
}
@media (max-width: 767px) {
  .slider .slider-container .swiper-slide .container { padding-left: 20px; padding-right: 20px; }
  .slider .slider-container .swiper-slide .container h1,
  .slider .slider-container .swiper-slide .container h2 { max-width: 100%; }
  .slider .slider-container .swiper-slide .container .slide-sub { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   2d. GALERÍA DEL MENÚ LATERAL
   El original usaba `float: left` sin limpiar el flujo, así que la dirección
   de abajo se subía encima de las miniaturas. Isotope lo disimulaba dándole
   altura al contenedor, pero calcula esa altura antes de que las imágenes
   carguen (el panel está oculto y son loading="lazy"), así que fallaba.
   Con rejilla el alto es determinista y no depende de la carga.
   -------------------------------------------------------------------------- */
.side-navigation .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.side-navigation .gallery li {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.side-navigation .gallery li a {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  line-height: 0;
}
.side-navigation .gallery li img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform .4s ease, opacity .3s ease;
}
.side-navigation .gallery li a:hover img {
  transform: scale(1.06);
  opacity: .85;
}
.side-navigation address {
  display: block;
  clear: both;
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 28px;
}

/* --------------------------------------------------------------------------
   2e. BOTÓN DE MENÚ (hamburguesa)
   Pasó de <div> a <button> por accesibilidad, y el navegador le metió su
   fondo, borde y padding por defecto. Aquí se le quitan.
   -------------------------------------------------------------------------- */
button.hamburger {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 21px;
  display: block;
  flex: 0 0 auto;
}
button.hamburger::-moz-focus-inner { border: 0; padding: 0; }

/* --------------------------------------------------------------------------
   3. SECCIÓN MISIÓN / VISIÓN — tarjetas reales, altura pareja
   -------------------------------------------------------------------------- */
.recent-posts .col-lg-6 { display: flex; }

.recent-posts .post-box {
  flex-direction: column;
  align-content: flex-start;
  background: #fff;
  border: 1px solid var(--hp-borde);
  border-radius: var(--hp-radio);
  padding: 40px 36px;
  box-shadow: var(--hp-sombra);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative;
  overflow: hidden;
}
.recent-posts .post-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--hp-acento);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease;
}
.recent-posts .post-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--hp-sombra-alta);
  border-color: rgba(218, 146, 104, .35);
}
.recent-posts .post-box:hover::before { transform: scaleY(1); }

.recent-posts .post-box h6 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hp-acento-osc);
  margin-bottom: 18px;
}
.recent-posts .post-box h6::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--hp-acento);
  margin-top: 12px;
  opacity: .55;
}
.recent-posts .post-box p { margin: 0; font-size: 15.5px; }

/* --------------------------------------------------------------------------
   4. VALORES — rejilla de viñetas (reemplaza la lista "1.- 2.- 3.-")
   -------------------------------------------------------------------------- */
.valores-bloque {
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid var(--hp-borde);
}
.valores-encabezado {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hp-acento-osc);
  margin-bottom: 8px;
}
.valores-intro {
  max-width: 46ch;
  margin-bottom: 40px;
  font-size: 15.5px;
}

.valores-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.valores-lista li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--hp-superficie);
  border: 1px solid var(--hp-borde);
  border-radius: 12px;
  padding: 20px 20px 20px 18px;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.valores-lista li:hover {
  background: #fff;
  border-color: rgba(218, 146, 104, .45);
  transform: translateY(-3px);
}

/* La viñeta: rombo de acento, no un número */
.valores-lista .marca {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  background: var(--hp-acento);
  transform: rotate(45deg);
  border-radius: 2px;
}
.valores-lista .valor-nombre {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: var(--hp-tinta);
  line-height: 1.35;
}
.valores-lista .valor-nota {
  display: block;
  font-size: 13px;
  color: var(--hp-tinta-suave);
  margin-top: 4px;
  line-height: 1.5;
}

@media (max-width: 991px) {
  .valores-lista { grid-template-columns: repeat(2, 1fr); }
  .recent-posts .post-box { padding: 32px 26px; }
  .recent-posts .col-lg-6 { margin-bottom: 20px; }
}
@media (max-width: 575px) {
  .valores-lista { grid-template-columns: 1fr; gap: 10px; }
  .valores-bloque { margin-top: 44px; padding-top: 40px; }
}

/* --------------------------------------------------------------------------
   5. SERVICIOS — tarjetas clicables con estado visible
   -------------------------------------------------------------------------- */
/* Se conserva el layout horizontal original (icono a la izquierda);
   solo se añaden esquinas suaves y un estado hover claro de "esto se puede tocar".
   El disparador del modal se movió del <div class="col-..."> al <figure>, para que
   el área que se ilumina sea exactamente la que responde al clic. */
.property-customization figure {
  border-radius: 12px;
  padding: 18px 14px;
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.property-customization figure:hover,
.property-customization figure:focus-visible {
  background: rgba(218, 146, 104, .14);
  border-color: rgba(218, 146, 104, .55);
  transform: translateY(-4px);
}
.property-customization figure figcaption {
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   6. BOTONES Y ENLACES
   -------------------------------------------------------------------------- */
/* El verde se conserva a propósito: es el color con el que la gente reconoce
   WhatsApp, y contrasta contra el degradado terracota del carrusel.
   Tono oscurecido para que el texto blanco pase el mínimo de contraste. */
.language .btn-success {
  background: #1a7f4b;
  border-color: #1a7f4b;
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .02em;
  padding: 11px 20px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: background .25s ease, box-shadow .25s ease, transform .2s ease;
}
.language .btn-success:hover,
.language .btn-success:focus {
  background: #14663c;
  border-color: #14663c;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   7. ACCESIBILIDAD — requisito de Lighthouse y de Google
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[data-toggle="modal"]:focus-visible,
.hamburger:focus-visible {
  outline: 3px solid var(--hp-acento);
  outline-offset: 3px;
  border-radius: 4px;
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--hp-tinta);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-size: 14px;
}
.salto-contenido:focus {
  left: 0;
  color: #fff;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   8. MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .video-bg video { display: none; }
}

/* --------------------------------------------------------------------------
   9. PÁGINA LEGAL (aviso de privacidad)
   -------------------------------------------------------------------------- */
.pagina-legal {
  max-width: 78ch;
  margin: 0 auto;
  padding: 120px 20px 90px;
}
.pagina-legal h1 {
  font-size: 34px;
  margin-bottom: 8px;
}
.pagina-legal .fecha {
  font-size: 14px;
  color: var(--hp-tinta-suave);
  margin-bottom: 40px;
  display: block;
}
.pagina-legal h2 {
  font-size: 19px;
  margin: 42px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--hp-borde);
}
.pagina-legal ul { padding-left: 20px; }
.pagina-legal li { margin-bottom: 8px; color: var(--hp-tinta-suave); }
.pagina-legal a { color: var(--hp-acento-osc); text-decoration: underline; }
.pagina-legal .volver {
  display: inline-block;
  margin-bottom: 32px;
  font-size: 14px;
  text-decoration: none;
  color: var(--hp-tinta-suave);
}
.pagina-legal .volver:hover { color: var(--hp-acento-osc); }