@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quattrocento:wght@400;700&display=swap');
:root {
  --fondo-claro: #fff;
  --detalle: #3A6EA5  ;
  --texto: #222;
  --crema: #f3eee7;
  --verde: #2e7d32;
  --rojo: #c62828;
  --blanco: #fff;
  --gris: #f1ece8;
  --azulClaro: #8000ff;
  --beige: #f9f5f2;
  --celeste: #e2e8f0;
  --carla: #a7bea9;
  --verde2: #7da18b;
  --max-contenido: 700px;


}

body {
  margin: 0;
  padding: 0;
  font-family: 'Georgia', serif;
  background-color: var(--fondo-claro);
  color: var(--texto);
  text-align: left;
  overflow-x: hidden;
  width: 100%;
}
body {
  text-align: left;
}
html {
  scroll-behavior: smooth;
}
html[data-lang="it"] .solo-es {
  display: none;
}

#inicio {
  text-align: center;
  padding: 2rem 1rem;
  background-image: url('./img/diccionario.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

@media (max-width: 767px) {
  #inicio {
    background-image: url('./img/diccCel.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
}
.inline-img {
  height: 1.2em;         /* Igual que la altura de la línea de texto */
  vertical-align: middle; /* Alinea verticalmente con el texto */
  margin-left: 0.2em;  /* Un pequeño espacio a la izquierda */
  margin-right: 0.2em; /* Opcional, espacio a la derecha */
}



nav {
  background: var(--crema);
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 999;
}
.frase-final{
  font-family: 'Lora', serif;
}
.logo {
  font-size: 2rem;
  font-weight: bold;
}

.logo .ciao {
  color: var(--crema);
}

.logo .hola {
  margin-left: -10px;
  color: var(--detalle);
  background: white;
  padding: 0 4px;
  border-radius: 3px;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.hamburger div {
  width: 25px;
  height: 3px;
  background: var(--texto);
}

.menu {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.menu a,
.menu button {
    text-decoration: none;
  font-family: 'Lora', serif;

  background: none;
  border: none;
  color: black;
  font-weight: bold;
  cursor: pointer;
  font-size: 1rem;
}

.menu .lang {
  display: flex;
  gap: 0.5rem;
}

.icon {
  font-size: 1.2rem;
}

.container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

section {
  margin-bottom: 0rem;
  background: var(--crema);
  padding: 2rem;
    scroll-margin-top: 100px; /* Ajustalo según la altura real del nav */

}





.card {
  padding: 1rem;
  border: 1px solid var(--verde);
  border-radius: 10px;
}

.card:nth-child(even) h3 {
  color: var(--verde);
}

.card:nth-child(odd) h3 {
  color: var(--verde);
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto; /* CENTRA el formulario horizontalmente */

}

input, textarea {
  padding: 0.75rem;
  border: 1px solid var(--verde2); /* verde */
  border-radius: 8px;
}

button[type="submit"] {
  background: var(--verde2); /* verde */
  color: white;
  border: none;
  padding: 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}


#linktree-btn {
  display: inline-block;
  margin-top: 1rem;
  background: var(--detalle);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  text-decoration: none;
}
#whatsapp-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 0.8rem;
  border-radius: 50%;
  text-decoration: none;
  z-index: 1000;
}

#contacto h2 {
  text-align: center;
  color: #4a5a50;
  font-size: 2.3rem;
}
#contacto h3 {
  text-align: center;
  color: #4a5a50;
  font-size: 1.5rem;
}

html[data-lang="es"] .solo-italiano {
  display: none;
}
html[data-lang="it"] .solo-español {
  display: none;
}

@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .menu {
  position: absolute;
  top: 60px;
  right: 0;
  flex-direction: column;
  background: var(--crema);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.2s ease;
  padding: 0;
  }

  .menu.active {
    display: flex;
      max-height: 500px;
  padding: 1rem;
  }
}
.cards-container {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ciao {
  color: #2e7d32; /* verde */
  font-weight: bold;
}

.hola {
  color: #c62828; /* rojo */
  font-weight: bold;
}
.resaltado {
  color: #c62828; /* rojo o cualquier color que quieras */
  font-weight: bold;
}
#inicio {
  text-align: center;
  padding: 2rem 1rem;
}

.logo-inicio {
  width: 250px;
  height: auto;
  transition: width 0.3s ease;
}

/* Tamaño más grande para pantallas grandes */
@media (min-width: 768px) {
  .logo-inicio {
    width: 500px;
  }
}

#inicio h1 {
  font-size: 2rem;
font-family: 'Quattrocento', serif;

}
h2, h3 {
  font-family: 'Lora', serif;
}
#inicio h2 {
  font-size: 1.5rem;
  font-weight: normal;
  color: #555;
}

#inicio p {
  font-size: 1.3rem;
  color: #333;
  max-width: 600px;
  margin: 0 auto;
}
.italiano {
  color: green;
}

.espanol {
  color: red;
}
.foto {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* borde redondeado suave */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* sombra suave */
}

.logoNav img {
  height: 50px;   /* o el tamaño que quieras */
  width: auto;
  object-fit: contain;
}
.footer-credito {
  text-align: center;
  background-color: #7da18b;
  color: white;
  padding: 0.5rem 1rem; /* 🔽 más bajo */
  font-size: 0.85rem;
}

.footer-credito a {
  color: white;
  font-weight: bold;
  text-decoration: none;
}

.footer-credito a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .servicios-container {
    display: block;
    padding: 1rem;
  }
#inicio p {
  font-size: 1rem;
  color: #333;
  max-width: 600px;
  margin: 0 auto;
}
  /* Imagen al 100%, bajita, justo después del h1 */
  .servicios-img {
    width: 100%;
    max-height: 150px;
    height: auto;
    margin: 1rem 0;
    order: 1;
    display: block;
  }

  /* Forzar que h1 sea el primero */
  #servicios > h1 {
    order: 0;
  }
}
#servicios2 {
  display: flex;
  gap: 2rem;
  max-width: 1000px;
  margin: 2rem auto;
  padding: 2rem;
  background: var(--crema);
  border-radius: 10px;
  align-items: flex-start; /* que se alineen arriba */
}

/* Columna de texto */
.servicios-texto {
  flex: 1 1 60%;
}

/* Columna imagen */
.servicios-imagen {
  flex: 1 1 35%;
}

.servicios-imagen img {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}
#servicios {
  /* sin background-color aquí */
  background-color: #e3f2fd;
  width: 100%;            /* ancho total de ventana */
  padding: 0;         /* espacio arriba y abajo */
  margin: 0;  
}
#servicios .texto p {
  font-size: 1.1rem;
  color: #4a5a50;
  letter-spacing: 0.02em;
  margin-top: 0;
  margin-bottom: 2rem;
}



/* Responsive: en pantallas pequeñas apilar */
@media (max-width: 768px) {
  #servicios {
    flex-direction: column;
    
  }

  .servicios-imagen {
    margin-top: 1rem;
  }
}
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
img:hover {
  transform: scale(1.03);
  transition: transform 0.3s ease;
}
#whatsapp-btn {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.logo-inicio {
  animation: aparecer 1s ease-out;
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.logo-img{
  border-radius: 0.5rem;
  
}
#contacto {
  
  text-align: center;
    background-image: url('img/fondoDic.jpg');

}

#contacto form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
  text-align: left;
}

.info-contacto {
  
  margin-top: 2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  
}

.info-contacto p {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0;
  font-size: 1.4rem;
  line-height: 1.5;
font-family: 'Quattrocento', serif;

}
.info-contacto a{
  color: #000;
    text-decoration: none;

}
.icono-contacto {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.loader {
  border: 4px solid #f3eee7;
  border-top: 4px solid var(--detalle);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: spin 1s linear infinite;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.status-msg {
  text-align: center;
  margin-top: 1rem;
  font-weight: bold;
  color: var(--verde);
}
#inicio .logo-inicio {
  margin-bottom: 0.5rem; /* reduce espacio debajo del logo */
}

#inicio h1,
#inicio h2,
#inicio p {
  margin-top: 0.2rem;     /* achica separación superior */
  margin-bottom: 0.4rem;  /* achica separación inferior */
}
#sobre-mi {
  width: 100%;            /* ancho total de ventana */
  background-color: var(--celeste);  /* fondo claro */
  padding: 0;         /* espacio arriba y abajo */
  margin: 0;               /* nada de margen */
}

#sobre-mi .texto {
  max-width: 80%;       /* ancho máximo del contenido */
  margin: 0 auto;          /* centrado horizontal */
  border-radius: 0;
  padding: 1rem 3rem;
  box-sizing: border-box;
  color: #40514e;
font-family: 'Quattrocento', serif;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#sobre-mi img.foto {
  width: 300px;
  height: auto;
  margin-bottom: 1rem;
  border-radius: 0;
  box-shadow: 0 6px 14px rgba(0,0,0,0.1);
  object-fit: cover;
}


#sobre-mi h2 {
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: 1.9rem;
  color: #334e42;
  flex-basis: 100%;
  text-align: center;
}

#sobre-mi p[data-key="sobreMiParrafo1"] {
  margin-top: 0;
  margin-bottom: 2rem;
  font-size: 1.2rem;
  color: #4a5a50;
  letter-spacing: 0.02em;
  flex: 1 1 65%;
  text-align: justify;

}




/* Botones matriculas centrados debajo del texto */
.matriculas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
  padding-bottom: 2rem;
  flex-basis: 100%;
}

.boton-matricula {
  background-color: #7da18b;
  color: white;
  white-space: normal; /* Permite que el texto se divida en varias líneas */
  padding: 0.7rem 1.3rem;  border-radius: 25px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 6px rgba(125, 161, 139, 0.5);
  max-width: 400px;
}

.boton-matricula:hover {
  background-color: #5e7b67;
  box-shadow: 0 3px 10px rgba(94, 123, 103, 0.7);
}
#servicios .texto{
  max-width: 80%;       /* ancho máximo del contenido */
  margin: 0 auto;          /* centrado horizontal */
  border-radius: 0;
  padding: 1rem 3rem;
  box-sizing: border-box;
  color: #40514e;
  font-family: 'Georgia', serif;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#servicios4 {
  background-color: var(--carla);
  font-family: 'Lora', serif;
  padding: 2rem 0; /* solo padding arriba y abajo */
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 auto;
  color: #40514e;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.serv{
  font-weight: bold;

}

#servicios4 > h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.9rem;
  color: #334e42;
  width: 100%;

}

#servicios4 > article.ciudadania-text {
  max-width: 80%;
  margin: 0 auto;
  padding: 1rem 3rem;
  box-sizing: border-box;
  color: #40514e;
  font-family: 'Georgia', serif;
  line-height: 1.6;
  /* Quitar display flex y align-items center */
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  text-align: center; /* para centrar el texto, si querés */
  font-size: 1.17rem; /* o el tamaño que uses en las otras secciones */
  
}





/* Contenedor de tarjetas como grid 3x2 */
.cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
  max-width: 900px;
  padding: 1.5rem;
}

/* Estilo para cada tarjeta */
.card {
  background: var(--crema);
  padding: 1.2rem 1rem;
  border: 1px solid var(--verde);
  border-radius: 10px;
  color: #40514e;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  font-family: 'Georgia', serif;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
}

.card h3 {
  color: var(--verde);
  margin-top: 0;
  margin-bottom: 0.8rem;
  font-weight: 600;
  font-size: 1.25rem;
}

/* Para que el texto dentro de la tarjeta quede legible y con separación */
.card p, .card > :not(h3) {
  margin: 0;
  line-height: 1.4;
}

/* Responsive: en pantallas chicas apilar 1 columna */
@media (max-width: 768px) {
  #servicios4 {
    max-width: 95%;
    padding: 1rem 1.5rem;
  }

  .cards-container {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  #sobre-mi .texto,
  #servicios .texto,
  #servicios4 > article.ciudadania-text {
    max-width: 95%;        /* Más ancho */
    padding-left: 1rem;    /* Menos padding lateral */
    padding-right: 1rem;
    text-align: center;
  }
    #servicios4 > article.ciudadania-text {
    max-width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media (max-width: 768px) {
  #servicios4 {
    max-width: 100%;
    padding: 1rem;
  }
}
@media (min-width: 769px) {
  .menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.5rem; /* un poco más de espacio */
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding-right: 80px; /* para que las banderas no tapen */
  }

  .menu .lang {
    position: absolute;
    right: 0;
    display: flex;
    gap: 0.5rem;
    cursor: pointer;
  }
}
/* Por defecto (mobile) todo apilado */

.contenido-flex {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 769px) {
  /* La sección contenido-flex en fila */
  .contenido-flex {
    flex-direction: row;
    gap: 2rem;
  }

  /* Imagen a la izquierda */
  .contenido-flex .foto {
    flex: 0 0 40%;
    max-width: 400px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.1);
    object-fit: cover;
  }

  /* Texto + botones a la derecha */
  .texto-y-botones {
    flex: 1 1 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* separa párrafo y botones */
  }

  /* Para que los botones estén pegados abajo */
  .matriculas {
    margin-top: 1rem;
  }
}
.servicios-flex {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1rem;
}


.titulo-grande h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 700;
  text-transform: none; /* En minúscula */
  margin: 0;
  text-align: center;
  padding-left: 1rem;
}


.texto-servicio p {
  font-family: 'Quattrocento', serif;
  text-align: justify;

  font-size: 1.2rem;
  line-height: 1.7;
  margin: 0;
}

/* Desktop layout */
@media (min-width: 769px) {
  .servicios-flex {
    flex-direction: row-reverse; /* CAMBIO CLAVE */
    align-items: stretch;
  }

  .titulo-grande {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .titulo-grande h1 {
    font-size: 4rem;
    line-height: 1.3;
    text-align: center;
  }

  .texto-servicio {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .texto-servicio p {
    padding-right: 1rem;
        line-height: 2;

  }
}
.intro-servicios {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 900px;       /* igual que .cards-container */
  margin: 0 auto;         /* para centrarlo */
  box-sizing: border-box;
}



.intro-servicios > div {
  width: 100%;
}

.intro-texto,
.frase-contacto {
  font-size: 1.8rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
    color: var(--acento, #000);

}
.frase-contacto {
  margin-top: 0; /* o un valor pequeño */
  padding-top: 0; /* o un valor pequeño */
}

.frase-contacto p {
  margin-top: 0;
}

.frase-contacto a {
  color: var(--acento, #000);
  text-decoration: none;
}

.frase-contacto a:hover {
  text-decoration: underline;
}

/* Dos columnas a partir de pantallas medianas */
@media (min-width: 768px) {
  .intro-servicios {
    flex-direction: row;
    align-items: flex-start;
    gap: 4rem;
  }

  .intro-servicios > div {
    width: 50%;
  }
}

#servicios4 h2 {
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-align: center;
}
.ciudadania-text {
  text-align: justify;
  font-size: 1.3rem;

}
.solo-pc {
  display: none;
}

.solo-mobile {
  display: inline;
}

/* En pantallas grandes (PC), mostrar la versión con salto y ocultar la otra */
@media (min-width: 768px) {
  .solo-pc {
    display: inline;
  }

  .solo-mobile {
    display: none;
  }
}
/* Por defecto (móvil): ocultar los saltos de línea <br> dentro del h1 en #servicios */
#servicios h1 br {
  display: none;
  
}

/* En pantallas grandes (desktop) mostrar los saltos de línea */
@media (min-width: 769px) {
  #servicios h1 br {
    display: block;
  }
}

@media (max-width: 767px) {
  .titulo-grande h1 {
    font-size: 2rem; /* tamaño más chico solo en celulares */
    text-align: center;
  }
  .ciudadania-text {
  text-align: justify;
  font-size: 1.3rem;
      text-align-last: left; /* o right, o start */
  hyphens: auto; /* permite cortar palabras para mejor ajuste */
  word-spacing: normal; /
}
.texto-servicio p {
  font-family: 'Quattrocento', serif;
  text-align: justify;
  text-align-last: left; /* o right, o start */
  hyphens: auto; /* permite cortar palabras para mejor ajuste */
  word-spacing: normal; 
  font-size: 1.2rem;
  line-height: 1.7;
  margin: 0;
}

#sobre-mi p[data-key="sobreMiParrafo1"] {
  margin-top: 0;
  margin-bottom: 2rem;
  font-size: 1.2rem;
  color: #4a5a50;
  letter-spacing: 0.02em;
  flex: 1 1 65%;
  text-align: justify;
    text-align-last: left; /* o right, o start */
  hyphens: auto; /* permite cortar palabras para mejor ajuste */
  word-spacing: normal; /
}
}
.texto-servicio p[data-key="sobreMiParrafo2"] {
  padding: 0.8rem;                    /* espacio interno a la derecha para que el texto no quede pegado */
}
.fade-in .texto h2 {
  font-size: 2.2rem;
  color: #4a5a50; /* para mantener el color también */
  text-align: center;
}
@media (max-width: 768px) {
  .fade-in .texto h2 {
    font-size: 1.7rem;
  }
}
[data-key="sobreMiParrafo1"] a {
  text-decoration: none;
}