/*
Theme Name: Donde los reyes
Author: Patricio A
Author URI: https://elinous.cl/
Theme URI: https://elinous.cl/
Tags: full-site-editing, block-patterns
Text Domain: donde-los-reyes
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.4
Version: 100.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Styles intended only for the front.*/
html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}



body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

.wp-block-navigation-link a {
	text-decoration:none !important;
}

.wp-block-navigation-link a:hover  {
	text-decoration:underline !important;
}

a:where(:not(.wp-element-button)) {
    color: var(--wp--preset--color--white);
    text-decoration: none;
}

a:hover:where(:not(.wp-element-button)) {
    text-decoration: underline;
}
/* Contenedor */
.wpcf7 form {
  background: #000;
  color: #f5f5dc;
  padding: 20px;
  border-radius: 8px;
}

/* Inputs en fila para los 3 primeros */
.form-grid {
  display: flex;
  gap: 20px;
}
.form-grid p {
	margin:0;
}
.form-grid br {
	display:none;
}
.form-grid .input-group {
  flex: 1;
}

.input-group {
  position: relative;
  margin-bottom: 25px;
}


.input-group input,
.input-group textarea,
.input-group select {
  width: 100%;
	padding:32px 0 0px;
	background: transparent;
	border: none;
	border-bottom: 2px solid #aaa;
	color: #fff;
	font-size:20px;
	font-weight:500;
	font-family:var(--wp--preset--font-family--roboto);
	outline: none;
	min-height: 54px;
}
.input-group select {
    padding-bottom: 12px;
    padding-top: 48px;
}
.wpcf7-not-valid-tip {
	font-size: 0.9rem;
	display: block;
	padding-top: 4px;
} 

.input-group input.wpcf7-not-valid,
.input-group textarea.wpcf7-not-valid,
.input-group select.wpcf7-not-valid {
  border-bottom: 1px solid red;
}
.input-group input:hover,
.input-group textarea:hover,
.input-group select:hover {
border-bottom: 2px solid #ffff;
}

.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
border-bottom: 2px solid #ffff;
}

.wp-block-button__link.wp-element-button {
	display: flex;
	gap: 0.35rem;
	justify-content:center;
}

.input-group select option {
  background: #111; /* fondo gris oscuro */
  color: #fff; /* texto blanco */
  padding: 10px;
}

/* Label inicial */
.input-group label {
	position: absolute;
	top: 0px;
	left: 0;
	color: #f5f5dc;
	font-size: 16px;
	pointer-events: none;
	transition: 0.3s ease all;
	font-family:var(--wp--preset--font-family--roboto);
	font-style:italic;
}

/* Botón */
.wpcf7-submit {
  background: #a00;
  color: #fff;
  border: none;
  padding: 12px 25px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 16px;
  transition: 0.3s;
}

.wpcf7-submit:hover {
  background: #c00;
}



.custom-btn {
  display: inline-block;
  background:var(--wp--preset--color--primary); /* Rojo oscuro */
  color: #fff; /* Texto blanco */
  font-size: 18px;
  font-weight: 500;
  padding: 0px 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  position: relative;
  border-radius: 6px;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
/*   transition: background 0.3s ease; */
}

.custom-btn:hover {
	background:#790204  !important;
}


.custom-btn p {
	margin:0;
}

input.custom-btn {
	 padding: 20px 32px;
}

.custom-btn:hover , .custom-btn:hover a {
  background: #a60000 !important; /* tono más claro al hover */
}

/* Flechas decorativas */

/* .custom-btn::before,
.custom-btn::after {
 content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 6px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='6' viewBox='0 0 20 6' fill='none'><path d='M0 3 H18 M18 3 L20 1 M18 3 L20 5' stroke='%23f5f5dc' stroke-width='2' stroke-linecap='round'/></svg>");
}

.custom-btn::before {
	left:10px;
}
.custom-btn::after {
	right:10px;
} */

.flex-icon , .flex-icon a {
		display: flex;
	align-items: center;
	gap: 0.8rem;
}
/* Links con iconos */
p.link-icon a {
	display: flex;
	width: max-content;
	align-items: center;
	gap: 0.8rem;
	text-decoration: none;
	transition:all 0.1s;
}

p.link-icon a:hover {
	font-weight:600;

}


.logo-header {
	margin-top:-50px;
}


/* Modal */
.show .custom-cover .wp-block-cover__inner-container {
    z-index: 0 !important;
}
.custom-group { 
   opacity: 0;
   visibility: hidden; /* evita que quede clickeable */
   position: fixed; /* en vez de absolute */
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   transition: opacity 0.4s ease-in-out, visibility 0s 0.4s;
   z-index: 9999999999999999;
}


.show .custom-group{
	  opacity:1 !important;
	   visibility: visible;
   transition: opacity 0.4s ease-in-out;
}
.close {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}
.overlay{
 display: none;
}

.show .overlay {
 display: block;
  background: rgba(0, 0, 0, 0.6);
  height: 100vh !important;
  width: 100%;
  max-width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  transition: background 0.15s linear;
	z-index: 33;
}


.is-position-sticky.scrolled .custom-logo {
    max-height: 100px; /* o el tamaño que quieras */
    width: auto;
	margin-top:-20px;
	margin-bottom:1rem;
}


.btn-icon a {
	display:flex;
	align-items:center;
	gap:0.25rem;
}



.w-100 {
	width:100%;
}

.w-100 a {
	width:100%;
}

.menu-phone .wp-block-buttons {
	width:100%;
}
.m-0 {
	margin:0 !important;
}
/* Extra small (teléfonos en vertical, menos de 640px) */
@media (max-width: 639px) {
	/* estilos para móviles */
	:root {
		--wp--preset--spacing--80:2rem !important;
	}
	.custom-group { 
    width: 90%;

	}

/* 	.logo-header {
		margin-top:30px;
		display:none;
	} */
	.logo-header img {
		width: 72%;
	}

	#hero-section {
		padding-top:1rem !important;
	}
	
	.form-grid {
		flex-direction:column;
	}
	.wpcf7 form  {
		padding:0;
	}
	
	#content-historia {
		padding-left:0 !important;
		padding-right:0 !important;
	}
	
	#historia {
		padding-bottom:1rem !important;
	}
	
	.items-left .has-text-align-right{
		text-align:left !important;
	}
	
	.items-left .wp-block-social-links {
		justify-content:start !important;
	}

}

/* Small (teléfonos grandes y móviles en horizontal, 640px - 767px) */
@media (min-width: 640px) and (max-width: 767px) {
  /* estilos para pantallas pequeñas */
}

/* Medium (tablets, 768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* estilos para tablets */
}

/* Large (laptops y pantallas medianas, 1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* estilos para laptops */
}

/* Extra Large (pantallas grandes, 1280px - 1535px) */
@media (min-width: 1280px) and (max-width: 1535px) {
  /* estilos para monitores grandes */
}

/* 2XL (pantallas muy grandes, 1536px o más) */
@media (min-width: 1536px) {
  /* estilos para pantallas ultra anchas */
}