/* =============================
   ESTILOS COMPONENTES EDUTIC.AR
   =============================
*/


/* ============
   === MENÚ ===
   ============ */

.header-principal nav {
    /* background: none; */
	background-color: var(--azul-claro); /* azul claro para color de fondo de la barra de menú */
	flex-grow: 1;
}

.header-principal nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
	justify-content: flex-start;
}

.header-principal nav ul li {
	font-size: var(--font1rem16px);
}

.header-principal nav ul li a {
    display: block;
    padding: 12px 20px;
    color: var(--blanco); /* blanco */
    text-decoration: none;
    font-weight: none;
}

/* Item activo general */
.header-principal nav ul li.activo > a {
  background-color: var(--blanco);
  color: var(--azul);
  text-decoration: bold;
  font-weight: bold;
  cursor: default;
}

.header-principal nav ul li.activo > a:hover {
  background-color: var(--blanco);
  color: var(--azul);
}



/* para navegación con mouse */
.header-principal nav ul li a:hover {
    color: var(--verde-muy-oscuro); /* verde muy oscuro */
    background-color: var(--verde-lima); /* verde lima para color de fondo del ítem activo del menú */
}

/* para navegación con tab de teclado */
nav ul li a:focus,
nav ul li a:focus-visible {
    background-color: var(--verde-lima); /* verde lima para color de fondo del ítem activo del menú */
    color: var(--verde-muy-oscuro);          /* verde muy oscuro */
    outline: none; /* oculta el borde negro del tabulado */
}

/* --- Item inicio --- */
.nav-inicio a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 48px;     /* igual que los demás items */
  padding: 12px 0;  /* mantiene coherencia vertical */
}

/* Ícono */
.icono-inicio {
  display: inline-block;
  width: 22px;
  height: 20px;
  background-image: url('/img/casita_inicio.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: background-image 0.2s ease;
}

/* Hover */
.nav-inicio a:hover .icono-inicio,
.nav-inicio a:focus-visible .icono-inicio {
  background-image: url('/img/casita_inicio_hover.png');
}

/* Activo */
.nav-inicio.activo .icono-inicio {
  background-image: url('/img/casita_inicio_activo.png');
}


/* ========================
   === MENÚ HAMBURGUESA ===
   ======================== */

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: var(--font-menu-toggle); /* 28px */
    color: var(--azul-claro); /* azul claro */
    cursor: pointer;
	transition: transform 0.3s ease;
}

.menu-toggle.activo {
    transform: rotate(90deg);
}

.menu-toggle.activo::after {
    content: "✕";
}
.menu-toggle.activo {
    color: var(--verde-muy-oscuro); /* verde muy oscuro */
}
.menu-toggle::after {
    content: "☰";
}


/* ------------------------- */
/* --- DISEÑO RESPONSIVE --- */
/* ------------------------- */

@media (max-width: 768px) {

	nav ul {
        flex-direction: column;
    }

	nav ul li a {
        text-align: center;
    }

	.menu-toggle {
		display: block;
		align-self: flex-end;
	}

	nav {
		width: 100%;
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		transition: max-height 0.3s ease, opacity 0.3s ease;
	}

	nav.activo {
		max-height: 400px; /* suficiente para el menú */
		opacity: 1;
	}

}

/* -------------------------------------------------- */


/* =============================
   === ESTILOS DEL CARROUSEL ===
   ============================= */

.carousel {
    position: relative;
    max-width: 100%;
	background-color: var(--verde-muy-claro-grisado); /* verde muy claro grisado */
	padding: 15px;
	border: 1px solid var(--verde-lima); /* verde lima */
}
.slide {
    display: none;
    text-align: center;
}
.slide.activo {
    display: block;
}
.slide img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
.slide p {
    margin-top: 0px;
    font-size: var(--font1rem16px);
    line-height: 1.4;
	color: var(--gris-muy-oscuro); /* gris muy oscuro */
	/* background-color: var(--gris-muy-claro); / gris muy claro */
	
}


/* BOTONES DEL CARROUSEL */

.carousel button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--verde-lima); /*verde lima */
    color: var(--blanco);
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    font-size: var(--font125rem20px);
    border-radius: 4px;
    opacity: 0.85;
}

.carousel button:hover {
    background-color: var(--verde-lima); /* verde lima */
    color: var(--verde-oscuro); /* verde oscuro */
}

.carousel .prev {
    left: 10px;
}

.carousel .next {
    right: 10px;
}

/* INDICADORES VISUALES DEL CARROUSEL */

.indicadores {
    text-align: center;
    margin-top: 10px;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: var(--gris);
    border-radius: 50%;
    cursor: pointer;
}

.dot.activo {
    background-color: var(--verde-lima); /* verde lima */
}

/* -------------------------------------------------- */


/* ===============================
   === ESTILOS DE LAS TARJETAS ===
   =============================== */

/* TARJETAS - GRILLA */

.tarjetas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* separación entre tarjetas */
}

/* TARJETA BASE */

.tarjeta {
    perspective: 1000px; /* profundidad 3D */
}

/* CONTENEDOR INTERNO DE LA TARJETA - EL QUE GIRA */
.tarjeta-inner {
    position: relative;
    width: 100%;
    height: 260px;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* EFECTO AL PASAR EL MOUSE */

.tarjeta:hover .tarjeta-inner {
    transform: rotateY(180deg);
}
/* FLIP POR CLASE (PARA TOUCH) */
.tarjeta.activo .tarjeta-inner {
    transform: rotateY(180deg);
}
/* FLIP POR TECLA TAB */
.tarjeta:focus-visible .tarjeta-inner {
    transform: rotateY(180deg);
}
/* oculta el borde negro del tabulado */
.tarjeta:focus-visible {
    outline: none;
}

/* CARAS DE LA TARJETA */

.tarjeta-front,
.tarjeta-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
}


/* CARA FRONTAL - DELANTERA */

.tarjeta-front {
    background-color: var(--gris-muy-claro);
    text-align: center;
}

.tarjeta-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tarjeta-front h3 {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 10px;
    background-color: var(--azul-claro); /* azul claro */
    color: var(--blanco);
    font-size: var(--font1rem16px);
}

/* CARA TRASERA - DORSO */

.tarjeta-back {
    background-color: var(--verde-claro); /* verde claro */
    color: var(--verde-oscuro); /* verde oscuro */
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    text-align: center;
}


/* ---------------------------------- */
/* --- RESPONSIVE DE LAS TARJETAS --- */
/* ---------------------------------- */

/* Tablets */
@media (max-width: 1024px) {
    .tarjetas {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Celulares */
@media (max-width: 600px) {
    .tarjetas {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------- */


/* ==========================================
   === ESTILOS DEL FORMULARIO DE CONTACTO ===
   ========================================== */

.form-contacto {
    max-width: 600px;
	padding-left: 1.5em;
	color: var(--verde-oscuro);
}

.form-contacto input#telefono::placeholder {
	color: var(--verde-claro-grisado);
}
.form-contacto input#email::placeholder {
	color: var(--verde-claro-grisado);
}

/* genera un espacio antes de donde se coloque, por ejemplo, antes de una leyenda o label */
.form-contacto .espacio-antes {
	padding-top: 1.5em;
}

/* Cambiar el color del punto del RadioButton */
.form-contacto input[type="radio"] {
	accent-color: var(--verde-oscuro);
}

.campo-form {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.campo-form label,
.campo-form legend {
    margin-bottom: 5px;
    font-weight: bold;
}

.campo-form input,
.campo-form textarea {
    padding: 8px;
	margin-left: 5px;
    font-size: var(--font1rem16px);
	color: var(--verde-oscuro);
    border: 1px solid var(--verde-claro);
	background-color: var(--blanco);
    border-radius: 4px;
}

/* Estado focus */
.campo-form input:focus,
.campo-form textarea:focus {
  outline: none;
  border-bottom-color: var(--verde-lima); /* tono más oscuro al enfocar */
  background: var(--verde-muy-claro);
}

/* Evita el azul/celeste del navegador al perder foco */
.campo-form input:focus-visible,
.campo-form textarea:focus-visible {
  outline: none;
  border-color: var(--verde-lima);
  color: var(--verde-oscuro);

}

/* Chrome / Edge autofill */
.campo-form input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--verde-oscuro) !important;
  border-color: var(--verde-claro);
  color: var(--verde-oscuro);
}

.campo-form small {
    margin-top: 5px;
    font-size: var(--font0875rem14px);
    color: var(--verde-oscuro);
}

fieldset.campo-form {
    border: none;
    padding: 0;
	color: var(--verde-oscuro);
}

fieldset.campo-form label {
    font-weight: normal;
    margin-right: 15px;
	margin-left: 5px;
}

.boton-enviar {
    background-color: var(--verde-lima); /* verde lima */
    color: var(--verde-muy-oscuro); /* verde muy oscuro */
    border: none;
    padding: 10px 20px;
    font-size: var(--font1rem16px);
    cursor: pointer;
    border-radius: 4px;
	margin-top: 15px;

}

.boton-enviar:hover,
.boton-enviar:focus-visible {
    background-color: var(--azul-claro); /* azul claro */
    color: var(--blanco); /* blanco */
}


/* ------------------------------------------------------- */
/* --- CARGANDO PARA EL ENVÍO DEL FORMULARIO y GRACIAS --- */
/* ------------------------------------------------------- */

.contacto {
  position: relative;
  min-height: 100%;
}

/* Overlay general */
.overlay-form {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(2px);
}

/* Oculto por defecto */
.oculto {
  display: none;
}

/* Caja central */
.overlay-contenido {
  text-align: center;
  padding: 2rem;
  border-radius: 12px;
  background: var(--verde-muy-claro);
  border: 1px solid var(--verde-lima);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  max-width: 320px;
}

/* Loader girando (puede ser tu favicon) */
.loader-icono {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  background-image: url('/favicon.ico'); /* o imagen que quieras */
  background-size: contain;
  background-repeat: no-repeat;
  animation: girar 1.2s linear infinite;
}

@keyframes girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* -------------------------------------------------- */


/* -------------------------------------------------- */