/*
Theme Name: Vitali Core
Theme URL: https://vitaliresidencialhn.com/
Description: Tema desarrollado para Residencial Vitali
Version: 0.0.1
Author: Push Digital
Author URL: https://vitaliresidencialhn.com/
*/

/* ===== Roboto (familia unificada por pesos) ===== */
@font-face {
  font-family: "Roboto";
  src:
    local("Roboto Thin"),
    local("Roboto-Thin"),
    url("./Fonts/Roboto-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src:
    local("Roboto Regular"),
    local("Roboto-Regular"),
    url("./Fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src:
    local("Roboto Medium"),
    local("Roboto-Medium"),
    url("./Fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src:
    local("Roboto Bold"),
    local("Roboto-Bold"),
    url("./Fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Oregon LDO (ExtraBold) ===== */
@font-face {
  font-family: "Oregon LDO";
  src:
    local("Oregon LDO ExtraBold"),
    url("./Fonts/OregonDOExtraBold.ttf") format("truetype");
  font-weight: 800; /* ExtraBold ~ 800 */
  font-style: normal;
  font-display: swap;
}

/* ===== Mirai (Medium) ===== */
@font-face {
  font-family: "Mirai";
  src:
    local("Mirai Medium"),
    url("./Fonts/Mirai-Medium.ttf") format("truetype");
  font-weight: 500; /* Medium */
  font-style: normal;
  font-display: swap;
}

/* VARIABLES  */
:root {
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Oregon LDO", "Mirai", var(--font-sans);
  --vitaliblue: #0b2b5b;
  --vitalilight: #eaf0fa;
  --vitaligreen: #324343;
  --vitalibeige: #e9e0d3;
  --vitalilightgray: #ccc;
  --vitalimedgray: #333;
  --vitaliwhite: #fff;
  --vitaliwhitetrans: hsla(97 0% 100% / 0.07);
  --vitaliblacktrans: hsla(0, 0%, 0%, 0.07);
  --overlay-rgb: 34, 94, 63;
  --overlay-alpha: 0.78;
  --card-radius: 14px;
}

/* GENERAL STYLES */
* {
  font-size: 14px;
  font-family: var(--font-sans);
  font-weight: 400;
}

h1, .h1, .title { font-family: "Oregon LDO", var(--font-sans); font-weight: 800; font-size: 2.5rem}
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

.single-title-green { color: var(--vitaligreen); text-align: center; font-size: 4rem; }
.subtitle { font-family: "Mirai", var(--font-sans); font-weight: 500; }
.bold { font-weight: 700; }
.medium { font-weight: 500; }
.thin { font-weight: 100; }

.btn-normal {
  padding: 5px 15px;
  color: var(--vitaliwhite);
  border: 1px solid var(--vitaliwhite);
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.3s linear;
  font-size: 1.2rem;
}

.btn-normal:hover {
  background: var(--vitaliwhitetrans);
}


.btn-normal-black {
  padding: 5px 15px;
  color: var(--vitalimedgray);
  border: 1px solid var(--vitalimedgray);
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.3s linear;
  margin: 0 auto;
  font-size: 1.2rem;
}

.btn-normal-black:hover {
  background: var(--vitaliblacktrans);
}

/* NAV AND HERO */
.bg-nav {
  background: rgba(255, 255, 255, 10);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.5) 100%);
  z-index: 1;
}

.hero-home
{
  width: 100%;
  height: 800px;
  z-index: -1;
  margin-top: -150px;
  background: url(assets/herohome.jpg) center center no-repeat;
  background-size: cover;
}

/* HOME */

.wrap-beige
{
  background: var(--vitalibeige);
  width: 100%;
  height: auto;
}

.wrap-text-green
{
  background-color: var(--vitaligreen);
  width: 70%;
  margin: 0 auto;
  margin-top: -150px;
  height: auto;
  padding: 3rem;
  color: var(--vitaliwhite);
  text-align: center;
}

.wrap-beige video
{
  width: 100%;
  min-height: 500px;
  height: auto;
}

.wrap-text-green-mid
{
  background-color: var(--vitaligreen);
  width: 60%;
  margin: 0 auto;
  margin-top: -150px;
  height: auto;
  padding: 3rem;
  color: var(--vitaliwhite);
  text-align: center;
  font-size: 4rem;
  position: sticky;
  z-index: 2;
}

.wrap-text-green-mid h2
{
  font-size: 3rem;
}

.wrap-text-green-info
{
  background-color: var(--vitaligreen);
  width: max-content;
	max-width: 90%;
  margin: 0 auto;
  margin-top: -150px;
  height: auto;
  padding: 3rem;
  color: var(--vitaliwhite);
  text-align: center;
  z-index: 2;
  position: sticky;
}

.wrap-green-info-two
{
  background-color: var(--vitaligreen);
  color: #Fff;
  padding: 30px;
  width: 70%;
  margin: 0 auto;
  max-width: 100%;
  text-align: center;
}

.wrap-items-info
{
  width: 100%;
  height: auto;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-wrap: wrap;
	zoom: 1.3;
}

.wrap-items-info li
{
  padding: 1rem;
}

.wrap-items-info p
{
  font-size: 1.5rem;
  padding: 0;
  margin: 0;
  font-weight: bold;
  margin-top: 15px;
}

.wrap-items-info span
{
  font-size: 0.8rem;
  margin-top: 10px;
}

.wrap-items-info img
{
  width: 40px;
  height: auto;
  margin: 0 auto;
}


.gallery-card{
  display:block;
  position:relative;
  border-radius: 0;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.gallery-card .ratio{ border-radius: 0; }

.gallery-card img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
  display:block;
}

.gallery-card .overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:1.25rem;
  background: rgba(var(--overlay-rgb), var(--overlay-alpha));
  color:#fff;
  opacity:0;
  transition: opacity .25s ease;
  /* Opcional: un toque de desenfoque para elegancia */
  backdrop-filter: blur(1px);
}

.gallery-card:hover .overlay,
.gallery-card:focus .overlay,
.gallery-card:active .overlay{
  opacity:1;
}

.gallery-card:hover img{ transform: scale(1.05); }

.overlay-body{ max-width: 36ch; }

/* Accesibilidad en dispositivos sin hover: mantiene interacción vía focus */
@media (hover:none){
  .gallery-card:focus .overlay{ opacity:1; }
}


.wrap-info-casa
{
  width: 80%;
  margin: 20px auto;
}

/* FOOTER */
footer
{
  background: var(--vitaligreen);
  color: var(--vitaliwhite);
  text-align: right;
}

footer a
{
  color: var(--vitaliwhite);
  font-size: 1.3rem;
  text-decoration: none;
}

footer ul
{
  display: flex;
  flex-direction: row;
  list-style: none;
  justify-content: end;
}

footer ul li
{
  min-width: 40px;
  width: auto;
  max-width: max-content;
  height: 40px;
  align-items: center;
  display: flex;
}

footer a i
{
  font-size: 2rem;
}

footer .logo-footer
{
  text-align: start;
}


@media screen and (max-width: 800px) {
	h1
	{
		font-size: 2.3rem;
	}
	
	h2, .wrap-text-green-mid h2
	{
		font-size: 1.8rem !important;
	}
	
	.wrap-text-green-mid
	{
		width: 95%;
	}
	
	.wrap-green-info-two h1
	{
		font-size: 1.8rem !important;
	}
}
@media screen and (max-width: 1100px) {
	.wrap-items-info
	{
		zoom: 1;
	}
}