/* =========================
   TARJETA CONTACTO CONTROL TOTAL
========================= */

.contacto-page .contact-card {
    max-width: 300px;
    padding: 10px;
    border-radius: 20px;
    /*background: #f5f5f5;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);*/
    position: relative;
    
    background: transparent !important;
    box-shadow: none !important;
    /* 🔥 CONTROL TOTAL */
    top: 0px;     /* subir / bajar */
    left: 115px;    /* derecha / izquierda */
}

.contacto-page .contact-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.contacto-page .contact-icon svg {
    width: 20px;
    height: 20px;
    fill: #9b0c13;
}

.contacto-page .contact-text h3 {
    font-size: 24px;
    margin-bottom: 8px;
}

.contacto-page .contact-text p {
    font-size: 18px;
    margin: 3px 0;
}

.contacto-page .contact-number {
    font-weight: 700;
    font-size: 20px;
}

.contacto-page .contact-btn {
    display: inline-block;
    padding: 5px 15px;  /* tamaño */
    border-radius: 20px;
    background: #9b0c13; /* color */
    color: #fff;
    font-size: 8px; /* tamaño texto */
    font-weight: 600;
    text-decoration: none;

    position: relative;
    transform: translate(-50px, 0px); /* mover botón libre */
}

.contacto-page .contact-btn:hover {
    background: #7a0a0f;
}

@media (max-width: 768px) {
    .contacto-page .contact-card {
        padding: 25px;
    }

    .contacto-page .contact-text h3 {
        font-size: 15px;
    }

    .contacto-page .contact-text p {
        font-size: 10px;
    }
}


/* =========================
   MAPA CONTROL LIMPIO
========================= */

.contacto-page .contact-map {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    position: relative;
    transform: translate(0px, 0px); /* CONTROL TOTAL */
}

.contacto-page .contact-map iframe {
    width: 100%;
    height: 250px;
    border-radius: 12px;
    border: 0;
    box-shadow: none;
    transition: 0.3s ease;
}

.contacto-page .contact-map iframe:hover {
    transform: scale(1.03);
}

@media (max-width: 768px) {
    .contacto-page .contact-map iframe {
        height: 350px;
    }
}

/* =========================================
   CONTROL TOTAL - COMENTARIOS
   ========================================= */

.comentarios-section {

  /* INPUT NOMBRE */
  --nombre-width: 100px;
  --nombre-height: 20px;
  --nombre-font-size: 5px;
  --nombre-x: 0px;   /* derecha + / izquierda - */
  --nombre-y: 0px;   /* abajo + / arriba - */

  /* TEXTAREA */
  --mensaje-width: 400px;
  --mensaje-height: 50px;
  --mensaje-font-size: 5px;
  --mensaje-x: 0px;
  --mensaje-y: 0px;

  /* PLACEHOLDER */
  --placeholder-size: 5px;

  /* BOTÓN */
  --btn-width: auto;
  --btn-height: auto;
  --btn-font-size: 5px;
  --btn-x: 0px;
  --btn-y: 0px;
}

/* INPUT NOMBRE */
.comentarios-section #nombre {
  width: var(--nombre-width);
  height: var(--nombre-height);
  font-size: var(--nombre-font-size);

  position: relative;
  transform: translate(var(--nombre-x), var(--nombre-y));
}

/* TEXTAREA */
.comentarios-section #mensaje {
  width: var(--mensaje-width);
  height: var(--mensaje-height);
  font-size: var(--mensaje-font-size);

  position: relative;
  transform: translate(var(--mensaje-x), var(--mensaje-y));
}

/* PLACEHOLDER */
.comentarios-section #nombre::placeholder,
.comentarios-section #mensaje::placeholder {
  font-size: var(--placeholder-size);
}

/* BOTÓN ENVIAR */
.comentarios-section button[type="submit"] {
  width: var(--btn-width);
  height: var(--btn-height);
  font-size: var(--btn-font-size);

  position: relative;
  transform: translate(var(--btn-x), var(--btn-y));
}

/* =========================================
   CAJA VISUAL PARA FORMULARIO COMENTARIOS
   ========================================= */

.comentarios-section .comentarios-box {

    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;

}

/* =========================================
   CONTROL TOTAL - TITULO COMENTARIOS
   ========================================= */

.comentarios-section h2 {

  --titulo-size: 60px;
  --titulo-x: 0px;
  --titulo-y: 0px;

  font-size: var(--titulo-size);

  position: relative;
  transform: translate(var(--titulo-x), var(--titulo-y));
}

/* =========================
   COMENTARIOS CUADRO BLANCO
========================= */

.lista-comentarios {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 5px;
}

.comentario-item {
  background: #ffffff;
  padding: 5px;
  border-radius: 16px;
  box-shadow: 0 10px 5px rgba(0,0,0,0.08);
}

.comentario-header {
  display: flex;
  gap: 10px;
  align-items: center;
}

.comentario-nombre {
  font-weight: 700;
  font-size: 5px;
  min-width: 150px;
}

.comentario-mensaje {
  font-size: 5px;
}

.respuesta {
  margin-top: 12px;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 10px;
  font-size: 14px;
}