/*
Theme Name: Guitarras
Theme URI: https://guitarrasparalainfancia.es
Description: Guitarras para la infancia
Template: twentytwentyfive
Version: 1.0.0
*/

@import url("../twentytwentyfive/style.css");

body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', sans-serif;
}

.hidden {
	display: none!important;
}


:root {
  --color-mocha-mousse: #A47864;
  --color-tendril: #A8C66C;
  --color-cornflower-blue: #789BDE;
  --color-viola: #B9A7D1;
  --color-rose-tan: #D8A39D;
  --color-cobblestone: #B7A99A;
  --color-willow: #B7A564;
  --color-gardenia: #F2ECE4;
  --color-white: #FFFFFF;
  --color-black: #000000;
}

/* Contenedor general del formulario */
.wpcf7 {
  color: #000;
  width: 100%;
  display: block;
}

form, label {
	width: 100%;
}

/* Campos de entrada y textarea: blancos con texto negro */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #000;
  transition: border-color 0.2s ease-in-out;
}

/* Enfocar los campos */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: #000;
  outline: none;
}

/* Boton de envío */
.wpcf7 input[type="submit"] {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.wpcf7 input[type="submit"]:hover {
  background-color: #333;
}

/* Mensajes de salida */
.wpcf7-response-output {
  margin-top: 1rem;
  padding: 1rem;
  border: 2px solid #000;
  background-color: #f4f4f4;
  font-weight: bold;
  color: #000;
}

.wpcf7-mail-sent-ok {
  border-color: #2ecc71;
  color: #2ecc71;
}

.wpcf7-validation-errors {
  border-color: #e74c3c;
  color: #e74c3c;
}

/* Mensajes de error junto a los campos */
span.wpcf7-not-valid-tip {
  color: #e74c3c;
  font-size: 0.9rem;
}

.wpcf7-form-control.wpcf7-not-valid {
  border-color: #e74c3c;
}


.custom-header {
	justify-content: space-around;
}
.custom-header-text h1, .custom-header-text p {
	text-align: center;
	width: 100%;
}

@media (min-width: 768px) {
	.custom-header {
		justify-content: space-around;
	}
	.custom-header-text h1, .custom-header-text p {
		text-align: left;
	}
}

@media (min-width: 1024px) {
	.custom-header {
		justify-content: space-between;
	}
}


/*
.logo-desktop {
	display: none;
}

.logo-mobile {
	width: 100%;
}

@media (min-width: 768px) {
	.logo-desktop {
		display: block;
	}
	.logo-mobile {
		display: none;
	}
}

*/