/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/

/* -------------------------------------------------------------------------------------------------------------
   ------------------------------------- INICIO ITred Spa contacto.CSS (ROSADO) --------------------------------
   ------------------------------------------------------------------------------------------------------------- */

/* VARIABLES (colores y tamaños base) */
:root{
  --contacto_rosa_fondo: #000000;          /* fondo general gris pastel principal */
  --contacto_rosa_campo: #f2f2f2;          /* fondo más claro dentro de los inputs */
  --contacto_borde_input: #00000000;         /* color del borde de los inputs */
  --contacto_placeholder: #0000001c;         /* color del texto de los placeholders */
  --contacto_texto: #ffffff;               /* color general de los textos */
  --contacto_asterisco: #d64545;           /* color rojo suave del asterisco de campo requerido */
  --contacto_rosa_boton: #bfbfbf;          /* color principal del botón (gris pastel medio) */
  --contacto_padding_tarjeta: 24px 20px;   /* padding interno de la tarjeta del formulario */
}

/* Seccion general de contacto */
.contacto_seccion{
  min-height: auto; /* altura total visible */
  width: 100%; /* ocupa todo el ancho */
  display: grid;  /* estructura de cuadrícula */
  place-items: stretch; /* estira el contenido interno */
  background: var(--contacto_rosa_fondo); /* fondo rosado total */
  overflow: hidden; /* evita desbordes */
}

/* Contenedor principal con dos columnas (izquierda imagen / derecha formulario) */
.contacto_contenedor{
  display: grid;  /* activa el sistema grid */
  grid-template-columns: 1fr 1fr; /* dos columnas iguales */
  gap: 0; /* sin separación entre columnas */
  min-height: auto; /* ambas columnas ocupan 100% de alto */
}

/* Lado izquierdo que contiene la imagen */
.contacto_lado_izquierdo{
  position: relative;                      /* referencia para posicionar elementos internos */
  background: var(--contacto_rosa_fondo);  /* color de respaldo rosado */
  display: flex;
  justify-content: right;  /* a la derecha verticalmente */
  align-items: center;   /* centra verticalmente */
  position: relative;   /* si necesitas que otros elementos se posicionen dentro */
}

/* Imagen de fondo que cubre el área izquierda */
.contacto_imagen_portada{
  position: absolute; /* cubre toda el área */
  inset: 0; /* top/right/bottom/left en 0 */
  background: var(--contacto_borde_input); /* imagen temporal */
}

/* Lado derecho con el formulario */
.contacto_lado_derecho{
  display: grid; /* activa el sistema grid */
  place-items: center;  /* centra el formulario vertical y horizontalmente */
  padding: 24px 32px;  /* respiración lateral */
}

/* Tarjeta del formulario */
.contacto_tarjeta_formulario{
  background: var(--contacto_rosa_fondo);  /* fondo rosado */
  color: var(--contacto_texto);  /* color de texto negro suave */
  border: none;  /* sin bordes externos */
  box-shadow: none; /* sin sombras (estilo plano) */
  border-radius: 18px; /* esquinas redondeadas */
  padding: var(--contacto_padding_tarjeta);/* relleno interno */
}

/* Título del formulario */
.contacto_titulo{
  color: var(--contacto_texto); /* color del texto */
  margin: 0 0 28px; /* margen inferior */
  font-size: clamp(20px, 2.6vw, 32px); /* tamaño fluido adaptable */
  font-weight: 800; /* peso grueso */
  text-align: center; /* Centramos titulo */
}

/* Contenedor de cada grupo de campo */
.contacto_campo{
  display: block; /* bloque completo */
  margin: 18px 0; /* separación vertical entre campos */
  text-align: left; /* alineado a la izquierda */
}

/* Etiqueta (label) de cada campo */
.contacto_label{
  font-weight: 700; /* texto notorio */
  color: var(--contacto_texto); /* color del texto */
  display: inline-block; /* ocupa su línea */
  margin-bottom: 8px; /* separación inferior */
}

/* Asterisco para campos requeridos */
.contacto_requerido::after{
  content: " *";  /* agrega el asterisco */
  color: var(--contacto_asterisco); /* color rojo */
  font-weight: 800; /* peso grueso */
}

/* Fila doble para Name (First / Last) */
.contacto_campo_doble{
  display: grid; /* activa el grid */
  grid-template-columns: 1fr 1fr; /* dos columnas iguales */
  gap: 12px; /* separación entre inputs */
}


/* Campos de entrada y área de texto */
.contacto_input,
.contacto_textarea{
  width: 100%; /* ocupa todo el ancho disponible */
  padding: 12px 14px; /* espacio interno cómodo */
  border: 2px solid var(--contacto_borde_input); /* borde gris rosado */
  border-radius: 8px; /* bordes redondeados */
  background: var(--contacto_rosa_campo);  /* fondo rosado más claro */
  font-size: 16px; /* tamaño de texto estándar */
  font-weight: 600; /* peso medio */
  outline: none; /* sin contorno al hacer clic */
  box-shadow: none; /* sin sombras extras */
}

/* Placeholder dentro de los inputs */
.contacto_input::placeholder,
.contacto_textarea::placeholder{
  color: var(--contacto_placeholder); /* color gris rosado */
  opacity: 1; /* visibilidad total */
}

/* Estado enfocado (focus) */
.contacto_input:focus,
.contacto_textarea:focus{
  border-color: #534646; /* borde más oscuro al enfocar */
}

/* Se elimina la línea inferior (subrayado) del diseño antiguo */
.contacto_subrayado{ display: none; }

/* Campo con error */
.campo.invalid input,
.campo.invalid textarea,
.contacto_campo.invalid .contacto_input,
.contacto_campo.invalid .contacto_textarea{
  border-color: #d11; /* cambia el borde a rojo */
}

/* Mensaje de error bajo cada campo */
.mensaje_error,
.contacto_mensaje_error{
  display: block; /* ocupa línea completa */
  min-height: 16px; /* mantiene altura constante */
  font-size: 12px; /* texto pequeño */
  line-height: 1.2; /* compacto */
  color: #d11; /* rojo de error */
  margin-top: 6px; /* separación con el campo */
}


/* Botón principal para enviar el formulario */
.contacto_boton_enviar{
  position: relative; /* Nos aseguramos que este adentro */
  padding: 14px 26px; /* espacio interno */
  border: 1px solid rgba(0,0,0,.18); /* borde sutil */
  border-radius: 999px; /* forma ovalada tipo píldora */
  background: var(--contacto_rosa_boton);  /* color rosado fuerte */
  color: #ffffff; /* texto blanco */
  cursor: pointer;  /* cursor de mano */
  font-weight: 700;  /* peso del texto */
  font-size: 16px; /* tamaño del texto */
  box-shadow: 0 2px 0 rgba(0,0,0,.2); /* ligera sombra inferior */
  display: block; /* ocupa línea completa */
  margin: 24px auto 0 auto; /* centrado horizontal */
}

/* TITULO ANIMACION DE LIKE PARA AVISAR SI SE GUARDO EN LA BASE DE DATOS Y SE ENVIO CORREOS DEL FORMULARIO */

  /* Overlay: contenedor base oculto */
  .superposicion{
    position: fixed; /* Fija el contenedor al área visible de la ventana del navegador */
    inset: 0; /* Estira el contenedor a los cuatro lados de la pantalla (top, right, bottom, left en 0) */
    display: none; /* Lo mantiene oculto hasta que se necesite mostrar */
    align-items: center; /* Centra verticalmente el contenido interno cuando se use display:flex */
    justify-content: center; /* Centra horizontalmente el contenido interno */
    background: rgba(0,0,0,.5); /* Añade un velo oscuro sobre el resto de la página */
    backdrop-filter: saturate(120%) blur(2px); /* Aplica un efecto de saturación y desenfoque al contenido detrás */
    z-index: 9999; /* Lo ubica por encima de casi cualquier otro elemento de la página */
  }

  /* Overlay: estado visible  */
  .superposicion__mostrar{ 
    display: flex; /* Al activarse, usa flex para centrar su contenido tanto horizontalmente como verticalmente */
  }

  /* Tarjeta del overlay */
  .superposicion_tarjeta{
    width: min(520px, 92vw); /* Limita el ancho para que se vea bien en escritorio y móviles */
    background: #111; /* Usa un fondo oscuro para resaltar el contenido de la tarjeta */
    color: #fff; /* Usa texto claro para alto contraste sobre el fondo oscuro */
    border-radius: 16px; /* Redondea las esquinas para un estilo agradable */
    padding: 24px 20px; /* Agrega espacio cómodo interno alrededor del contenido */
    box-shadow: 0 10px 40px rgba(0,0,0,.6); /* Da una sombra notoria que separa la tarjeta del fondo */
    text-align: center; /* Centra los textos y elementos internos */
  }

  /* Botón claro dentro del overlay */
  .boton.boton_claro{
    background: #fff; /* Fondo claro para diferenciar del resto de la tarjeta oscura */
    color: #111;  /* Texto oscuro para asegurar legibilidad sobre el fondo claro */
    border: none;   /* Quita cualquier borde adicional */
    border-radius: 10px;  /* Redondea las esquinas para continuidad visual */
    padding: 10px 16px;  /* Hace el botón cómodo de pulsar y leer */
    font-weight: 600;  /* Da presencia al texto del botón sin exagerar */
    cursor: pointer;  /* Indica que es un elemento clicable */
    margin-top: 12px;  /* Deja un respiro respecto al contenido que está arriba */
  }

  /* Animacion bloque de me gusta */
  .animacion_megusta{
    position: relative; /* Sirve de referencia para posicionar elementos internos de forma absoluta */
    width: 88px;  /* Define un ancho fijo del contenedor del ícono */
    height: 88px; /* Define un alto fijo del contenedor del ícono */
    margin: 0 auto 10px auto;/* Centra horizontalmente y separa 10px hacia abajo del contenido siguiente */
  }

  /* Animacion del icono del like con cambios de imagen */
  .animacion_megusta_icono{
    width: 88px; /* Tamaño del gráfico (SVG o imagen) en ancho */
    height: 88px;  /* Tamaño del gráfico (SVG o imagen) en alto */
    fill: #22c55e; /* Color de relleno verde por defecto (éxito) */
    transform: scale(0); /* Inicia oculto en escala 0 para animación de entrada */
    animation: pop 480ms ease-out forwards 120ms;  /* Reproduce animación de aparición con ligera demora */
    filter: drop-shadow(0 6px 18px rgba(34,197,94,.45)); /* Sombra proyectada para resaltar el ícono */
  }

  /* Animacion al rededor del icono */
  .animacion_megusta_estallido{
    position: absolute; /* Se ubica encima del ícono siguiendo el contenedor relativo */
    inset: -8px; /* Se extiende 8px más allá para que el “anillo” sobresalga */
    border-radius: 50%; /* Hace el contorno completamente circular */
    box-shadow: 0 0 0 0 rgba(34,197,94,.35); /* Comienza como un anillo pequeño y visible */
    animation: burst 900ms ease-out forwards 120ms;/* Anima el anillo para que se expanda y se desvanezca */
  }

  /* Fondo de la pagina cuando se abre el overlay */
  .contacto_superposicion,
  .superposicion{
    position: fixed;  /* fijo en pantalla */
    inset: 0;     /* ocupa toda la ventana */
    display: none; /* oculto por defecto */
    align-items: center; /* centra verticalmente */
    justify-content: center; /* centra horizontalmente */
    background: rgba(255, 255, 255, 0.5);   /* capa semitransparente negra */
    backdrop-filter: saturate(120%) blur(2px); /* desenfoque de fondo */
    z-index: 9999;                           /* sobre todo el contenido */
  }

  /* Ideal para que cuando se envie el mensaje aparezca el overlay completo */
  .superposicion__mostrar,
  .superposicion_mostrar,
  .contacto_superposicion_mostrar{
    display: flex;   /* activa flex para centrar el contenido */
  }

  /* Tarjeta interna del overlay */
  .contacto_superposicion_tarjeta,
  .superposicion_tarjeta{
    width: min(520px, 92vw); /* ancho adaptable */
    background: #111111;/* fondo oscuro */
    color: #ffffff;/* texto claro */
    border-radius: 16px; /* esquinas redondeadas */
    padding: 24px 20px;/* espacio interno */
    box-shadow: 0 10px 40px rgba(0,0,0,.6);  /* sombra pronunciada */
    text-align: center; /* texto centrado */
  }

  /* Imagen del resultado (exito / error) */
  .contacto_imagen_resultado{
    width: 96px;   /* ancho fijo */
    height: 96px;  /* alto fijo */
    object-fit: contain; /* sin deformar */
    margin: 0 auto 10px auto; /* centrado con separación inferior */
    display: block; /* bloque */
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); /* pequeña sombra */
  }

  /* Botón cerrar del overlay */
  .contacto_boton_cerrar,
  .boton.boton_claro{
    background: #ffffff;  /* fondo blanco */
    color: #111111;  /* texto oscuro */
    border: none;  /* sin borde */
    border-radius: 10px; /* esquinas suaves */
    padding: 10px 16px;   /* espacio interno */
    font-weight: 600;    /* peso medio */
    cursor: pointer;    /* cursor de mano */
    margin-top: 12px;   /* separación superior */
  }

    /* Estados de éxito / error (la tarjeta recibe .exito o .error desde JS) */
    .superposicion_tarjeta.exito  .animacion_megusta_icono{ 
      fill: #22c55e;            /* Mantiene el ícono verde cuando la operación fue exitosa */
    }
    .superposicion_tarjeta.error  .animacion_megusta_icono{ 
      fill: #ef4444;            /* Cambia el ícono a rojo cuando hubo un error */
      filter: drop-shadow(0 6px 18px rgba(239,68,68,.45)); /* Ajusta la sombra al tono rojo para coherencia */
    }
    .superposicion_tarjeta.error  .animacion_megusta_estallido{ 
      animation: burst 900ms ease-out forwards 120ms;/* Conserva el mismo efecto de estallido también en error */
    }

    /* Animaciones que consume me gusta, animacion de aparecer */
    @keyframes pop{
      0%{ transform: scale(0); opacity: .2; }         /* Comienza pequeño y semitransparente */
      60%{ transform: scale(1.15); opacity: 1; }        /* Supera levemente el tamaño final para sensación elástica */
      100%{ transform: scale(1); }                     /* Termina en su tamaño normal */
    }

    /* Animacion alrededor del icono me gusta */
    @keyframes burst{
      0%{ box-shadow: 0 0 0 0 rgba(34,197,94,0.45); opacity: 1; }  /* Anillo inicial compacto y visible */
      100%{ box-shadow: 0 0 0 24px rgba(34,197,94,0); opacity: 0; }/* Anillo expandido que se desvanece por completo */
    }

  /* Pequeña animacion en el boton cuando enviamos mensaje */
  .contacto_boton_enviar.is_loading {
    position: relative; /* Con relative aparece la animacion */
    color: transparent; /* oculta texto plano */
  }

  /* Spinner simple cuando carga el boton */
  .contacto_boton_enviar.is_loading::before {
    content: ""; /* crea el pseudo-elemento (necesario para que exista) */
    position: absolute; /* Posicion absoluta osea encima del boton */
    inset: 0; /* Ocupa todo el espacio del boton */
    margin: auto; /* Se centra el solo */
    width: 18px;  /* Tamaño del spiner en altura */
    height: 18px; /* Tamaño del spinner en ancho */
    border: 3px solid rgba(255, 255, 255, 0.6); /* Bordes semitransparente para que se vean*/
    border-top-color: #fff; /* Parte superior blanca */
    border-radius: 50%; /* Lo hace circular */
    animation: contacto_spin 0.9s linear infinite; /* Gira hasta que se acabe el procedimiento */
  }

  /* Animación giratoria */
  @keyframes contacto_spin {
    to { transform: rotate(360deg); } /* Rotacion completa */
  }


/* TITULO DE RECAPTCHA V3 GOOGLE */

  /* Ocultamos el Logo que se genera */
  .grecaptcha-badge {
    visibility: hidden; /* Lo ocultamos el logo del reCAPTCHA */
  }

  /* Modificamos el texto */
  .recaptcha-notice {
    margin-top: 10px; /* Generamos espacio alrededor */
    font-size: 12px;  /* Mantenemos las palabras mas chicas */
    color: #ffffff; /* Color blanco para el texto */
  }


/* Vista en teléfonos pequeños (máx 480px) */
@media (max-width: 479px){

  /* Contenedor general del contacto mostrando una columna */
  .contacto_contenedor{
    grid-template-columns: 1fr; /* una sola columna */
  }

  /* Ocultamos a la mujer */
  .contacto_lado_izquierdo{
    display: none; /* oculta la imagen */
  } 

  /* Contenedor formulario le sacamos espacio */
  .contacto_lado_derecho{
    padding: 24px 16px; /* menos padding lateral */
  }
}

/* Vista en teléfonos medianos (máx 480px) */
@media only screen and (min-width: 480px) and (max-width: 767px){

  /* Contenedor principal de los dos contenedores */
  .contacto_contenedor{
    grid-template-columns: 1fr; /* una sola columna */
  }

  /* Sacamos la imagen de la mujer contacto */
  .contacto_lado_izquierdo{
    display: none; /* oculta la imagen */
  }
}

/* ================================
   📱 TABLETS (768px – 1023px)
   ================================ */
@media only screen and (min-width: 768px) and (max-width: 1023px) {

  /* Una sola columna: ocultamos la imagen */
  .contacto_contenedor {
    grid-template-columns: 1fr; /* Para que ocupe todo el espacio el formulario */
  }

  /* Sacamos a la mujer contacto */
  .contacto_lado_izquierdo {
    display: none; /* no mostramos la foto */
  }

  /* Dejamos espacio al rededor */
  .contacto_lado_derecho {
    padding: 40px 100px;  /* Añadimos espacio a los laterales 100px */
  }

  /* Dejando espacio al rededor detro del formulario */
  .contacto_tarjeta_formulario {
    padding: 32px 40px; /* Añadimos espacio a los laterales 100px */
  }
}

/* 💻 iPad Pro / laptops pequeñas (1024px – 1279px) */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {

  /* El grid total: más bajo y centrado */
  .contacto_contenedor{
    grid-template-columns: 0.9fr 1.1fr;  /* 45/55 aprox (imagen/form) */
    align-items: center; /* centra verticalmente */
  }

  /* Formulario con un poco más de aire */
  .contacto_lado_derecho {
    padding: 40px 40px; /* Hacemos que este mas apretado haciendo los inputs con menos ancho */
  }

  /* Dejamos espacio al rededor adentro de tarjeta formulario */
  .contacto_tarjeta_formulario {
    padding: 90px 30px; /* Hacemos que este mas apretado haciendo los inputs con menos ancho */
  }
}